@dxos/react-ui-form 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/dist/lib/browser/index.mjs

@@ -75,104 +75,27 @@ 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 } from "@dxos/echo";
+import React17, { useCallback as useCallback14, useEffect as useEffect7, useMemo as useMemo7, useState as useState5 } 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 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 }) => {
@@ -467,21 +390,22 @@ 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 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 { createJsonPath as createJsonPath3, getValue as getValue$2, setValue as setValue$2 } from "@dxos/effect";
-import { IconButton, ScrollArea, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { mx as mx4 } from "@dxos/ui-theme";
+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 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 { log } from "@dxos/log";
 import { useDefaultValue } from "@dxos/react-ui";
@@ -515,7 +439,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
       errors: errors2
     }, {
       F: __dxlog_file,
-      L: 157,
+      L: 160,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -608,7 +532,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
       value: value3
     }, {
       F: __dxlog_file,
-      L: 256,
+      L: 259,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -621,13 +545,13 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 265,
+        L: 268,
         S: void 0,
         C: (f, a) => f(...a)
       });
       parsedValue = void 0;
     }
-    const newValues = {
+    const newValues = Obj2.isObject(values) ? (setValueEchoAware(values, jsonPath, parsedValue), values) : {
       ...setValue$(values, jsonPath, parsedValue)
     };
     setValues(newValues);
@@ -745,25 +669,16 @@ 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 { errorText } 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", {
-    role: "none",
-    className: mx2("flex justify-between items-center", labelSpacing)
-  }, /* @__PURE__ */ React2.createElement(Label, labelProps, label), error && /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+  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, {
     asChild: true,
     content: error,
     side: "bottom"
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+  }, /* @__PURE__ */ React.createElement(Icon, {
     icon: "ph--warning--regular",
     size: 4,
     classNames: errorText
@@ -778,15 +693,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) {
@@ -804,9 +722,9 @@ var FormFieldErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.error) {
-      return /* @__PURE__ */ React2.createElement("div", {
+      return /* @__PURE__ */ React.createElement("div", {
         className: "flex gap-2 border border-roseFill font-mono text-sm"
-      }, /* @__PURE__ */ React2.createElement("span", {
+      }, /* @__PURE__ */ React.createElement("span", {
         className: "bg-roseFill text-surfaceText pli-1 font-thin"
       }, "ERROR"), String(this.props.path?.join(".")));
     }
@@ -820,8 +738,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
@@ -830,10 +748,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,
@@ -853,7 +771,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);
@@ -879,7 +797,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),
@@ -890,7 +808,7 @@ var FormField = (props) => {
     return component;
   }
   if (isArrayType2(type)) {
-    return /* @__PURE__ */ React3.createElement(ArrayField, {
+    return /* @__PURE__ */ React2.createElement(ArrayField, {
       fieldProps: fieldState,
       label,
       ...props
@@ -898,11 +816,11 @@ 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, {
+    return /* @__PURE__ */ React2.createElement(SelectField, {
       ...fieldProps,
       options: options.map((option) => ({
         value: option,
@@ -912,7 +830,7 @@ var FormField = (props) => {
   }
   const refProps = getRefProps(type);
   if (refProps) {
-    return /* @__PURE__ */ React3.createElement(RefField, {
+    return /* @__PURE__ */ React2.createElement(RefField, {
       ...fieldProps,
       ...refProps,
       createOptionLabel,
@@ -929,7 +847,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,
@@ -975,8 +893,9 @@ 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) => {
-  const values = useFormValues(FormFieldSet.displayName, path);
+  const values = useFormValues(FORM_FIELDSET_NAME, path);
   const properties = useMemo3(() => {
     if (!schema) {
       return [];
@@ -1011,22 +930,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("is-full", layout === "inline" && "flex flex-col gap-2", classNames),
     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: [
@@ -1040,7 +959,7 @@ 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"));
@@ -1051,7 +970,7 @@ var useFormValues = (componentName, path = [], defaultValue) => {
   const value3 = getValue$2(values, jsonPath);
   useEffect3(() => {
     if (!value3 && defaultValue) {
-      setValue$2(values, jsonPath, defaultValue());
+      setValueEchoAware(values, jsonPath, defaultValue());
     }
   }, [
     value3,
@@ -1085,60 +1004,59 @@ 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, {
+var FORM_VIEWPORT_NAME = "Form.Viewport";
+var FormViewport = ({ children }) => {
+  return /* @__PURE__ */ React4.createElement(ScrollArea.Root, {
     orientation: "vertical"
-  }, /* @__PURE__ */ React5.createElement(ScrollArea.Thumb, null)));
+  }, /* @__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("flex flex-col is-full pli-cardSpacingInline density-fine", classNames),
     "data-testid": testId
   }, children);
 };
-FormContent.displayName = "Form.Content";
+FormContent.displayName = FORM_CONTENT_NAME;
+var FORM_FIELDSET_NAME2 = "Form.FieldSet";
 var FormFieldSet2 = ({ classNames }) => {
-  const { form, ...props } = useFormContext(FormFieldSet2.displayName);
-  return /* @__PURE__ */ React5.createElement(FormFieldSet, {
+  const { form, ...props } = useFormContext(FORM_FIELDSET_NAME2);
+  return /* @__PURE__ */ React4.createElement(FormFieldSet, {
     classNames,
     schema: form.schema,
     ...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 auto-cols-fr gap-2 pbs-cardSpacingBlock", 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,
@@ -1149,28 +1067,29 @@ 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, {
+    className: mx2("flex is-full pbs-cardSpacingBlock", classNames)
+  }, /* @__PURE__ */ React4.createElement(IconButton, {
     classNames: "is-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,
@@ -1183,7 +1102,7 @@ var Form = {
 
 // 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, () => []);
@@ -1223,19 +1142,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: [
@@ -1245,20 +1164,20 @@ 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", {
+    }, /* @__PURE__ */ React5.createElement("div", {
       role: "none",
       className: "flex items-center bs-[var(--line-height)]"
-    }, /* @__PURE__ */ React6.createElement(IconButton2, {
+    }, /* @__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, {
+  })), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement(IconButton2, {
     classNames: "flex is-full _mlb-cardSpacingBlock",
     icon: "ph--plus--regular",
     label: t("add field"),
@@ -1277,6 +1196,9 @@ var getDefaultValue = (ast) => {
     case "BooleanKeyword": {
       return false;
     }
+    case "Suspend": {
+      return getDefaultValue(ast.f());
+    }
     default: {
       if (ast && isNestedType2(ast)) {
         return {};
@@ -1288,17 +1210,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
@@ -1306,12 +1228,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,
@@ -1357,17 +1279,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",
@@ -1377,7 +1299,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",
@@ -1392,18 +1314,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);
@@ -1433,13 +1355,13 @@ 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,
@@ -1451,22 +1373,22 @@ var MarkdownField = ({ type, readonly, label, placeholder, layout, getStatus, ge
       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,
@@ -1478,24 +1400,24 @@ 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, 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 { descriptionText, 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,
@@ -1510,7 +1432,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({
@@ -1539,12 +1461,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 ? {
@@ -1552,24 +1474,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 = {
@@ -1592,10 +1514,10 @@ var defaultGetOptions = (results) => results.map((result) => {
     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(Type.Obj) ? 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
@@ -1660,40 +1582,40 @@ 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(descriptionText, "mbe-2")
+  }, t("empty readonly ref field label")) : /* @__PURE__ */ React11.createElement(DxAnchor, {
     key: item.id,
-    refid: item.id,
+    dxn: item.id,
     rootclassname: "mie-1"
-  }, item.label) : /* @__PURE__ */ React12.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React12.createElement(ObjectPicker.Trigger, {
+  }, item.label) : /* @__PURE__ */ React11.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Trigger, {
     asChild: true,
     classNames: "p-0"
-  }, item ? /* @__PURE__ */ React12.createElement("div", {
+  }, item ? /* @__PURE__ */ React11.createElement("div", {
     className: "flex gap-2 is-full"
-  }, /* @__PURE__ */ React12.createElement(Input7.Root, {
+  }, /* @__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, {
+  }))) : /* @__PURE__ */ React11.createElement(Button, {
     classNames: "is-full text-start gap-2"
-  }, /* @__PURE__ */ React12.createElement("div", {
+  }, /* @__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, {
+  }))), /* @__PURE__ */ React11.createElement(ObjectPicker.Portal, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Content, {
     classNames: "popover-card-width",
     options,
     selectedIds,
@@ -1703,12 +1625,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();
@@ -1719,37 +1641,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, {
+  }, /* @__PURE__ */ React12.createElement(Select.TriggerButton, {
     classNames: "is-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);
@@ -1855,25 +1777,25 @@ 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", {
+  }, items?.map((item) => /* @__PURE__ */ React13.createElement("div", {
     key: item.id
-  }, /* @__PURE__ */ React14.createElement(List.Item, {
+  }, /* @__PURE__ */ React13.createElement(List.Item, {
     role: "button",
     item,
     classNames: [
@@ -1881,16 +1803,16 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
       "flex flex-col cursor-pointer rounded-sm"
     ],
     "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", {
@@ -1898,13 +1820,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", {
+  })), selected === item.id && /* @__PURE__ */ React13.createElement("div", {
     className: "pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine"
-  }, /* @__PURE__ */ React14.createElement(Input9.Label, {
+  }, /* @__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,
@@ -1912,17 +1834,17 @@ 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"),
@@ -1933,17 +1855,17 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
 };
 
 // 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,
@@ -1954,17 +1876,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,
@@ -1975,9 +1897,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",
@@ -1988,15 +1910,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,
@@ -2014,7 +1936,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,
@@ -2045,26 +1967,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,
@@ -2123,7 +2045,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   ]);
   const handleSave = useCallback14((props2) => {
     if (view) {
-      Obj.change(view, () => {
+      Obj3.change(view, () => {
         projection.setFieldProjection({
           field,
           props: props2
@@ -2159,7 +2081,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
     });
     return null;
   }
-  return /* @__PURE__ */ React18.createElement(Form.Root, {
+  return /* @__PURE__ */ React17.createElement(Form.Root, {
     key: field.id,
     fieldMap,
     autoFocus: true,
@@ -2175,7 +2097,137 @@ 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: "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)));
+};
+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 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);
+};
+SettingsFrameItem.displayName = SETTINGS_FRAME_ITEM_NAME;
+var SettingsContainer = ({ classNames, children }) => {
+  return /* @__PURE__ */ React18.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
+    ])
+  }, 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: "text-end plb-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 plb-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
@@ -2185,14 +2237,15 @@ 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 Obj2, Query, QueryAST } from "@dxos/echo";
+import { Filter as Filter2, Format as Format5, Obj as Obj4, Query, QueryAST } 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 { QueryForm } from "@dxos/react-ui-components";
 import { List as List2 } from "@dxos/react-ui-list";
-import { FieldSchema, ProjectionModel, VIEW_FIELD_LIMIT, createDirectChangeCallback, createEchoChangeCallback, getTypenameFromQuery } from "@dxos/schema";
-import { mx as mx7, osTranslations as osTranslations2, subtleHover as subtleHover2 } from "@dxos/ui-theme";
+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";
@@ -2202,7 +2255,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
   const { t } = useTranslation10(translationKey);
   const projectionModel = useMemo8(() => {
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-    const change = schema instanceof EchoSchema ? createEchoChangeCallback(view, schema) : createDirectChangeCallback(view.projection, jsonSchema);
+    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
     const model = new ProjectionModel({
       registry: atomRegistry,
       view,
@@ -2218,7 +2271,6 @@ 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 }) => {
@@ -2260,22 +2312,6 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     types,
     tags
   ]);
-  const handleAdd = useCallback15(() => {
-    invariant(!readonly, void 0, {
-      F: __dxlog_file3,
-      L: 148,
-      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;
@@ -2290,25 +2326,21 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
   const handleDelete = useCallback15((fieldId) => {
     invariant(!readonly, void 0, {
       F: __dxlog_file3,
-      L: 165,
+      L: 155,
       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)
+    className: mx6(classNames)
   }, schemaReadonly && !readonly && /* @__PURE__ */ React19.createElement(Callout.Root, {
     valence: "info",
     classNames: "mlb-cardSpacingBlock"
@@ -2328,25 +2360,16 @@ 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 }) => {
   const atomRegistry = useContext(RegistryContext);
   const schemaReadonly = !isMutable(schema);
   const { t } = useTranslation10(translationKey);
+  const [viewSnapshot] = useObject(view);
   const projectionModel = useMemo8(() => {
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-    const change = schema instanceof EchoSchema ? createEchoChangeCallback(view, schema) : createDirectChangeCallback(view.projection, jsonSchema);
+    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
     const model = new ProjectionModel({
       registry: atomRegistry,
       view,
@@ -2360,6 +2383,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: 220,
+      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);
   }, [
@@ -2368,7 +2407,7 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   const handleDelete = useCallback15((fieldId) => {
     invariant(!readonly, void 0, {
       F: __dxlog_file3,
-      L: 254,
+      L: 234,
       S: void 0,
       A: [
         "!readonly",
@@ -2387,23 +2426,23 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   const handleMove = useCallback15((fromIndex, toIndex) => {
     invariant(!readonly, void 0, {
       F: __dxlog_file3,
-      L: 266,
+      L: 246,
       S: void 0,
       A: [
         "!readonly",
         ""
       ]
     });
-    const fields = [
-      ...view.projection.fields
-    ];
-    const [moved] = fields.splice(fromIndex, 1);
-    fields.splice(toIndex, 0, moved);
-    Obj2.change(view, (v) => {
+    Obj4.change(view, (v) => {
+      const fields = [
+        ...v.projection.fields
+      ];
+      const [moved] = fields.splice(fromIndex, 1);
+      fields.splice(toIndex, 0, moved);
       v.projection.fields = fields;
     });
   }, [
-    view.projection.fields,
+    view,
     readonly
   ]);
   const handleClose = useCallback15(() => setExpandedField(void 0), []);
@@ -2419,8 +2458,11 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   }, [
     projectionModel
   ]);
+  if (!viewSnapshot) {
+    return null;
+  }
   return /* @__PURE__ */ React19.createElement(List2.Root, {
-    items: view.projection.fields,
+    items: viewSnapshot.projection.fields,
     isItem: Schema3.is(FieldSchema),
     getId: (field) => field.id,
     onMove: readonly ? void 0 : handleMove,
@@ -2439,7 +2481,7 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
       "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, listItemGrid, "rounded-sm cursor-pointer min-bs-10")
     }, /* @__PURE__ */ React19.createElement(List2.ItemDragHandle, {
       disabled: readonly || schemaReadonly
     }), /* @__PURE__ */ React19.createElement(List2.ItemTitle, {
@@ -2455,7 +2497,7 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     }), !readonly && /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(List2.ItemDeleteButton, {
       label: t("delete field label"),
       autoHide: false,
-      disabled: readonly || schemaReadonly || view.projection.fields.length <= 1,
+      disabled: readonly || schemaReadonly || viewSnapshot.projection.fields.length <= 1,
       onClick: () => handleDelete(field.id),
       "data-testid": "field.delete"
     }), /* @__PURE__ */ React19.createElement(IconButton4, {
@@ -2477,6 +2519,15 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
       field,
       onSave: handleClose
     })));
+  })), !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: handleAdd,
+    disabled: viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT,
+    classNames: "is-full"
   }))));
 };
 var customFields = ({ types, tags }) => ({
@@ -2498,15 +2549,6 @@ var customFields = ({ types, tags }) => ({
 export {
   ArrayField,
   BooleanField,
-  ControlFrame,
-  ControlFrameItem,
-  ControlGroup,
-  ControlGroupButton,
-  ControlItem,
-  ControlItemInput,
-  ControlPage,
-  ControlSection,
-  ControlSectionHeading,
   FieldEditor,
   Form,
   FormFieldErrorBoundary,
@@ -2519,12 +2561,12 @@ export {
   RefField,
   SelectField,
   SelectOptionField,
+  Settings,
   TextAreaField,
   TextField,
   TupleField,
   ViewEditor,
   cellClassesForFieldType,
-  controlItemClasses,
   formatForDisplay,
   formatForEditing,
   getDefaultValue,
@@ -2533,6 +2575,7 @@ export {
   omitId,
   parseValue,
   pathNotUniqueError,
+  setValueEchoAware,
   translations,
   useFormContext,
   useFormFieldState,