@dxos/react-ui-form 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

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

@@ -77,117 +77,14 @@ var translations = [
   }
 ];
 
-// src/components/ControlSection/ControlSection.tsx
-import React from "react";
-import { Button, Input, toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { Layout } from "@dxos/react-ui-mosaic";
-import { mx } from "@dxos/ui-theme";
-var ControlPage = ({ children, classNames, ...props }) => {
-  return /* @__PURE__ */ React.createElement(Layout.Container, {
-    scrollable: true,
-    classNames: "[--control-spacing:var(--dx-trimMd)]"
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "none",
-    className: mx("pli-cardSpacingInline pbe-trimMd", classNames),
-    ...props
-  }, children));
-};
-var ControlSection = ({ title, description, children }) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ControlSectionHeading, {
-    title,
-    description
-  }), children);
-};
-var ControlSectionHeading = ({ title, description }) => {
-  const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h2", {
-    className: "pli-trimMd container-max-width text-xl mbs-trimMd mbe-trimMd"
-  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
-    className: "pli-trimMd mlb-trimMd container-max-width text-description"
-  }, toLocalizedString(description, t)));
-};
-var ControlGroupButton = ({ classNames, ...props }) => {
-  return /* @__PURE__ */ React.createElement(Button, {
-    ...props,
-    classNames: [
-      "md:col-span-2",
-      classNames
-    ]
-  });
-};
-var ControlGroup = ({ children, classNames }) => /* @__PURE__ */ React.createElement("div", {
-  role: "none",
-  className: mx("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd", "[--control-spacing:0px] [&_input]:justify-self-end [&_button]:justify-self-end", classNames)
-}, children);
-var ControlFrame = ({ children }) => /* @__PURE__ */ React.createElement("div", {
-  role: "none",
-  className: mx("container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd p-trimMd", "border border-separator rounded-md")
-}, children);
-var controlItemClasses = mx([
-  "container-max-width grid md:col-span-2 grid-cols-subgrid gap-trimSm items-center",
-  // TODO(burdon): Use grid gap consistently or apply margins consistently?
-  "mlb-[--control-spacing] *:first:!mbs-0 *:last:!mbe-0 pli-trimMd plb-trimMd",
-  "border border-separator rounded-md"
-]);
-var controlItemTitleClasses = "mbe-0 text-lg text-baseText font-normal";
-var controlItemDescriptionClasses = "mlb-trimSm md:mbe-0 text-base text-description";
-var ControlItem = ({ title, description, children }) => {
-  const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React.createElement("div", {
-    className: controlItemClasses
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "none"
-  }, /* @__PURE__ */ React.createElement("h3", {
-    className: controlItemTitleClasses
-  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
-    className: controlItemDescriptionClasses
-  }, toLocalizedString(description, t))), children);
-};
-var ControlItemInput = ({ title, description, children }) => {
-  const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
-    className: controlItemClasses
-  }, /* @__PURE__ */ React.createElement("div", {
-    role: "none"
-  }, /* @__PURE__ */ React.createElement(Input.Label, {
-    classNames: controlItemTitleClasses
-  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React.createElement(Input.Description, {
-    classNames: controlItemDescriptionClasses
-  }, toLocalizedString(description, t)))), children));
-};
-var ControlFrameItem = ({ title, description, children }) => {
-  const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React.createElement("div", {
-    role: "group",
-    className: "min-is-0"
-  }, /* @__PURE__ */ React.createElement("h3", {
-    className: "text-lg mbe-2"
-  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
-    className: "mlb-trimSm md:mbe-0 text-description"
-  }, toLocalizedString(description, t)), children);
-};
-
 // src/components/FieldEditor/FieldEditor.tsx
-import React18, { useCallback as useCallback14, useEffect as useEffect7, useMemo as useMemo7, useState as useState5 } from "react";
-import { Obj as Obj3 } from "@dxos/echo";
+import React17, { useCallback as useCallback14, useEffect as useEffect7, useMemo as useMemo7, useState as useState5 } from "react";
+import { Obj as Obj2 } from "@dxos/echo";
 import { Format as Format4, FormatEnums, formatToType } from "@dxos/echo/internal";
 import { log as log2 } from "@dxos/log";
-import { useAsyncEffect, useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { useAsyncEffect, useTranslation as useTranslation8 } 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);
-};
-
 // src/util/field.ts
 import { Format, GeoLocation, TypeEnum } from "@dxos/echo/internal";
 var parseValue = ({ type, format, value: value3 }) => {
@@ -481,24 +378,24 @@ var getRefProps = (ast) => {
 
 // src/components/Form/fields/ArrayField.tsx
 import * as Option3 from "effect/Option";
-import * as SchemaAST2 from "effect/SchemaAST";
-import React6, { useCallback as useCallback3 } from "react";
+import * as SchemaAST3 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 useTranslation4 } from "@dxos/react-ui";
+import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
 
 // src/components/Form/Form.tsx
 import { createContext } from "@radix-ui/react-context";
 import * as Schema2 from "effect/Schema";
-import React5, { useEffect as useEffect3, useMemo as useMemo4, useRef } from "react";
+import * as SchemaAST2 from "effect/SchemaAST";
+import React4, { useEffect as useEffect3, useMemo as useMemo4, useRef } from "react";
 import { createJsonPath as createJsonPath3, getValue as getValue$2 } from "@dxos/effect";
-import { IconButton, ScrollArea, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { mx as mx4 } from "@dxos/ui-theme";
+import { IconButton, ScrollArea, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/ui-theme";
 
 // 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";
@@ -513,11 +410,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$;
@@ -531,7 +430,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
       errors: errors2
     }, {
       F: __dxlog_file,
-      L: 160,
+      L: 155,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -624,11 +523,12 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
       value: value3
     }, {
       F: __dxlog_file,
-      L: 259,
+      L: 254,
       S: void 0,
       C: (f, a) => f(...a)
     });
     const jsonPath = createJsonPath(path);
+    const pathArray = path;
     let parsedValue = value3;
     try {
       if (type._tag === "NumberKeyword") {
@@ -637,33 +537,33 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 268,
+        L: 264,
         S: void 0,
         C: (f, a) => f(...a)
       });
       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);
@@ -720,6 +620,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);
@@ -761,28 +679,24 @@ var useKeyHandler = (formElement, form) => {
 };
 
 // src/components/Form/FormFieldComponent.tsx
-import React2, { Component } from "react";
-import { Icon, Input as Input2, Tooltip } from "@dxos/react-ui";
-import { errorText, mx as mx2 } from "@dxos/ui-theme";
-var labelSpacing = "mbs-inputSpacingBlock mbe-labelSpacingBlock";
+import React, { Component } from "react";
+import { Icon, Input, Tooltip } from "@dxos/react-ui";
+import { inputTextLabel } from "@dxos/ui-theme";
 var FormFieldLabel = ({ label, error, readonly, asChild }) => {
-  const Label = readonly || asChild ? "span" : Input2.Label;
-  const labelProps = readonly || asChild ? {
-    className: "text-description text-sm"
-  } : {
-    classNames: "!mlb-0 text-sm"
-  };
-  return /* @__PURE__ */ React2.createElement("div", {
+  const Label = readonly || asChild ? "span" : Input.Label;
+  return /* @__PURE__ */ React.createElement("div", {
     role: "none",
-    className: mx2("flex justify-between items-center", labelSpacing)
-  }, /* @__PURE__ */ React2.createElement(Label, labelProps, label), error && /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    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__ */ React2.createElement(Icon, {
+  }, /* @__PURE__ */ React.createElement(Icon, {
     icon: "ph--warning--regular",
     size: 4,
-    classNames: errorText
+    classNames: "text-error-text"
   })));
 };
 FormFieldLabel.displayName = "Form.FieldLabel";
@@ -794,15 +708,18 @@ var FormFieldWrapper = (props) => {
     return null;
   }
   const str = String(value3 ?? "");
-  return /* @__PURE__ */ React2.createElement(Input2.Root, {
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "contents"
+  }, /* @__PURE__ */ React.createElement(Input.Root, {
     validationValence: status
-  }, layout !== "inline" && /* @__PURE__ */ React2.createElement(FormFieldLabel, {
+  }, layout !== "inline" && /* @__PURE__ */ React.createElement(FormFieldLabel, {
     error,
     readonly,
     label
-  }), layout === "static" ? /* @__PURE__ */ React2.createElement("p", null, str) : children ? children({
+  }), layout === "static" ? /* @__PURE__ */ React.createElement("p", null, str) : children ? children({
     value: value3
-  }) : null, layout === "full" && /* @__PURE__ */ React2.createElement(Input2.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input2.Validation, null, error)));
+  }) : null, layout === "full" && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React.createElement(Input.Validation, null, error))));
 };
 var FormFieldErrorBoundary = class extends Component {
   static getDerivedStateFromError(error) {
@@ -820,10 +737,10 @@ var FormFieldErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.error) {
-      return /* @__PURE__ */ React2.createElement("div", {
-        className: "flex gap-2 border border-roseFill font-mono text-sm"
-      }, /* @__PURE__ */ React2.createElement("span", {
-        className: "bg-roseFill text-surfaceText pli-1 font-thin"
+      return /* @__PURE__ */ React.createElement("div", {
+        className: "flex gap-2 border border-rose-fill font-mono text-sm"
+      }, /* @__PURE__ */ React.createElement("span", {
+        className: "bg-rose-fill text-surface-text px-1 font-thin"
       }, "ERROR"), String(this.props.path?.join(".")));
     }
     return this.props.children;
@@ -836,8 +753,8 @@ var FormFieldErrorBoundary = class extends Component {
 };
 
 // src/components/Form/FormFieldSet.tsx
-import React4, { forwardRef, useMemo as useMemo3 } from "react";
-import { mx as mx3 } from "@dxos/ui-theme";
+import React3, { forwardRef, useMemo as useMemo3 } from "react";
+import { mx } from "@dxos/ui-theme";
 import { isTruthy } from "@dxos/util";
 
 // src/components/Form/FormField.tsx
@@ -846,10 +763,10 @@ import * as Option2 from "effect/Option";
 import * as Schema from "effect/Schema";
 import * as SchemaAST from "effect/SchemaAST";
 import * as String2 from "effect/String";
-import React3, { useMemo as useMemo2 } from "react";
+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 { useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { useTranslation } from "@dxos/react-ui";
 var FormField = (props) => {
   const {
     type,
@@ -869,7 +786,7 @@ var FormField = (props) => {
     getOptions: getRefOptions,
     onCreate
   } = props;
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation(translationKey);
   const title = getAnnotation(SchemaAST.TitleAnnotationId)(type);
   const description = getAnnotation(SchemaAST.DescriptionAnnotationId)(type);
   const examples = getAnnotation(SchemaAST.ExamplesAnnotationId)(type);
@@ -895,7 +812,7 @@ var FormField = (props) => {
   const jsonPath = createJsonPath2(path ?? []);
   const CustomField = fieldMap?.[jsonPath];
   if (CustomField) {
-    return /* @__PURE__ */ React3.createElement(CustomField, fieldProps);
+    return /* @__PURE__ */ React2.createElement(CustomField, fieldProps);
   }
   const component = fieldProvider?.({
     schema: Schema.make(type),
@@ -906,7 +823,7 @@ var FormField = (props) => {
     return component;
   }
   if (isArrayType2(type)) {
-    return /* @__PURE__ */ React3.createElement(ArrayField, {
+    return /* @__PURE__ */ React2.createElement(ArrayField, {
       fieldProps: fieldState,
       label,
       ...props
@@ -914,21 +831,27 @@ var FormField = (props) => {
   }
   const Field = getFormField(fieldProps);
   if (Field) {
-    return /* @__PURE__ */ React3.createElement(Field, fieldProps);
+    return /* @__PURE__ */ React2.createElement(Field, fieldProps);
   }
   const options = getOptions(type);
   if (options) {
-    return /* @__PURE__ */ React3.createElement(SelectField, {
+    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) {
-    return /* @__PURE__ */ React3.createElement(RefField, {
+    return /* @__PURE__ */ React2.createElement(RefField, {
       ...fieldProps,
       ...refProps,
       createOptionLabel,
@@ -945,7 +868,7 @@ var FormField = (props) => {
     const typeLiteral = baseNode ? getDiscriminatedType(baseNode, fieldState.getValue()) : findNode(type, SchemaAST.isTypeLiteral);
     if (typeLiteral) {
       const schema = Schema.make(typeLiteral);
-      return /* @__PURE__ */ React3.createElement(FormFieldSet, {
+      return /* @__PURE__ */ React2.createElement(FormFieldSet, {
         schema,
         path,
         readonly,
@@ -991,8 +914,9 @@ var getOptions = (ast) => {
 };
 
 // src/components/Form/FormFieldSet.tsx
-var FormFieldSet = /* @__PURE__ */ forwardRef(({ classNames, label, schema, readonly, path, exclude, sort, projection, layout, ...props }, forwardRef4) => {
-  const values = useFormValues(FormFieldSet.displayName, path);
+var FORM_FIELDSET_NAME = "Form.FieldSet";
+var FormFieldSet = /* @__PURE__ */ forwardRef(({ label, schema, readonly, path, exclude, sort, projection, layout, ...props }, forwardRef4) => {
+  const values = useFormValues(FORM_FIELDSET_NAME, path);
   const properties = useMemo3(() => {
     if (!schema) {
       return [];
@@ -1027,22 +951,22 @@ var FormFieldSet = /* @__PURE__ */ forwardRef(({ classNames, label, schema, read
   if ((readonly || layout === "static") && values == null) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React3.createElement("div", {
     role: "form",
-    className: mx3("is-full", layout === "inline" && "flex flex-col gap-2", classNames),
+    className: mx("w-full", layout === "inline" && "flex flex-col gap-2"),
     ref: forwardRef4
-  }, layout !== "inline" && label && /* @__PURE__ */ React4.createElement(FormFieldLabel, {
+  }, layout !== "inline" && label && /* @__PURE__ */ React3.createElement(FormFieldLabel, {
     label,
     asChild: true
   }), properties.map((property) => {
     const name = property.name.toString();
-    return /* @__PURE__ */ React4.createElement(FormFieldErrorBoundary, {
+    return /* @__PURE__ */ React3.createElement(FormFieldErrorBoundary, {
       key: name,
       path: [
         ...path ?? [],
         name
       ]
-    }, /* @__PURE__ */ React4.createElement(FormField, {
+    }, /* @__PURE__ */ React3.createElement(FormField, {
       type: property.type,
       name,
       path: [
@@ -1056,22 +980,30 @@ var FormFieldSet = /* @__PURE__ */ forwardRef(({ classNames, label, schema, read
     }));
   }).filter(isTruthy));
 });
-FormFieldSet.displayName = "Form.Fields";
+FormFieldSet.displayName = FORM_FIELDSET_NAME;
 
 // src/components/Form/Form.tsx
 var omitId = (schema) => schema.pipe(Schema2.omit("id"));
 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);
+  const lastAppliedPathRef = useRef(null);
   useEffect3(() => {
-    if (!value3 && defaultValue) {
-      setValueEchoAware(values, jsonPath, defaultValue());
+    if (value3 == null && defaultValue && lastAppliedPathRef.current !== jsonPath) {
+      lastAppliedPathRef.current = jsonPath;
+      onValueChange(stablePath, SchemaAST2.stringKeyword, defaultValue());
     }
   }, [
     value3,
-    defaultValue
+    defaultValue,
+    onValueChange,
+    stablePath,
+    jsonPath
   ]);
   return value3;
 };
@@ -1101,60 +1033,64 @@ var FormRoot = ({ children, schema, values, onSave, onCancel, ...props }) => {
     onCancel,
     ...props
   });
-  return /* @__PURE__ */ React5.createElement(FormContextProvider, {
+  return /* @__PURE__ */ React4.createElement(FormContextProvider, {
     form,
     ...props
   }, children);
 };
 FormRoot.displayName = "Form.Root";
-var FormViewport = ({ classNames, children }) => {
-  return /* @__PURE__ */ React5.createElement(ScrollArea.Root, null, /* @__PURE__ */ React5.createElement(ScrollArea.Viewport, {
-    classNames: [
-      "plb-cardSpacingBlock",
-      classNames
-    ]
-  }, children), /* @__PURE__ */ React5.createElement(ScrollArea.Scrollbar, {
-    orientation: "vertical"
-  }, /* @__PURE__ */ React5.createElement(ScrollArea.Thumb, null)));
+var FORM_VIEWPORT_NAME = "Form.Viewport";
+var FormViewport = ({ children, classNames, margin = true, padding = true, thin = true, ...props }) => {
+  return /* @__PURE__ */ React4.createElement(ScrollArea.Root, {
+    orientation: "vertical",
+    classNames,
+    margin,
+    padding,
+    thin,
+    ...props
+  }, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, children));
 };
-FormViewport.displayName = "Form.Viewport";
+FormViewport.displayName = FORM_VIEWPORT_NAME;
+var FORM_CONTENT_NAME = "Form.Content";
 var FormContent = ({ classNames, children }) => {
-  const { form, testId } = useFormContext(FormContent.displayName);
+  const { form, testId } = useFormContext(FORM_CONTENT_NAME);
   const ref = useRef(null);
   useKeyHandler(ref.current, form);
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     ref,
     role: "form",
-    className: mx4("flex flex-col is-full pli-cardSpacingInline density-fine", classNames),
+    className: mx2("w-full flex flex-col gap-form-padding", classNames),
     "data-testid": testId
   }, children);
 };
-FormContent.displayName = "Form.Content";
-var FormFieldSet2 = ({ classNames }) => {
-  const { form, ...props } = useFormContext(FormFieldSet2.displayName);
-  return /* @__PURE__ */ React5.createElement(FormFieldSet, {
-    classNames,
+FormContent.displayName = FORM_CONTENT_NAME;
+var FORM_FIELDSET_NAME2 = "Form.FieldSet";
+var FormFieldSet2 = (props) => {
+  const { form, ...contextProps } = useFormContext(FORM_FIELDSET_NAME2);
+  return /* @__PURE__ */ React4.createElement(FormFieldSet, {
     schema: form.schema,
+    ...contextProps,
     ...props
   });
 };
-FormFieldSet2.displayName = "Form.FieldSet";
+FormFieldSet2.displayName = FORM_FIELDSET_NAME2;
+var FORM_ACTIONS_NAME = "Form.Actions";
 var FormActions = ({ classNames }) => {
-  const { t } = useTranslation3(translationKey);
-  const { form: { canSave, onSave, onCancel }, readonly, layout } = useFormContext(FormActions.displayName);
+  const { t } = useTranslation2(translationKey);
+  const { form: { canSave, onSave, onCancel }, readonly, layout } = useFormContext(FORM_ACTIONS_NAME);
   if (readonly || layout === "static") {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: mx4("grid grid-flow-col auto-cols-fr gap-2 pbs-cardSpacingBlock", classNames)
-  }, onCancel && /* @__PURE__ */ React5.createElement(IconButton, {
+    className: mx2("grid grid-flow-col gap-2 auto-cols-fr py-form-padding", classNames)
+  }, onCancel && /* @__PURE__ */ React4.createElement(IconButton, {
     icon: "ph--x--regular",
     iconEnd: true,
     label: t("cancel button label"),
     onClick: onCancel,
     "data-testid": "cancel-button"
-  }), onSave && /* @__PURE__ */ React5.createElement(IconButton, {
+  }), onSave && /* @__PURE__ */ React4.createElement(IconButton, {
     type: "submit",
     variant: "primary",
     disabled: !canSave,
@@ -1165,52 +1101,53 @@ var FormActions = ({ classNames }) => {
     "data-testid": "save-button"
   }));
 };
-FormActions.displayName = "Form.Actions";
-var FormSubmit = ({ classNames, label, icon }) => {
-  const { t } = useTranslation3(translationKey);
-  const { form: { canSave, onSave }, readonly, layout } = useFormContext(FormSubmit.displayName);
+FormActions.displayName = FORM_ACTIONS_NAME;
+var FORM_SUBMIT_NAME = "Form.Submit";
+var FormSubmit = ({ classNames, label, icon, disabled }) => {
+  const { t } = useTranslation2(translationKey);
+  const { form: { canSave, onSave }, readonly, layout } = useFormContext(FORM_SUBMIT_NAME);
   if (readonly || layout === "static") {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: mx4("flex is-full pbs-cardSpacingBlock", classNames)
-  }, /* @__PURE__ */ React5.createElement(IconButton, {
-    classNames: "is-full",
+    className: mx2("flex w-full pt-form-padding", classNames)
+  }, /* @__PURE__ */ React4.createElement(IconButton, {
+    classNames: "w-full",
     type: "submit",
     variant: "primary",
-    disabled: !canSave,
+    disabled: disabled ?? !canSave,
     icon: icon ?? "ph--check--regular",
     label: label ?? t("save button label"),
     onClick: onSave,
     "data-testid": "save-button"
   }));
 };
-FormSubmit.displayName = "Form.Submit";
+FormSubmit.displayName = FORM_SUBMIT_NAME;
 var Form = {
   Root: FormRoot,
   Viewport: FormViewport,
   Content: FormContent,
   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 } = useTranslation4(translationKey);
+  const { t } = useTranslation3(translationKey);
   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, SchemaAST3.isTypeLiteral);
     if (!typeLiteral) {
       return {};
     }
     return Object.fromEntries(getFormProperties(typeLiteral).map((prop) => {
-      const defaultValue = SchemaAST2.getDefaultAnnotation(prop.type).pipe((annotation) => Option3.getOrUndefined(annotation));
+      const defaultValue = SchemaAST3.getDefaultAnnotation(prop.type).pipe((annotation) => Option3.getOrUndefined(annotation));
       return [
         prop.name,
         defaultValue
@@ -1239,19 +1176,19 @@ var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps,
   if (!elementType || (readonly || layout === "static") && values && values.length < 1) {
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, (layout !== "static" || values && values.length > 0) && /* @__PURE__ */ React6.createElement(FormFieldLabel, {
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, (layout !== "static" || values && values.length > 0) && /* @__PURE__ */ React5.createElement(FormFieldLabel, {
     readonly,
     label,
     asChild: true
-  }), /* @__PURE__ */ React6.createElement("div", {
+  }), /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: "flex flex-col gap-2"
   }, values?.map((_, index) => {
-    return /* @__PURE__ */ React6.createElement("div", {
+    return /* @__PURE__ */ React5.createElement("div", {
       role: "none",
       key: index,
       className: "grid grid-cols-[1fr_min-content] gap-2 last:mb-3"
-    }, /* @__PURE__ */ React6.createElement(FormField, {
+    }, /* @__PURE__ */ React5.createElement(FormField, {
       autoFocus: index === values.length - 1,
       type: elementType,
       path: [
@@ -1261,21 +1198,21 @@ var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps,
       readonly: readonly || layout === "static",
       layout: "inline",
       ...props
-    }), !readonly && layout !== "static" && /* @__PURE__ */ React6.createElement("div", {
+    }), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement("div", {
       role: "none",
-      className: "flex flex-col bs-full justify-end"
-    }, /* @__PURE__ */ React6.createElement("div", {
+      className: "flex flex-col h-full justify-end"
+    }, /* @__PURE__ */ React5.createElement("div", {
       role: "none",
-      className: "flex items-center bs-[var(--line-height)]"
-    }, /* @__PURE__ */ React6.createElement(IconButton2, {
+      className: "flex items-center h-[2rem]"
+    }, /* @__PURE__ */ React5.createElement(IconButton2, {
       icon: "ph--x--regular",
       iconOnly: true,
       label: t("button remove"),
       onClick: () => handleDelete(index),
       classNames: "self-center"
     }))));
-  })), !readonly && layout !== "static" && /* @__PURE__ */ React6.createElement(IconButton2, {
-    classNames: "flex is-full _mlb-cardSpacingBlock",
+  })), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement(IconButton2, {
+    classNames: "flex w-full",
     icon: "ph--plus--regular",
     label: t("add field"),
     onClick: handleAdd
@@ -1293,6 +1230,9 @@ var getDefaultValue = (ast) => {
     case "BooleanKeyword": {
       return false;
     }
+    case "Suspend": {
+      return getDefaultValue(ast.f());
+    }
     default: {
       if (ast && isNestedType2(ast)) {
         return {};
@@ -1304,17 +1244,17 @@ var getDefaultValue = (ast) => {
 };
 
 // src/components/Form/fields/BooleanField.tsx
-import React7, { useCallback as useCallback4 } from "react";
-import { Input as Input3 } from "@dxos/react-ui";
+import React6, { useCallback as useCallback4 } from "react";
+import { Input as Input2 } from "@dxos/react-ui";
 var BooleanField = ({ type, readonly, onValueChange, ...props }) => {
   const handleChange = useCallback4((value3) => onValueChange?.(type, value3), [
     type,
     onValueChange
   ]);
-  return /* @__PURE__ */ React7.createElement(FormFieldWrapper, {
+  return /* @__PURE__ */ React6.createElement(FormFieldWrapper, {
     readonly,
     ...props
-  }, ({ value: value3 }) => /* @__PURE__ */ React7.createElement(Input3.Switch, {
+  }, ({ value: value3 }) => /* @__PURE__ */ React6.createElement(Input2.Switch, {
     disabled: !!readonly,
     checked: value3,
     onCheckedChange: handleChange
@@ -1322,12 +1262,12 @@ var BooleanField = ({ type, readonly, onValueChange, ...props }) => {
 };
 
 // src/components/Form/fields/GeoPointField.tsx
-import React8, { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo5, useState as useState2 } from "react";
+import React7, { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo5, useState as useState2 } from "react";
 import { GeoLocation as GeoLocation3 } from "@dxos/echo/internal";
-import { Input as Input4, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { Input as Input3, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
 var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onValueChange, onBlur }) => {
-  const { t } = useTranslation5(translationKey);
+  const { t } = useTranslation4(translationKey);
   const { status, error } = getStatus();
   const geoPoint = useMemo5(() => getValue() ?? [
     0,
@@ -1373,17 +1313,17 @@ var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onVal
   if ((readonly || layout === "static") && !value3?.latitude && !value3?.longitude) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement(Input4.Root, {
+  return /* @__PURE__ */ React7.createElement(Input3.Root, {
     validationValence: status
-  }, layout !== "inline" && /* @__PURE__ */ React8.createElement(FormFieldLabel, {
+  }, layout !== "inline" && /* @__PURE__ */ React7.createElement(FormFieldLabel, {
     error,
     readonly,
     label,
     asChild: true
-  }), layout === "static" ? /* @__PURE__ */ React8.createElement(LatLng, value3) : /* @__PURE__ */ React8.createElement("div", {
+  }), layout === "static" ? /* @__PURE__ */ React7.createElement(LatLng, value3) : /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(Input4.Root, null, layout !== "inline" && /* @__PURE__ */ React8.createElement(Input4.Label, null, t("latitude label")), /* @__PURE__ */ React8.createElement(Input4.TextInput, {
+  }, /* @__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",
@@ -1393,7 +1333,7 @@ var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onVal
     value: latitudeText ?? "",
     onChange: handleChange("latitude", setLatitudeText),
     onBlur
-  }))), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(Input4.Root, null, layout !== "inline" && /* @__PURE__ */ React8.createElement(Input4.Label, null, t("longitude label")), /* @__PURE__ */ React8.createElement(Input4.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",
@@ -1408,18 +1348,18 @@ var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onVal
 var LatLng = ({ latitude = 0, longitude = 0 }) => {
   const latHem = latitude >= 0 ? "N" : "S";
   const lngHem = longitude >= 0 ? "E" : "W";
-  return /* @__PURE__ */ React8.createElement("span", {
+  return /* @__PURE__ */ React7.createElement("span", {
     className: "inline-flex items-center gap-1"
-  }, /* @__PURE__ */ React8.createElement("span", null, /* @__PURE__ */ React8.createElement("span", null, Math.abs(latitude).toFixed(5)), /* @__PURE__ */ React8.createElement("span", {
+  }, /* @__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__ */ React8.createElement("span", null, /* @__PURE__ */ React8.createElement("span", null, Math.abs(longitude).toFixed(5)), /* @__PURE__ */ React8.createElement("span", {
+  }, "\xB0", latHem)), /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement("span", null, Math.abs(longitude).toFixed(5)), /* @__PURE__ */ React7.createElement("span", {
     className: "text-subdued"
   }, "\xB0", lngHem)));
 };
 
 // src/components/Form/fields/MarkdownField.tsx
-import React9, { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef2 } from "react";
-import { Input as Input5 } from "@dxos/react-ui";
+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 }) => {
   const { status, error } = getStatus();
   const textareaRef = useRef2(null);
@@ -1449,40 +1389,40 @@ var MarkdownField = ({ type, readonly, label, placeholder, layout, getStatus, ge
   if ((readonly || layout === "static") && !value3) {
     return null;
   }
-  return /* @__PURE__ */ React9.createElement(Input5.Root, {
+  return /* @__PURE__ */ React8.createElement(Input4.Root, {
     validationValence: status
-  }, layout !== "inline" && /* @__PURE__ */ React9.createElement(FormFieldLabel, {
+  }, layout !== "inline" && /* @__PURE__ */ React8.createElement(FormFieldLabel, {
     error,
     readonly,
     label
-  }), layout === "static" ? /* @__PURE__ */ React9.createElement("p", null, value3) : /* @__PURE__ */ React9.createElement(Input5.TextArea, {
+  }), layout === "static" ? /* @__PURE__ */ React8.createElement("p", null, value3) : /* @__PURE__ */ React8.createElement(Input4.TextArea, {
     ref: textareaRef,
     disabled: !!readonly,
     placeholder,
     value: value3 ?? "",
-    classNames: "min-bs-auto max-bs-40 overflow-auto",
+    classNames: "min-h-auto max-h-40 overflow-auto",
     onChange: handleChange,
     onBlur,
     style: {
       resize: "none"
     },
     spellCheck: false
-  }), layout === "full" && /* @__PURE__ */ React9.createElement(Input5.Validation, null, error));
+  }), layout === "full" && /* @__PURE__ */ React8.createElement(Input4.Validation, null, error));
 };
 
 // src/components/Form/fields/NumberField.tsx
-import React10, { useCallback as useCallback7 } from "react";
-import { Input as Input6 } from "@dxos/react-ui";
+import React9, { useCallback as useCallback7 } from "react";
+import { Input as Input5 } from "@dxos/react-ui";
 import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
 var NumberField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
   const handleChange = useCallback7((event) => onValueChange(type, safeParseFloat2(event.target.value) || 0), [
     type,
     onValueChange
   ]);
-  return /* @__PURE__ */ React10.createElement(FormFieldWrapper, {
+  return /* @__PURE__ */ React9.createElement(FormFieldWrapper, {
     readonly,
     ...props
-  }, ({ value: value3 = "" }) => /* @__PURE__ */ React10.createElement(Input6.TextInput, {
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React9.createElement(Input5.TextInput, {
     type: "number",
     disabled: !!readonly,
     placeholder,
@@ -1494,24 +1434,25 @@ var NumberField = ({ type, readonly, placeholder, onValueChange, onBlur, ...prop
 
 // src/components/Form/fields/RefField.tsx
 import "@dxos/lit-ui/dx-tag-picker.pcss";
-import React12, { useCallback as useCallback9, useMemo as useMemo6 } from "react";
-import { Entity, Filter, Ref as Ref2 } from "@dxos/echo";
+import React11, { useCallback as useCallback9, useMemo as useMemo6 } from "react";
+import { Entity, Filter, Obj, 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 { DXN } from "@dxos/keys";
 import { DxAnchor } from "@dxos/lit-ui/react";
-import { Button as Button2, Icon as Icon2, Input as Input7, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { descriptionText, mx as mx5 } from "@dxos/ui-theme";
+import { Button, Icon as Icon2, Input as Input6, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { ParentLabelAnnotationId } from "@dxos/schema";
+import { mx as mx3 } from "@dxos/ui-theme";
 
 // src/components/ObjectPicker/ObjectPicker.tsx
-import React11, { forwardRef as forwardRef2, useCallback as useCallback8, useState as useState3 } from "react";
-import { Popover, useTranslation as useTranslation6 } from "@dxos/react-ui";
+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 } = useTranslation6(translationKey);
+  const { t } = useTranslation5(translationKey);
   const { query } = useSearchListInput();
-  return /* @__PURE__ */ React11.createElement(Combobox.Item, {
+  return /* @__PURE__ */ React10.createElement(Combobox.Item, {
     value: "__create__",
     label: t(createOptionLabel[0], {
       ns: createOptionLabel[1].ns,
@@ -1526,7 +1467,7 @@ var CreateItem = ({ createOptionLabel, createOptionIcon, onCreateItemSelect }) =
   });
 };
 var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, onSelect, onCreate, ...props }, ref) => {
-  const { t } = useTranslation6(translationKey);
+  const { t } = useTranslation5(translationKey);
   const [showForm, setShowForm] = useState3(false);
   const [formInitialValue, setFormInitialValue] = useState3("");
   const { results, handleSearch } = useSearchListResults({
@@ -1555,12 +1496,12 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, c
   }, [
     createSchema
   ]);
-  return /* @__PURE__ */ React11.createElement(Combobox.Content, {
+  return /* @__PURE__ */ React10.createElement(Combobox.Content, {
     ...props,
     ref,
     onSearch: handleSearch,
     onKeyDownCapture: handleKeyDown
-  }, showForm && createSchema ? /* @__PURE__ */ React11.createElement(Popover.Viewport, null, /* @__PURE__ */ React11.createElement(Form.Root, {
+  }, showForm && createSchema ? /* @__PURE__ */ React10.createElement(Popover.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Root, {
     testId: "create-referenced-object-form",
     schema: createSchema,
     values: createInitialValuePath ? {
@@ -1568,24 +1509,24 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, c
     } : {},
     onSave: handleFormSave,
     onCancel: handleFormCancel
-  }, /* @__PURE__ */ React11.createElement(Form.Viewport, null, /* @__PURE__ */ React11.createElement(Form.Content, null, /* @__PURE__ */ React11.createElement(Form.FieldSet, null), /* @__PURE__ */ React11.createElement(Form.Actions, null))))) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Combobox.Input, {
+  }, /* @__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
-  }), /* @__PURE__ */ React11.createElement(Combobox.List, null, results.map((option) => /* @__PURE__ */ React11.createElement(Combobox.Item, {
+  }), /* @__PURE__ */ React10.createElement(Combobox.List, null, results.map((option) => /* @__PURE__ */ React10.createElement(Combobox.Item, {
     key: option.id,
     value: option.id,
     label: option.label,
     checked: selectedIds?.includes(option.id),
     onSelect: () => onSelect(option.id),
     classNames: "flex items-center gap-2"
-  })), createOptionLabel && createOptionIcon && createSchema && onCreate && /* @__PURE__ */ React11.createElement(CreateItem, {
+  })), createOptionLabel && createOptionIcon && createSchema && onCreate && /* @__PURE__ */ React10.createElement(CreateItem, {
     createOptionLabel,
     createOptionIcon,
     onCreateItemSelect: (query) => {
       setFormInitialValue(query);
       setShowForm(true);
     }
-  }))), /* @__PURE__ */ React11.createElement(Combobox.Arrow, null));
+  }))), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
 });
 ObjectPickerContent.displayName = "ObjectPickerContent";
 var ObjectPicker = {
@@ -1600,26 +1541,33 @@ 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 ? Obj.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 ? Filter.typename(typename) : Filter.nothing());
+var defaultResultsHook = (db, typename) => useQuery(db, typename ? typename === Type.getTypename(Obj.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 } = useTranslation7(translationKey);
+  const { t } = useTranslation6(translationKey);
   const { status, error } = getStatus();
   const typename = useMemo6(() => type ? findAnnotation(type, ReferenceAnnotationId)?.typename : void 0, [
     type
   ]);
   const results = useResults(db, typename);
-  const options = useMemo6(() => getOptions2(results), [
+  const options = useMemo6(() => {
+    const parentLabel = type ? findAnnotation(type, ParentLabelAnnotationId) === true : false;
+    return getOptions2(results, {
+      parentLabel
+    });
+  }, [
     results,
-    getOptions2
+    getOptions2,
+    type
   ]);
   const handleGetValue = useCallback9(() => {
     const formValue = getValue();
@@ -1676,41 +1624,41 @@ var RefField = (props) => {
   if (!typename || (readonly || layout === "static") && !item) {
     return null;
   }
-  return /* @__PURE__ */ React12.createElement(Input7.Root, {
+  return /* @__PURE__ */ React11.createElement(Input6.Root, {
     validationValence: status
-  }, layout !== "inline" && /* @__PURE__ */ React12.createElement(FormFieldLabel, {
+  }, layout !== "inline" && /* @__PURE__ */ React11.createElement(FormFieldLabel, {
     error,
     readonly,
     label
-  }), /* @__PURE__ */ React12.createElement("div", null, readonly ? !item ? /* @__PURE__ */ React12.createElement("p", {
-    className: mx5(descriptionText, "mbe-2")
-  }, t("empty readonly ref field label")) : /* @__PURE__ */ React12.createElement(DxAnchor, {
+  }), /* @__PURE__ */ React11.createElement("div", null, readonly ? !item ? /* @__PURE__ */ React11.createElement("p", {
+    className: mx3("text-description", "mb-2")
+  }, t("empty readonly ref field label")) : /* @__PURE__ */ React11.createElement(DxAnchor, {
     key: item.id,
-    refid: item.id,
-    rootclassname: "mie-1"
-  }, item.label) : /* @__PURE__ */ React12.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React12.createElement(ObjectPicker.Trigger, {
+    dxn: item.id,
+    rootclassname: "me-1"
+  }, item.label) : /* @__PURE__ */ React11.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Trigger, {
     asChild: true,
     classNames: "p-0"
-  }, item ? /* @__PURE__ */ React12.createElement("div", {
-    className: "flex gap-2 is-full"
-  }, /* @__PURE__ */ React12.createElement(Input7.Root, {
+  }, item ? /* @__PURE__ */ React11.createElement("div", {
+    className: "flex gap-2 w-full"
+  }, /* @__PURE__ */ React11.createElement(Input6.Root, {
     key: item.id
-  }, /* @__PURE__ */ React12.createElement(Input7.TextInput, {
+  }, /* @__PURE__ */ React11.createElement(Input6.TextInput, {
     value: item.label,
     readOnly: true,
-    classNames: "is-full"
-  }))) : /* @__PURE__ */ React12.createElement(Button2, {
-    classNames: "is-full text-start gap-2"
-  }, /* @__PURE__ */ React12.createElement("div", {
+    classNames: "w-full"
+  }))) : /* @__PURE__ */ React11.createElement(Button, {
+    classNames: "w-full text-start gap-2"
+  }, /* @__PURE__ */ React11.createElement("div", {
     role: "none",
     className: "grow overflow-hidden"
-  }, /* @__PURE__ */ React12.createElement("span", {
+  }, /* @__PURE__ */ React11.createElement("span", {
     className: "flex truncate text-description"
-  }, placeholder ?? t("ref field placeholder"))), /* @__PURE__ */ React12.createElement(Icon2, {
+  }, placeholder ?? t("ref field placeholder"))), /* @__PURE__ */ React11.createElement(Icon2, {
     size: 3,
     icon: "ph--caret-down--bold"
-  }))), /* @__PURE__ */ React12.createElement(ObjectPicker.Portal, null, /* @__PURE__ */ React12.createElement(ObjectPicker.Content, {
-    classNames: "popover-card-width",
+  }))), /* @__PURE__ */ React11.createElement(ObjectPicker.Portal, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Content, {
+    classNames: "dx-card-popover-width",
     options,
     selectedIds,
     createSchema: createSchema && omitId(createSchema),
@@ -1719,12 +1667,12 @@ var RefField = (props) => {
     createInitialValuePath,
     onCreate: handleCreate,
     onSelect: handleSelect
-  })))), layout === "full" && /* @__PURE__ */ React12.createElement(Input7.DescriptionAndValidation, null, error));
+  })))), layout === "full" && /* @__PURE__ */ React11.createElement(Input6.DescriptionAndValidation, null, error));
 };
 
 // src/components/Form/fields/SelectField.tsx
-import React13, { useCallback as useCallback10 } from "react";
-import { Input as Input8, Select } from "@dxos/react-ui";
+import React12, { useCallback as useCallback10 } from "react";
+import { Input as Input7, Select } from "@dxos/react-ui";
 var SelectField = ({ type, readonly, label, layout, placeholder, options, getStatus, getValue, onValueChange }) => {
   const { status, error } = getStatus();
   const value3 = getValue();
@@ -1735,37 +1683,37 @@ var SelectField = ({ type, readonly, label, layout, placeholder, options, getSta
   if ((readonly || layout === "static") && value3 == null) {
     return null;
   }
-  return /* @__PURE__ */ React13.createElement(Input8.Root, {
+  return /* @__PURE__ */ React12.createElement(Input7.Root, {
     validationValence: status
-  }, layout !== "inline" && /* @__PURE__ */ React13.createElement(FormFieldLabel, {
+  }, layout !== "inline" && /* @__PURE__ */ React12.createElement(FormFieldLabel, {
     error,
     readonly,
     label
-  }), layout === "static" ? /* @__PURE__ */ React13.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value3)?.label ?? String(value3)) : /* @__PURE__ */ React13.createElement(Select.Root, {
+  }), layout === "static" ? /* @__PURE__ */ React12.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value3)?.label ?? String(value3)) : /* @__PURE__ */ React12.createElement(Select.Root, {
     value: value3,
     onValueChange: handleValueChange
-  }, /* @__PURE__ */ React13.createElement(Select.TriggerButton, {
-    classNames: "is-full",
+  }, /* @__PURE__ */ React12.createElement(Select.TriggerButton, {
+    classNames: "w-full",
     disabled: !!readonly,
     placeholder
-  }), /* @__PURE__ */ React13.createElement(Select.Portal, null, /* @__PURE__ */ React13.createElement(Select.Content, null, /* @__PURE__ */ React13.createElement(Select.Viewport, null, options?.map(({ value: value4, label: label2 }) => (
+  }), /* @__PURE__ */ React12.createElement(Select.Portal, null, /* @__PURE__ */ React12.createElement(Select.Content, null, /* @__PURE__ */ React12.createElement(Select.Viewport, null, options?.map(({ value: value4, label: label2 }) => (
     // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ React13.createElement(Select.Option, {
+    /* @__PURE__ */ React12.createElement(Select.Option, {
       key: String(value4),
       value: String(value4)
     }, label2 ?? String(value4))
-  ))), /* @__PURE__ */ React13.createElement(Select.Arrow, null)))), layout === "full" && /* @__PURE__ */ React13.createElement(Input8.DescriptionAndValidation, null, error));
+  ))), /* @__PURE__ */ React12.createElement(Select.Arrow, null)))), layout === "full" && /* @__PURE__ */ React12.createElement(Input7.DescriptionAndValidation, null, error));
 };
 
 // src/components/Form/fields/SelectOptionField.tsx
-import React14, { useCallback as useCallback11, useEffect as useEffect6, useRef as useRef3, useState as useState4 } from "react";
+import React13, { useCallback as useCallback11, useEffect as useEffect6, useRef as useRef3, useState as useState4 } from "react";
 import { PublicKey } from "@dxos/keys";
-import { IconButton as IconButton3, Input as Input9, Tag, useTranslation as useTranslation8 } from "@dxos/react-ui";
+import { IconButton as IconButton3, Input as Input8, Tag, useTranslation as useTranslation7 } 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";
 var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueChange }) => {
-  const { t } = useTranslation8(translationKey);
+  const { t } = useTranslation7(translationKey);
   const { status, error } = getStatus();
   const [selected, setSelectedId] = useState4(null);
   const [isNewOption, setIsNewOption] = useState4(false);
@@ -1871,42 +1819,42 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     selected,
     isNewOption
   ]);
-  return /* @__PURE__ */ React14.createElement(Input9.Root, {
+  return /* @__PURE__ */ React13.createElement(Input8.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React14.createElement(FormFieldLabel, {
+  }, /* @__PURE__ */ React13.createElement(FormFieldLabel, {
     error,
     readonly,
     label
-  }), /* @__PURE__ */ React14.createElement("div", {
+  }), /* @__PURE__ */ React13.createElement("div", {
     role: "none"
-  }, options && /* @__PURE__ */ React14.createElement(List.Root, {
+  }, options && /* @__PURE__ */ React13.createElement(List.Root, {
     items: options,
     isItem: (_item) => true,
     onMove: readonly ? void 0 : handleMove,
     readonly: !!readonly
-  }, ({ items }) => /* @__PURE__ */ React14.createElement("div", {
+  }, ({ items }) => /* @__PURE__ */ React13.createElement("div", {
     role: "list",
-    className: "is-full overflow-auto"
-  }, items?.map((item) => /* @__PURE__ */ React14.createElement("div", {
+    className: "w-full overflow-auto"
+  }, items?.map((item) => /* @__PURE__ */ React13.createElement("div", {
     key: item.id
-  }, /* @__PURE__ */ React14.createElement(List.Item, {
+  }, /* @__PURE__ */ React13.createElement(List.Item, {
     role: "button",
     item,
     classNames: [
       subtleHover,
-      "flex flex-col cursor-pointer rounded-sm"
+      "flex flex-col cursor-pointer rounded-xs"
     ],
     "aria-expanded": selected === item.id
-  }, /* @__PURE__ */ React14.createElement("div", {
+  }, /* @__PURE__ */ React13.createElement("div", {
     className: "flex items-center"
-  }, /* @__PURE__ */ React14.createElement(List.ItemDragHandle, {
+  }, /* @__PURE__ */ React13.createElement(List.ItemDragHandle, {
     disabled: !!readonly
-  }), /* @__PURE__ */ React14.createElement(List.ItemTitle, {
+  }), /* @__PURE__ */ React13.createElement(List.ItemTitle, {
     onClick: () => handleClick(item.id),
     classNames: "flex-1"
-  }, /* @__PURE__ */ React14.createElement(Tag, {
+  }, /* @__PURE__ */ React13.createElement(Tag, {
     palette: item.color
-  }, item.title || "\u200B")), /* @__PURE__ */ React14.createElement(IconButton3, {
+  }, item.title || "\u200B")), /* @__PURE__ */ React13.createElement(IconButton3, {
     iconOnly: true,
     variant: "ghost",
     label: t(selected === item.id ? "collapse label" : "expand label", {
@@ -1914,13 +1862,13 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     }),
     icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
     onClick: () => handleClick(item.id)
-  })), selected === item.id && /* @__PURE__ */ React14.createElement("div", {
-    className: "pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine"
-  }, /* @__PURE__ */ React14.createElement(Input9.Label, {
+  })), selected === item.id && /* @__PURE__ */ React13.createElement("div", {
+    className: "flex flex-col p-form-padding gap-1 dx-density-fine"
+  }, /* @__PURE__ */ React13.createElement(Input8.Label, {
     classNames: "text-xs"
-  }, t("select option label")), /* @__PURE__ */ React14.createElement("div", {
+  }, t("select option label")), /* @__PURE__ */ React13.createElement("div", {
     className: "grid grid-cols-[1fr_min-content_min-content] gap-1"
-  }, /* @__PURE__ */ React14.createElement(Input9.TextInput, {
+  }, /* @__PURE__ */ React13.createElement(Input8.TextInput, {
     disabled: !!readonly,
     placeholder: t("select option label placeholder"),
     ref: selected === item.id ? inputRef : void 0,
@@ -1928,38 +1876,38 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     onChange: handleTitleChange(item.id),
     onKeyDown: handleKeyDown,
     classNames: "flex-1"
-  }), /* @__PURE__ */ React14.createElement(HuePicker, {
+  }), /* @__PURE__ */ React13.createElement(HuePicker, {
     disabled: !!readonly,
     value: item.color,
     onChange: handleColorChange(item.id)
-  }), /* @__PURE__ */ React14.createElement(IconButton3, {
+  }), /* @__PURE__ */ React13.createElement(IconButton3, {
     disabled: !!readonly,
     icon: "ph--trash--fill",
     iconOnly: true,
     label: t("select option delete"),
     onClick: () => handleDelete(item.id)
-  })))))), /* @__PURE__ */ React14.createElement(IconButton3, {
+  })))))), /* @__PURE__ */ React13.createElement(IconButton3, {
     variant: "ghost",
     icon: "ph--plus--regular",
     label: t("select option add"),
     onClick: handleAdd,
     disabled: !!readonly,
-    classNames: "is-full"
+    classNames: "w-full"
   })))));
 };
 
 // src/components/Form/fields/TextField.tsx
-import React15, { useCallback as useCallback12 } from "react";
-import { Input as Input10 } from "@dxos/react-ui";
+import React14, { useCallback as useCallback12 } from "react";
+import { Input as Input9 } from "@dxos/react-ui";
 var TextField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
   const handleChange = useCallback12((event) => onValueChange(type, event.target.value), [
     type,
     onValueChange
   ]);
-  return /* @__PURE__ */ React15.createElement(FormFieldWrapper, {
+  return /* @__PURE__ */ React14.createElement(FormFieldWrapper, {
     readonly,
     ...props
-  }, ({ value: value3 = "" }) => /* @__PURE__ */ React15.createElement(Input10.TextInput, {
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React14.createElement(Input9.TextInput, {
     noAutoFill: true,
     disabled: !!readonly,
     placeholder,
@@ -1970,17 +1918,17 @@ var TextField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props
 };
 
 // src/components/Form/fields/TextAreaField.tsx
-import React16, { useCallback as useCallback13 } from "react";
-import { Input as Input11 } from "@dxos/react-ui";
+import React15, { useCallback as useCallback13 } from "react";
+import { Input as Input10 } from "@dxos/react-ui";
 var TextAreaField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
   const handleChange = useCallback13((event) => onValueChange(type, event.target.value), [
     type,
     onValueChange
   ]);
-  return /* @__PURE__ */ React16.createElement(FormFieldWrapper, {
+  return /* @__PURE__ */ React15.createElement(FormFieldWrapper, {
     readonly,
     ...props
-  }, ({ value: value3 = "" }) => /* @__PURE__ */ React16.createElement(Input11.TextArea, {
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React15.createElement(Input10.TextArea, {
     rows: 3,
     disabled: !!readonly,
     placeholder,
@@ -1991,9 +1939,9 @@ var TextAreaField = ({ type, readonly, placeholder, onValueChange, onBlur, ...pr
 };
 
 // src/components/Form/fields/TupleField.tsx
-import React17 from "react";
-import { Input as Input12 } from "@dxos/react-ui";
-import { mx as mx6 } from "@dxos/ui-theme";
+import React16 from "react";
+import { Input as Input11 } from "@dxos/react-ui";
+import { mx as mx4 } from "@dxos/ui-theme";
 import { safeParseFloat as safeParseFloat3 } from "@dxos/util";
 var gridCols = [
   "grid-cols-1",
@@ -2004,15 +1952,15 @@ var gridCols = [
 var TupleField = ({ binding, type, readonly, label, getStatus, getValue, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
   const values = getValue() ?? {};
-  return /* @__PURE__ */ React17.createElement(Input12.Root, {
+  return /* @__PURE__ */ React16.createElement(Input11.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React17.createElement(FormFieldLabel, {
+  }, /* @__PURE__ */ React16.createElement(FormFieldLabel, {
     error,
     readonly,
     label
-  }), /* @__PURE__ */ React17.createElement("div", {
-    className: mx6("grid gap-2", gridCols[binding.length - 1])
-  }, binding.map((prop) => /* @__PURE__ */ React17.createElement(Input12.TextInput, {
+  }), /* @__PURE__ */ React16.createElement("div", {
+    className: mx4("grid gap-2", gridCols[binding.length - 1])
+  }, binding.map((prop) => /* @__PURE__ */ React16.createElement(Input11.TextInput, {
     key: prop,
     type: "number",
     disabled: !!readonly,
@@ -2030,7 +1978,7 @@ 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 } = useTranslation9(translationKey);
+  const { t } = useTranslation8(translationKey);
   const [props, setProps] = useState5(projection.getFieldProjection(field.id).props);
   useEffect7(() => setProps(projection.getFieldProjection(field.id).props), [
     field,
@@ -2061,26 +2009,26 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
     fieldSchema: getFormatSchema(props?.format)
   });
   const fieldMap = useMemo7(() => ({
-    ["format"]: (props2) => /* @__PURE__ */ React18.createElement(SelectField, {
+    ["format"]: (props2) => /* @__PURE__ */ React17.createElement(SelectField, {
       ...props2,
       options: FormatEnums.filter((value3) => value3 !== Format4.TypeFormat.None).map((value3) => ({
         value: value3,
         label: t(`format ${value3}`)
       }))
     }),
-    ["referenceSchema"]: (props2) => /* @__PURE__ */ React18.createElement(SelectField, {
+    ["referenceSchema"]: (props2) => /* @__PURE__ */ React17.createElement(SelectField, {
       ...props2,
       options: schemas.map((schema) => ({
         value: schema.typename
       }))
     }),
-    ["referencePath"]: (props2) => /* @__PURE__ */ React18.createElement(SelectField, {
+    ["referencePath"]: (props2) => /* @__PURE__ */ React17.createElement(SelectField, {
       ...props2,
       options: referenceSchema ? getFormProperties(referenceSchema.ast).sort((a, b) => a.name.toString().localeCompare(b.name.toString())).map((p) => ({
         value: p.name.toString()
       })) : []
     }),
-    ["options"]: (props2) => /* @__PURE__ */ React18.createElement(SelectOptionField, props2)
+    ["options"]: (props2) => /* @__PURE__ */ React17.createElement(SelectOptionField, props2)
   }), [
     t,
     schemas,
@@ -2139,7 +2087,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   ]);
   const handleSave = useCallback14((props2) => {
     if (view) {
-      Obj3.change(view, () => {
+      Obj2.change(view, () => {
         projection.setFieldProjection({
           field,
           props: props2
@@ -2169,13 +2117,13 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
       props
     }, {
       F: __dxlog_file2,
-      L: 173,
+      L: 172,
       S: void 0,
       C: (f, a) => f(...a)
     });
     return null;
   }
-  return /* @__PURE__ */ React18.createElement(Form.Root, {
+  return /* @__PURE__ */ React17.createElement(Form.Root, {
     key: field.id,
     fieldMap,
     autoFocus: true,
@@ -2191,7 +2139,138 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
     onValidate: handleValidate,
     onSave: handleSave,
     onCancel: handleCancel
-  }, /* @__PURE__ */ React18.createElement(Form.Content, null, /* @__PURE__ */ React18.createElement(Form.FieldSet, null), /* @__PURE__ */ React18.createElement(Form.Actions, null)));
+  }, /* @__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: "pb-trim-md text-base-surface-text text-lg",
+  description: "text-base text-description",
+  grid: "grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg"
+};
+var SettingsRoot = ({ children }) => {
+  return /* @__PURE__ */ React18.createElement(ScrollArea2.Root, {
+    orientation: "vertical",
+    className: "dx-article"
+  }, /* @__PURE__ */ React18.createElement(ScrollArea2.Viewport, {
+    classNames: "p-trim-md"
+  }, 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: "w-full pt-trim-md space-y-trim-md"
+  }, 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: "px-trim-md mt-trim-md mb-trim-md text-xl"
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React18.createElement("p", {
+    className: "px-trim-md my-trim-md text-description"
+  }, toLocalizedString(description, t)));
+};
+SettingsSectionHeading.displayName = SETTINGS_SECTION_HEADING_NAME;
+var SettingsGroupButton = ({ classNames, ...props }) => {
+  return /* @__PURE__ */ React18.createElement(Button2, {
+    ...props,
+    classNames: [
+      "md:col-span-2",
+      classNames
+    ]
+  });
+};
+SettingsGroupButton.displayName = SETTINGS_GROUP_BUTTON_NAME;
+var SettingsGroup = ({ children, classNames }) => /* @__PURE__ */ React18.createElement("div", {
+  role: "none",
+  className: mx5("group space-y-trim-md", classNames)
+}, children);
+SettingsGroup.displayName = SETTINGS_GROUP_NAME;
+var SettingsFrame = ({ children }) => /* @__PURE__ */ React18.createElement("div", {
+  role: "none",
+  className: "p-trim-md 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-w-0"
+  }, /* @__PURE__ */ React18.createElement("h3", {
+    className: "text-lg mb-2"
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React18.createElement("p", {
+    className: "my-trim-sm md:mb-0 text-description"
+  }, toLocalizedString(description, t)), children);
+};
+SettingsFrameItem.displayName = SETTINGS_FRAME_ITEM_NAME;
+var SettingsContainer = ({ classNames, children }) => {
+  return /* @__PURE__ */ React18.createElement("div", {
+    role: "none",
+    className: mx5([
+      "dx-article",
+      "*:first:mt-0! *:last:mb-0! px-trim-md py-trim-md",
+      "border border-separator rounded-md",
+      classNames
+    ])
+  }, children);
+};
+SettingsContainer.displayName = SETTINGS_CONTAINER_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", {
+    role: "none",
+    className: "overflow-hidden 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", {
+    role: "none",
+    className: "text-end py-1"
+  }, children)));
+};
+SettingsItemInput.displayName = SETTINGS_ITEM_INPUT_NAME;
+var Settings = {
+  Root: SettingsRoot,
+  Section: SettingsSection,
+  SectionHeading: SettingsSectionHeading,
+  Group: SettingsGroup,
+  GroupButton: SettingsGroupButton,
+  Container: SettingsContainer,
+  Frame: SettingsFrame,
+  FrameItem: SettingsFrameItem,
+  Item: SettingsItem,
+  ItemInput: SettingsItemInput
 };
 
 // src/components/ViewEditor/ViewEditor.tsx
@@ -2201,19 +2280,18 @@ 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 { Entity as Entity2, Feed, Filter as Filter2, Format as Format5, Obj as Obj3, Query, QueryAST, Ref as Ref3 } from "@dxos/echo";
+import { View } from "@dxos/echo";
 import { 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 { useObject, useQuery as useQuery2 } from "@dxos/react-client/echo";
+import { IconButton as IconButton4, Input as Input13, Message, useTranslation as useTranslation10 } from "@dxos/react-ui";
 import { 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 mx7, osTranslations as osTranslations2, subtleHover as subtleHover2 } from "@dxos/ui-theme";
+import { ParentLabelAnnotation, 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) => {
+var ViewEditor = /* @__PURE__ */ forwardRef3(({ 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);
@@ -2235,12 +2313,25 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
   useImperativeHandle(forwardedRef, () => projectionModel, [
     projectionModel
   ]);
-  const [expandedField, setExpandedField] = useState6();
   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 Option4.fromNullable(from.scope.queues).pipe(Option4.flatMap((queues) => Array2.head(queues)), Option4.map(String), Option4.getOrUndefined);
   }), Match2.orElse(() => void 0));
+  const feeds = useQuery2(db, Filter2.type(Feed.Feed));
+  const targetRef = useMemo8(() => {
+    if (!queueTarget) {
+      return void 0;
+    }
+    const feed = feeds.find((feed2) => Feed.getQueueDxn(feed2)?.toString() === queueTarget);
+    return feed ? Ref3.fromDXN(Entity2.getDXN(feed)) : void 0;
+  }, [
+    queueTarget,
+    feeds
+  ]);
   const viewSchema = useMemo8(() => {
     const base = Schema3.Struct({
       query: mode === "schema" ? Format5.URL.annotations({
@@ -2252,9 +2343,10 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     if (mode === "tag") {
       return Schema3.Struct({
         ...base.fields,
-        target: Schema3.optional(Schema3.String.annotations({
-          title: "Target Queue"
-        }))
+        // TODO(wittjosiah): Replace Type.Feed with Dataset.Dataset when Ref.Ref supports unions.
+        target: Ref3.Ref(Feed.Feed).pipe(Schema3.annotations({
+          title: "Target Feed"
+        }), ParentLabelAnnotation.set(true), Schema3.optional)
       }).pipe(Schema3.mutable);
     }
     return base.pipe(Schema3.mutable);
@@ -2263,11 +2355,11 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
   ]);
   const viewValues = useMemo8(() => ({
     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({
     types,
@@ -2277,64 +2369,50 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     types,
     tags
   ]);
-  const handleAdd = useCallback15(() => {
-    invariant(!readonly, void 0, {
-      F: __dxlog_file3,
-      L: 146,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
-    const field = projectionModel.createFieldProjection();
-    setExpandedField(field.id);
-  }, [
-    projectionModel,
-    readonly
-  ]);
   const handleUpdate = useCallback15((values) => {
-    requestAnimationFrame(() => {
-      const query = mode === "schema" ? Query.select(Filter2.typename(values.query)).ast : values.query;
-      onQueryChanged?.(query, values.target);
-    });
+    const targetValue = values.target;
+    let queueDxn;
+    if (Ref3.isRef(targetValue)) {
+      const feedDxn = targetValue.dxn.toString();
+      const feed = feeds.find((feed2) => Obj3.getDXN(feed2).toString() === feedDxn);
+      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: 163,
+      L: 185,
       S: void 0,
       A: [
         "!readonly",
         ""
       ]
     });
-    if (fieldId === expandedField) {
-      setExpandedField(void 0);
-    }
     onDelete?.(fieldId);
   }, [
-    expandedField,
     onDelete,
     readonly
   ]);
   return /* @__PURE__ */ React19.createElement("div", {
     role: "none",
-    className: mx7(classNames)
-  }, schemaReadonly && !readonly && /* @__PURE__ */ React19.createElement(Callout.Root, {
+    className: mx6(classNames)
+  }, schemaReadonly && !readonly && /* @__PURE__ */ React19.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__ */ React19.createElement(Message.Title, null, t("system schema description"))), /* @__PURE__ */ React19.createElement(Form.Root, {
     schema: viewSchema,
     values: viewValues,
     fieldMap,
-    autoSave: true,
-    onSave: handleUpdate
+    db,
+    onValuesChanged: handleUpdate
   }, /* @__PURE__ */ React19.createElement(Form.FieldSet, null), /* @__PURE__ */ React19.createElement(FormFieldLabel, {
     label: t("fields label"),
     asChild: true
@@ -2345,16 +2423,6 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     readonly,
     showHeading,
     onDelete: handleDelete
-  })), !readonly && !expandedField && /* @__PURE__ */ React19.createElement("div", {
-    role: "none",
-    className: "mlb-cardSpacingBlock"
-  }, /* @__PURE__ */ React19.createElement(IconButton4, {
-    icon: "ph--plus--regular",
-    label: t("add property button label"),
-    onClick: readonly ? void 0 : handleAdd,
-    // TODO(burdon): Show field limit in ux (not tooltip).
-    disabled: view.projection.fields.length >= VIEW_FIELD_LIMIT,
-    classNames: "is-full"
   })));
 });
 var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDelete }) => {
@@ -2378,6 +2446,22 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     view
   ]);
   const [expandedField, setExpandedField] = useState6();
+  const handleAdd = useCallback15(() => {
+    invariant(!readonly, void 0, {
+      F: __dxlog_file3,
+      L: 250,
+      S: void 0,
+      A: [
+        "!readonly",
+        ""
+      ]
+    });
+    const field = projectionModel.createFieldProjection();
+    setExpandedField(field.id);
+  }, [
+    projectionModel,
+    readonly
+  ]);
   const handleToggleField = useCallback15((field) => {
     setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
   }, [
@@ -2386,7 +2470,7 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   const handleDelete = useCallback15((fieldId) => {
     invariant(!readonly, void 0, {
       F: __dxlog_file3,
-      L: 253,
+      L: 264,
       S: void 0,
       A: [
         "!readonly",
@@ -2405,14 +2489,14 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   const handleMove = useCallback15((fromIndex, toIndex) => {
     invariant(!readonly, void 0, {
       F: __dxlog_file3,
-      L: 265,
+      L: 276,
       S: void 0,
       A: [
         "!readonly",
         ""
       ]
     });
-    Obj4.change(view, (v) => {
+    Obj3.change(view, (v) => {
       const fields = [
         ...v.projection.fields
       ];
@@ -2442,7 +2526,7 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   }
   return /* @__PURE__ */ React19.createElement(List2.Root, {
     items: viewSnapshot.projection.fields,
-    isItem: Schema3.is(FieldSchema),
+    isItem: Schema3.is(View.FieldSchema),
     getId: (field) => field.id,
     onMove: readonly ? void 0 : handleMove,
     readonly
@@ -2450,17 +2534,17 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     className: "text-sm"
   }, t("field path label")), /* @__PURE__ */ React19.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, {
       key: field.id,
       item: field,
-      classNames: listItemGrid,
+      classNames: "grid grid-cols-subgrid col-span-5",
       "aria-expanded": expandedField === field.id
     }, /* @__PURE__ */ React19.createElement("div", {
       role: "none",
-      className: mx7(subtleHover2, listItemGrid, "rounded-sm cursor-pointer min-bs-10")
+      className: mx6(subtleHover2, "grid grid-cols-subgrid col-span-5", "rounded-xs cursor-pointer min-h-10")
     }, /* @__PURE__ */ React19.createElement(List2.ItemDragHandle, {
       disabled: readonly || schemaReadonly
     }), /* @__PURE__ */ React19.createElement(List2.ItemTitle, {
@@ -2490,7 +2574,7 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
       "data-testid": "field.toggle"
     }))), expandedField === field.id && !readonly && /* @__PURE__ */ React19.createElement("div", {
       role: "none",
-      className: "col-span-5 mbs-1 mbe-1 border border-separator rounded-md"
+      className: "col-span-5 mt-1 mb-1 border border-separator rounded-md"
     }, /* @__PURE__ */ React19.createElement(FieldEditor, {
       readonly: readonly || schemaReadonly,
       registry,
@@ -2498,6 +2582,15 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
       field,
       onSave: handleClose
     })));
+  })), !readonly && !expandedField && /* @__PURE__ */ React19.createElement("div", {
+    role: "none",
+    className: "my-form-padding"
+  }, /* @__PURE__ */ React19.createElement(IconButton4, {
+    icon: "ph--plus--regular",
+    label: t("add property button label"),
+    onClick: handleAdd,
+    disabled: viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT,
+    classNames: "w-full"
   }))));
 };
 var customFields = ({ types, tags }) => ({
@@ -2519,15 +2612,6 @@ var customFields = ({ types, tags }) => ({
 export {
   ArrayField,
   BooleanField,
-  ControlFrame,
-  ControlFrameItem,
-  ControlGroup,
-  ControlGroupButton,
-  ControlItem,
-  ControlItemInput,
-  ControlPage,
-  ControlSection,
-  ControlSectionHeading,
   FieldEditor,
   Form,
   FormFieldErrorBoundary,
@@ -2540,12 +2624,12 @@ export {
   RefField,
   SelectField,
   SelectOptionField,
+  Settings,
   TextAreaField,
   TextField,
   TupleField,
   ViewEditor,
   cellClassesForFieldType,
-  controlItemClasses,
   formatForDisplay,
   formatForEditing,
   getDefaultValue,
@@ -2554,7 +2638,6 @@ export {
   omitId,
   parseValue,
   pathNotUniqueError,
-  setValueEchoAware,
   translations,
   useFormContext,
   useFormFieldState,