@dxos/react-ui-form 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

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

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
 // src/translations.ts
-var translationKey = "react-ui-form";
+var translationKey = "@dxos/react-ui-form";
 var translations = [
   {
     "en-US": {
@@ -77,154 +77,27 @@ var translations = [
   }
 ];
 
-// src/components/ControlSection/ControlSection.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React from "react";
-import { Button, Input, toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { StackItem } from "@dxos/react-ui-stack";
-import { mx } from "@dxos/react-ui-theme";
-var ControlPage = ({ children, classNames, ...props }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(StackItem.Content, {
-      scrollable: true,
-      classNames: "[--control-spacing:var(--dx-trimMd)]"
-    }, /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: mx("pli-cardSpacingInline pbe-trimLg", classNames),
-      ...props
-    }, children));
-  } finally {
-    _effect.f();
-  }
-};
-var ControlSection = ({ title, description, children }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ControlSectionHeading, {
-      title,
-      description
-    }), children);
-  } finally {
-    _effect.f();
-  }
-};
-var ControlSectionHeading = ({ title, description }) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h2", {
-      className: "pli-trimMd container-max-width text-xl mbs-trimLg mbe-trimMd"
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
-      className: "pli-trimMd mlb-trimMd container-max-width text-description"
-    }, toLocalizedString(description, t)));
-  } finally {
-    _effect.f();
-  }
-};
-var ControlGroupButton = ({ classNames, ...props }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(Button, {
-      ...props,
-      classNames: [
-        "md:col-span-2",
-        classNames
-      ]
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var ControlGroup = ({ children, classNames }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__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);
-  } finally {
-    _effect.f();
-  }
-};
-var ControlFrame = ({ children }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__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);
-  } finally {
-    _effect.f();
-  }
-};
-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 }) => {
-  var _effect = _useSignals();
-  try {
-    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);
-  } finally {
-    _effect.f();
-  }
-};
-var ControlItemInput = ({ title, description, children }) => {
-  var _effect = _useSignals();
-  try {
-    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));
-  } finally {
-    _effect.f();
-  }
-};
-var ControlFrameItem = ({ title, description, children }) => {
-  var _effect = _useSignals();
-  try {
-    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);
-  } finally {
-    _effect.f();
-  }
-};
-
 // src/components/FieldEditor/FieldEditor.tsx
-import { useSignals as _useSignals18 } from "@preact-signals/safe-react/tracking";
-import React18, { useCallback as useCallback16, useEffect as useEffect6, useMemo as useMemo8, useState as useState6 } from "react";
+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 log3 } from "@dxos/log";
-import { useAsyncEffect as useAsyncEffect2, useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { log as log2 } from "@dxos/log";
+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 }) => {
@@ -517,28 +390,25 @@ var getRefProps = (ast) => {
 };
 
 // src/components/Form/fields/ArrayField.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
 import * as Option3 from "effect/Option";
 import * as SchemaAST2 from "effect/SchemaAST";
-import React6, { useCallback as useCallback5 } 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 { invariant } from "@dxos/invariant";
-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 { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import { createContext } from "@radix-ui/react-context";
 import * as Schema2 from "effect/Schema";
-import React5, { useMemo as useMemo4, useRef } from "react";
+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/react-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 { getValue as getValue$, setValue as setValue$ } from "@dxos/echo/internal";
-import { createJsonPath, fromEffectValidationPath } from "@dxos/effect";
+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";
 import { validateSchema } from "@dxos/schema";
@@ -549,7 +419,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
   const [errors, setErrors] = useState({});
   const [saving, setSaving] = useState(false);
   const defaultValues = useDefaultValue(defaultValuesProp, () => ({}));
-  const [values, setValues] = useControllableState({
+  const [values$, setValues] = useControllableState({
     prop: valuesProp,
     defaultProp: defaultValues,
     onChange: () => {
@@ -560,6 +430,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
       setSaving(false);
     }
   });
+  const values = values$;
   const validate = useCallback((values2) => {
     if (!schema) {
       return false;
@@ -570,7 +441,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
       errors: errors2
     }, {
       F: __dxlog_file,
-      L: 149,
+      L: 160,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -663,7 +534,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
       value: value3
     }, {
       F: __dxlog_file,
-      L: 248,
+      L: 259,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -676,23 +547,22 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 257,
+        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);
     const newChanged = {
-      ...changed,
       [jsonPath]: true
     };
     setChanged({
       ...changed,
-      [jsonPath]: true
+      ...newChanged
     });
     const isValid2 = validate(newValues);
     onValuesChanged?.(newValues, {
@@ -800,145 +670,43 @@ var useKeyHandler = (formElement, form) => {
   ]);
 };
 
-// src/hooks/useQueryRefOptions.ts
-import { useCallback as useCallback3, useState as useState2 } from "react";
-import { log as log2 } from "@dxos/log";
-import { useAsyncEffect } from "@dxos/react-ui";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/hooks/useQueryRefOptions.ts";
-var useQueryRefOptions = ({ typename, onQueryRefOptions }) => {
-  const [options, setOptions] = useState2([]);
-  const [loading, setLoading] = useState2(false);
-  const [state, setState] = useState2({});
-  const update = useCallback3(() => setState({}), []);
-  useAsyncEffect(async () => {
-    if (!typename || !onQueryRefOptions) {
-      return;
-    }
-    setLoading(true);
-    try {
-      const options2 = await onQueryRefOptions({
-        typename
-      });
-      log2("options", {
-        options: options2.length
-      }, {
-        F: __dxlog_file2,
-        L: 50,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      setOptions(options2.map((option) => {
-        const dxn = option.dxn.toString();
-        return {
-          id: dxn,
-          label: option.label ?? dxn,
-          hue: "neutral"
-        };
-      }));
-    } catch (error) {
-      log2.error("Failed to fetch ref options:", error, {
-        F: __dxlog_file2,
-        L: 62,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      setOptions([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [
-    typename,
-    onQueryRefOptions,
-    state
-  ]);
-  return {
-    options,
-    update,
-    loading
-  };
-};
-
-// src/hooks/useRefQueryOptions.ts
-import { useCallback as useCallback4 } from "react";
-import { Obj } from "@dxos/echo";
-import { Filter } from "@dxos/react-client/echo";
-import { isNonNullable } from "@dxos/util";
-var useRefQueryOptions = ({ space }) => {
-  return useCallback4(async ({ typename }) => {
-    if (!space) {
-      return [];
-    }
-    const query = space.db.query(Filter.typename(typename));
-    const objects = await query.run();
-    return objects.map((object) => {
-      const dxn = Obj.getDXN(object);
-      if (!dxn) {
-        return void 0;
-      }
-      return {
-        dxn,
-        label: Obj.getLabel(object) ?? object?.id ?? ""
-      };
-    }).filter(isNonNullable);
-  }, [
-    space
-  ]);
-};
-
 // src/components/Form/FormFieldComponent.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2, { Component } from "react";
-import { Icon, Input as Input2, Tooltip } from "@dxos/react-ui";
-import { labelSpacing } from "@dxos/react-ui-stack";
-import { errorText, mx as mx2 } from "@dxos/react-ui-theme";
+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 }) => {
-  var _effect = _useSignals2();
-  try {
-    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, {
-      asChild: true,
-      content: error,
-      side: "bottom"
-    }, /* @__PURE__ */ React2.createElement(Icon, {
-      icon: "ph--warning--regular",
-      size: 4,
-      classNames: errorText
-    })));
-  } finally {
-    _effect.f();
-  }
+  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__ */ React.createElement(Icon, {
+    icon: "ph--warning--regular",
+    size: 4,
+    classNames: errorText
+  })));
 };
 FormFieldLabel.displayName = "Form.FieldLabel";
 var FormFieldWrapper = (props) => {
-  var _effect = _useSignals2();
-  try {
-    const { children, readonly, layout, label, getStatus, getValue } = props;
-    const { status, error } = getStatus();
-    const value3 = getValue();
-    if (layout === "static" && value3 == null) {
-      return null;
-    }
-    const str = String(value3 ?? "");
-    return /* @__PURE__ */ React2.createElement(Input2.Root, {
-      validationValence: status
-    }, layout !== "inline" && /* @__PURE__ */ React2.createElement(FormFieldLabel, {
-      error,
-      readonly,
-      label
-    }), layout === "static" ? /* @__PURE__ */ React2.createElement("p", null, str) : children ? children({
-      value: value3
-    }) : null, layout === "full" && /* @__PURE__ */ React2.createElement(Input2.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input2.Validation, null, error)));
-  } finally {
-    _effect.f();
+  const { children, readonly, layout, label, getStatus, getValue } = props;
+  const { status, error } = getStatus();
+  const value3 = getValue();
+  if (layout === "static" && value3 == null) {
+    return null;
   }
+  const str = String(value3 ?? "");
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "contents"
+  }, /* @__PURE__ */ React.createElement(Input.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), layout === "static" ? /* @__PURE__ */ React.createElement("p", null, str) : children ? children({
+    value: value3
+  }) : null, layout === "full" && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React.createElement(Input.Validation, null, error))));
 };
 var FormFieldErrorBoundary = class extends Component {
   static getDerivedStateFromError(error) {
@@ -956,9 +724,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(".")));
     }
@@ -972,121 +740,135 @@ var FormFieldErrorBoundary = class extends Component {
 };
 
 // src/components/Form/FormFieldSet.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4, { forwardRef, useMemo as useMemo3 } from "react";
-import { mx as mx3 } from "@dxos/react-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
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import * as Match from "effect/Match";
 import * as Option2 from "effect/Option";
 import * as Schema from "effect/Schema";
 import * as SchemaAST from "effect/SchemaAST";
 import * as 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) => {
-  var _effect = _useSignals3();
-  try {
-    const { type, name, path, projection, fieldMap, fieldProvider, readonly, layout, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, onCreate, onQueryRefOptions } = props;
-    const { t } = useTranslation2(translationKey);
-    const title = getAnnotation(SchemaAST.TitleAnnotationId)(type);
-    const description = getAnnotation(SchemaAST.DescriptionAnnotationId)(type);
-    const examples = getAnnotation(SchemaAST.ExamplesAnnotationId)(type);
-    const label = useMemo2(() => title ?? String2.capitalize(name), [
-      title,
-      name
-    ]);
-    const placeholder = useMemo2(() => examples?.length ? `${t("example placeholder")}: ${examples[0]}` : description ?? label, [
-      examples,
-      description,
-      label
-    ]);
-    const fieldState = useFormFieldState(FormField.displayName, path);
-    const fieldProps = {
-      type,
-      format: Format3.FormatAnnotation.getFromAst(type).pipe((annotation) => Option2.getOrUndefined(annotation)),
-      readonly,
+  const {
+    type,
+    name,
+    path,
+    projection,
+    fieldMap,
+    fieldProvider,
+    readonly,
+    layout,
+    // RefFieldProps
+    createOptionLabel,
+    createOptionIcon,
+    createInitialValuePath,
+    db,
+    schemaHook,
+    getOptions: getRefOptions,
+    onCreate
+  } = props;
+  const { t } = useTranslation(translationKey);
+  const title = getAnnotation(SchemaAST.TitleAnnotationId)(type);
+  const description = getAnnotation(SchemaAST.DescriptionAnnotationId)(type);
+  const examples = getAnnotation(SchemaAST.ExamplesAnnotationId)(type);
+  const label = useMemo2(() => title ?? String2.capitalize(name), [
+    title,
+    name
+  ]);
+  const placeholder = useMemo2(() => examples?.length ? `${t("example placeholder")}: ${examples[0]}` : description ?? label, [
+    examples,
+    description,
+    label
+  ]);
+  const fieldState = useFormFieldState(FormField.displayName, path);
+  const fieldProps = {
+    type,
+    format: Format3.FormatAnnotation.getFromAst(type).pipe((annotation) => Option2.getOrUndefined(annotation)),
+    readonly,
+    label,
+    placeholder,
+    layout,
+    ...fieldState
+  };
+  const jsonPath = createJsonPath2(path ?? []);
+  const CustomField = fieldMap?.[jsonPath];
+  if (CustomField) {
+    return /* @__PURE__ */ React2.createElement(CustomField, fieldProps);
+  }
+  const component = fieldProvider?.({
+    schema: Schema.make(type),
+    prop: name,
+    fieldProps
+  });
+  if (component) {
+    return component;
+  }
+  if (isArrayType2(type)) {
+    return /* @__PURE__ */ React2.createElement(ArrayField, {
+      fieldProps: fieldState,
       label,
-      placeholder,
-      layout,
-      ...fieldState
-    };
-    const jsonPath = createJsonPath2(path ?? []);
-    const CustomField = fieldMap?.[jsonPath];
-    if (CustomField) {
-      return /* @__PURE__ */ React3.createElement(CustomField, fieldProps);
-    }
-    const component = fieldProvider?.({
-      schema: Schema.make(type),
-      prop: name,
-      fieldProps
+      ...props
     });
-    if (component) {
-      return component;
-    }
-    if (isArrayType2(type)) {
-      return /* @__PURE__ */ React3.createElement(ArrayField, {
-        fieldProps: fieldState,
+  }
+  const Field = getFormField(fieldProps);
+  if (Field) {
+    return /* @__PURE__ */ React2.createElement(Field, fieldProps);
+  }
+  const options = getOptions(type);
+  if (options) {
+    return /* @__PURE__ */ React2.createElement(SelectField, {
+      ...fieldProps,
+      options: options.map((option) => ({
+        value: option,
+        label: option.toString()
+      }))
+    });
+  }
+  const refProps = getRefProps(type);
+  if (refProps) {
+    return /* @__PURE__ */ React2.createElement(RefField, {
+      ...fieldProps,
+      ...refProps,
+      createOptionLabel,
+      createOptionIcon,
+      createInitialValuePath,
+      db,
+      schemaHook,
+      getOptions: getRefOptions,
+      onCreate
+    });
+  }
+  if (isNestedType(type)) {
+    const baseNode = findNode(type, isDiscriminatedUnion);
+    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, fieldState.getValue()) : findNode(type, SchemaAST.isTypeLiteral);
+    if (typeLiteral) {
+      const schema = Schema.make(typeLiteral);
+      return /* @__PURE__ */ React2.createElement(FormFieldSet, {
+        schema,
+        path,
+        readonly,
+        layout,
         label,
-        ...props
-      });
-    }
-    const Field = getFormField(fieldProps);
-    if (Field) {
-      return /* @__PURE__ */ React3.createElement(Field, fieldProps);
-    }
-    const options = getOptions(type);
-    if (options) {
-      return /* @__PURE__ */ React3.createElement(SelectField, {
-        ...fieldProps,
-        options: options.map((option) => ({
-          value: option,
-          label: option.toString()
-        }))
-      });
-    }
-    const refProps = getRefProps(type);
-    if (refProps) {
-      return /* @__PURE__ */ React3.createElement(RefField, {
-        ...fieldProps,
-        ...refProps,
-        createSchema,
+        projection,
+        fieldMap,
+        fieldProvider,
         createOptionLabel,
         createOptionIcon,
         createInitialValuePath,
-        onCreate,
-        onQueryRefOptions
+        db,
+        schemaHook,
+        getOptions: getRefOptions,
+        onCreate
       });
     }
-    if (isNestedType(type)) {
-      const baseNode = findNode(type, isDiscriminatedUnion);
-      const typeLiteral = baseNode ? getDiscriminatedType(baseNode, fieldState.getValue()) : findNode(type, SchemaAST.isTypeLiteral);
-      if (typeLiteral) {
-        const schema = Schema.make(typeLiteral);
-        return /* @__PURE__ */ React3.createElement(FormFieldSet, {
-          schema,
-          path,
-          readonly,
-          layout,
-          label,
-          projection,
-          fieldMap,
-          fieldProvider,
-          createOptionLabel,
-          createOptionIcon,
-          onCreate,
-          onQueryRefOptions
-        });
-      }
-    }
-    return null;
-  } finally {
-    _effect.f();
   }
+  return null;
 };
 FormField.displayName = "Form.FormField";
 var getFormField = ({ type, format }) => {
@@ -1113,85 +895,90 @@ var getOptions = (ast) => {
 };
 
 // src/components/Form/FormFieldSet.tsx
+var FORM_FIELDSET_NAME = "Form.FieldSet";
 var FormFieldSet = /* @__PURE__ */ forwardRef(({ classNames, label, schema, readonly, path, exclude, sort, projection, layout, ...props }, forwardRef4) => {
-  var _effect = _useSignals4();
-  try {
-    const values = useFormValues(FormFieldSet.displayName, path);
-    const properties = useMemo3(() => {
-      if (!schema) {
-        return [];
-      }
-      const props2 = getFormProperties(schema.ast);
-      if (projection) {
-        const fieldProjections = projection.getFieldProjections();
-        const hiddenProperties = new Set(projection.getHiddenProperties());
-        const visibleProps = props2.filter((prop) => !hiddenProperties.has(prop.name.toString()));
-        const orderedProps = [];
-        for (const fieldProjection of fieldProjections) {
-          const fieldPath = String(fieldProjection.field.path);
-          const prop = visibleProps.find((p) => p.name === fieldPath);
-          if (prop) {
-            orderedProps.push(prop);
-          }
+  const values = useFormValues(FORM_FIELDSET_NAME, path);
+  const properties = useMemo3(() => {
+    if (!schema) {
+      return [];
+    }
+    const props2 = getFormProperties(schema.ast);
+    if (projection) {
+      const fieldProjections = projection.getFieldProjections();
+      const hiddenProperties = new Set(projection.getHiddenProperties());
+      const visibleProps = props2.filter((prop) => !hiddenProperties.has(prop.name.toString()));
+      const orderedProps = [];
+      for (const fieldProjection of fieldProjections) {
+        const fieldPath = String(fieldProjection.field.path);
+        const prop = visibleProps.find((p) => p.name === fieldPath);
+        if (prop) {
+          orderedProps.push(prop);
         }
-        const projectionPaths = new Set(fieldProjections.map((projection2) => String(projection2.field.path)));
-        const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name.toString()));
-        orderedProps.push(...remainingProps);
-        return orderedProps;
       }
-      const filtered = exclude ? exclude(props2) : props2;
-      return sort ? filtered.sort(({ name: a }, { name: b }) => sort.indexOf(a.toString()) - sort.indexOf(b.toString())) : filtered;
-    }, [
-      schema,
-      values,
-      exclude,
-      sort,
-      projection?.fields
-    ]);
-    if ((readonly || layout === "static") && values == null) {
-      return null;
-    }
-    return /* @__PURE__ */ React4.createElement("div", {
-      role: "form",
-      className: mx3("is-full", layout === "inline" && "flex flex-col gap-2", classNames),
-      ref: forwardRef4
-    }, layout !== "inline" && label && /* @__PURE__ */ React4.createElement(FormFieldLabel, {
-      label,
-      asChild: true
-    }), properties.map((property) => {
-      const name = property.name.toString();
-      return /* @__PURE__ */ React4.createElement(FormFieldErrorBoundary, {
-        key: name,
-        path: [
-          ...path ?? [],
-          name
-        ]
-      }, /* @__PURE__ */ React4.createElement(FormField, {
-        type: property.type,
-        name,
-        path: [
-          ...path ?? [],
-          name
-        ],
-        readonly,
-        layout,
-        projection,
-        ...props
-      }));
-    }).filter(isTruthy));
-  } finally {
-    _effect.f();
+      const projectionPaths = new Set(fieldProjections.map((projection2) => String(projection2.field.path)));
+      const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name.toString()));
+      orderedProps.push(...remainingProps);
+      return orderedProps;
+    }
+    const filtered = exclude ? exclude(props2) : props2;
+    return sort ? filtered.sort(({ name: a }, { name: b }) => sort.indexOf(a.toString()) - sort.indexOf(b.toString())) : filtered;
+  }, [
+    schema,
+    values,
+    exclude,
+    sort,
+    projection?.fields
+  ]);
+  if ((readonly || layout === "static") && values == null) {
+    return null;
   }
+  return /* @__PURE__ */ React3.createElement("div", {
+    role: "form",
+    className: mx("is-full", layout === "inline" && "flex flex-col gap-2", classNames),
+    ref: forwardRef4
+  }, layout !== "inline" && label && /* @__PURE__ */ React3.createElement(FormFieldLabel, {
+    label,
+    asChild: true
+  }), properties.map((property) => {
+    const name = property.name.toString();
+    return /* @__PURE__ */ React3.createElement(FormFieldErrorBoundary, {
+      key: name,
+      path: [
+        ...path ?? [],
+        name
+      ]
+    }, /* @__PURE__ */ React3.createElement(FormField, {
+      type: property.type,
+      name,
+      path: [
+        ...path ?? [],
+        name
+      ],
+      readonly,
+      layout,
+      projection,
+      ...props
+    }));
+  }).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 = []) => {
+var useFormValues = (componentName, path = [], defaultValue) => {
   const jsonPath = createJsonPath3(path);
   const { form: { values } } = useFormContext(componentName);
-  return getValue$2(values, jsonPath);
+  const value3 = getValue$2(values, jsonPath);
+  useEffect3(() => {
+    if (!value3 && defaultValue) {
+      setValueEchoAware(values, jsonPath, defaultValue());
+    }
+  }, [
+    value3,
+    defaultValue
+  ]);
+  return value3;
 };
 var useFormFieldState = (componentName, path = []) => {
   const stablePath = useMemo4(() => path, [
@@ -1212,129 +999,99 @@ var useFormFieldState = (componentName, path = []) => {
   ]);
 };
 var FormRoot = ({ children, schema, values, onSave, onCancel, ...props }) => {
-  var _effect = _useSignals5();
-  try {
-    const form = useFormHandler({
-      schema,
-      values,
-      onSave,
-      onCancel,
-      ...props
-    });
-    return /* @__PURE__ */ React5.createElement(FormContextProvider, {
-      form,
-      ...props
-    }, children);
-  } finally {
-    _effect.f();
-  }
+  const form = useFormHandler({
+    schema,
+    values,
+    onSave,
+    onCancel,
+    ...props
+  });
+  return /* @__PURE__ */ React4.createElement(FormContextProvider, {
+    form,
+    ...props
+  }, children);
 };
 FormRoot.displayName = "Form.Root";
-var FormViewport = ({ classNames, children }) => {
-  var _effect = _useSignals5();
-  try {
-    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)));
-  } finally {
-    _effect.f();
-  }
+var FORM_VIEWPORT_NAME = "Form.Viewport";
+var FormViewport = ({ children }) => {
+  return /* @__PURE__ */ React4.createElement(ScrollArea.Root, {
+    orientation: "vertical"
+  }, /* @__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 }) => {
-  var _effect = _useSignals5();
-  try {
-    const { form, testId } = useFormContext(FormContent.displayName);
-    const ref = useRef(null);
-    useKeyHandler(ref.current, form);
-    return /* @__PURE__ */ React5.createElement("div", {
-      ref,
-      role: "form",
-      className: mx4("flex flex-col is-full pli-cardSpacingInline", classNames),
-      "data-testid": testId
-    }, children);
-  } finally {
-    _effect.f();
-  }
+  const { form, testId } = useFormContext(FORM_CONTENT_NAME);
+  const ref = useRef(null);
+  useKeyHandler(ref.current, form);
+  return /* @__PURE__ */ React4.createElement("div", {
+    ref,
+    role: "form",
+    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 }) => {
-  var _effect = _useSignals5();
-  try {
-    const { form, ...props } = useFormContext(FormFieldSet2.displayName);
-    return /* @__PURE__ */ React5.createElement(FormFieldSet, {
-      classNames,
-      schema: form.schema,
-      ...props
-    });
-  } finally {
-    _effect.f();
-  }
+  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 }) => {
-  var _effect = _useSignals5();
-  try {
-    const { t } = useTranslation3(translationKey);
-    const { form: { isValid, onSave, onCancel }, readonly, layout } = useFormContext(FormActions.displayName);
-    if (readonly || layout === "static") {
-      return null;
-    }
-    return /* @__PURE__ */ React5.createElement("div", {
-      role: "none",
-      className: mx4("grid grid-flow-col auto-cols-fr gap-2 pbs-cardSpacingBlock", classNames)
-    }, onCancel && /* @__PURE__ */ React5.createElement(IconButton, {
-      icon: "ph--x--regular",
-      iconEnd: true,
-      label: t("cancel button label"),
-      onClick: onCancel,
-      "data-testid": "cancel-button"
-    }), onSave && /* @__PURE__ */ React5.createElement(IconButton, {
-      type: "submit",
-      variant: "primary",
-      disabled: !isValid,
-      icon: "ph--check--regular",
-      iconEnd: true,
-      label: t("save button label"),
-      onClick: onSave,
-      "data-testid": "save-button"
-    }));
-  } finally {
-    _effect.f();
+  const { t } = useTranslation2(translationKey);
+  const { form: { canSave, onSave, onCancel }, readonly, layout } = useFormContext(FORM_ACTIONS_NAME);
+  if (readonly || layout === "static") {
+    return null;
   }
+  return /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
+    className: mx2("grid grid-flow-col auto-cols-fr gap-2 pbs-cardSpacingBlock", classNames)
+  }, onCancel && /* @__PURE__ */ React4.createElement(IconButton, {
+    icon: "ph--x--regular",
+    iconEnd: true,
+    label: t("cancel button label"),
+    onClick: onCancel,
+    "data-testid": "cancel-button"
+  }), onSave && /* @__PURE__ */ React4.createElement(IconButton, {
+    type: "submit",
+    variant: "primary",
+    disabled: !canSave,
+    icon: "ph--check--regular",
+    iconEnd: true,
+    label: t("save button label"),
+    onClick: onSave,
+    "data-testid": "save-button"
+  }));
 };
-FormActions.displayName = "Form.Actions";
-var FormSubmit = ({ classNames, label, icon }) => {
-  var _effect = _useSignals5();
-  try {
-    const { t } = useTranslation3(translationKey);
-    const { form: { isValid, onSave }, readonly, layout } = useFormContext(FormSubmit.displayName);
-    if (readonly || layout === "static") {
-      return null;
-    }
-    return /* @__PURE__ */ React5.createElement("div", {
-      role: "none",
-      className: mx4("flex is-full pbs-cardSpacingBlock", classNames)
-    }, /* @__PURE__ */ React5.createElement(IconButton, {
-      classNames: "is-full",
-      type: "submit",
-      variant: "primary",
-      disabled: !isValid,
-      icon: icon ?? "ph--check--regular",
-      label: label ?? t("save button label"),
-      onClick: onSave,
-      "data-testid": "save-button"
-    }));
-  } finally {
-    _effect.f();
+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__ */ React4.createElement("div", {
+    role: "none",
+    className: mx2("flex is-full pbs-cardSpacingBlock", classNames)
+  }, /* @__PURE__ */ React4.createElement(IconButton, {
+    classNames: "is-full",
+    type: "submit",
+    variant: "primary",
+    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,
@@ -1346,103 +1103,88 @@ var Form = {
 };
 
 // src/components/Form/fields/ArrayField.tsx
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/Form/fields/ArrayField.tsx";
 var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps, ...props }) => {
-  var _effect = _useSignals6();
-  try {
-    const { t } = useTranslation4(translationKey);
-    const elementType = getArrayElementType2(type);
-    const { onValueChange } = inputProps;
-    const values = useFormValues(ArrayField.displayName, path) ?? [];
-    invariant(Array.isArray(values), `Expected array at: ${path?.join(".")}`, {
-      F: __dxlog_file3,
-      L: 40,
-      S: void 0,
-      A: [
-        "Array.isArray(values)",
-        "`Expected array at: ${path?.join('.')}`"
-      ]
-    });
-    const getDefaultObjectValue = (typeNode) => {
-      const baseNode = findNode2(typeNode, isDiscriminatedUnion2);
-      const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, {}) : findNode2(typeNode, SchemaAST2.isTypeLiteral);
-      if (!typeLiteral) {
-        return {};
-      }
-      return Object.fromEntries(getFormProperties(typeLiteral).map((prop) => {
-        const defaultValue = SchemaAST2.getDefaultAnnotation(prop.type).pipe((annotation) => Option3.getOrUndefined(annotation));
-        return [
-          prop.name,
-          defaultValue
-        ];
-      }));
-    };
-    const handleAdd = useCallback5(() => {
-      const defaultValue = isNestedType2(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
-      onValueChange(type, [
-        ...values,
+  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);
+    if (!typeLiteral) {
+      return {};
+    }
+    return Object.fromEntries(getFormProperties(typeLiteral).map((prop) => {
+      const defaultValue = SchemaAST2.getDefaultAnnotation(prop.type).pipe((annotation) => Option3.getOrUndefined(annotation));
+      return [
+        prop.name,
         defaultValue
-      ]);
-    }, [
-      onValueChange,
-      type,
-      elementType,
-      values
-    ]);
-    const handleDelete = useCallback5((idx) => {
-      onValueChange(type, values.filter((_, i) => i !== idx));
-    }, [
-      onValueChange,
-      type,
-      values
-    ]);
-    if (!elementType || (readonly || layout === "static") && values.length < 1) {
-      return null;
-    }
-    return /* @__PURE__ */ React6.createElement(React6.Fragment, null, (layout !== "static" || values.length > 0) && /* @__PURE__ */ React6.createElement(FormFieldLabel, {
-      readonly,
-      label,
-      asChild: true
-    }), /* @__PURE__ */ React6.createElement("div", {
-      role: "none",
-      className: "flex flex-col gap-2"
-    }, values.map((_, index) => {
-      return /* @__PURE__ */ React6.createElement("div", {
-        role: "none",
-        key: index,
-        className: "grid grid-cols-[1fr_min-content] gap-2 last:mb-3"
-      }, /* @__PURE__ */ React6.createElement(FormField, {
-        autoFocus: index === values.length - 1,
-        type: elementType,
-        path: [
-          ...path ?? [],
-          index
-        ],
-        readonly: readonly || layout === "static",
-        layout: "inline",
-        ...props
-      }), !readonly && layout !== "static" && /* @__PURE__ */ React6.createElement("div", {
-        role: "none",
-        className: "flex flex-col bs-full justify-end"
-      }, /* @__PURE__ */ React6.createElement("div", {
-        role: "none",
-        className: "flex items-center bs-[var(--line-height)]"
-      }, /* @__PURE__ */ React6.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",
-      icon: "ph--plus--regular",
-      label: t("add field"),
-      onClick: handleAdd
+      ];
     }));
-  } finally {
-    _effect.f();
+  };
+  const handleAdd = useCallback3(() => {
+    const defaultValue = isNestedType2(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
+    values && onValueChange(type, [
+      ...values,
+      defaultValue
+    ]);
+  }, [
+    onValueChange,
+    type,
+    elementType,
+    values
+  ]);
+  const handleDelete = useCallback3((idx) => {
+    onValueChange(type, values?.filter((_, i) => i !== idx));
+  }, [
+    onValueChange,
+    type,
+    values
+  ]);
+  if (!elementType || (readonly || layout === "static") && values && values.length < 1) {
+    return null;
   }
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, (layout !== "static" || values && values.length > 0) && /* @__PURE__ */ React5.createElement(FormFieldLabel, {
+    readonly,
+    label,
+    asChild: true
+  }), /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: "flex flex-col gap-2"
+  }, values?.map((_, index) => {
+    return /* @__PURE__ */ React5.createElement("div", {
+      role: "none",
+      key: index,
+      className: "grid grid-cols-[1fr_min-content] gap-2 last:mb-3"
+    }, /* @__PURE__ */ React5.createElement(FormField, {
+      autoFocus: index === values.length - 1,
+      type: elementType,
+      path: [
+        ...path ?? [],
+        index
+      ],
+      readonly: readonly || layout === "static",
+      layout: "inline",
+      ...props
+    }), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement("div", {
+      role: "none",
+      className: "flex flex-col bs-full justify-end"
+    }, /* @__PURE__ */ React5.createElement("div", {
+      role: "none",
+      className: "flex items-center bs-[var(--line-height)]"
+    }, /* @__PURE__ */ React5.createElement(IconButton2, {
+      icon: "ph--x--regular",
+      iconOnly: true,
+      label: t("button remove"),
+      onClick: () => handleDelete(index),
+      classNames: "self-center"
+    }))));
+  })), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement(IconButton2, {
+    classNames: "flex is-full _mlb-cardSpacingBlock",
+    icon: "ph--plus--regular",
+    label: t("add field"),
+    onClick: handleAdd
+  }));
 };
 ArrayField.displayName = "Form.ArrayField";
 var getDefaultValue = (ast) => {
@@ -1456,6 +1198,9 @@ var getDefaultValue = (ast) => {
     case "BooleanKeyword": {
       return false;
     }
+    case "Suspend": {
+      return getDefaultValue(ast.f());
+    }
     default: {
       if (ast && isNestedType2(ast)) {
         return {};
@@ -1467,783 +1212,696 @@ var getDefaultValue = (ast) => {
 };
 
 // src/components/Form/fields/BooleanField.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7, { useCallback as useCallback6 } 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 }) => {
-  var _effect = _useSignals7();
-  try {
-    const handleChange = useCallback6((value3) => onValueChange?.(type, value3), [
-      type,
-      onValueChange
-    ]);
-    return /* @__PURE__ */ React7.createElement(FormFieldWrapper, {
-      readonly,
-      ...props
-    }, ({ value: value3 }) => /* @__PURE__ */ React7.createElement(Input3.Switch, {
-      disabled: !!readonly,
-      checked: value3,
-      onCheckedChange: handleChange
-    }));
-  } finally {
-    _effect.f();
-  }
+  const handleChange = useCallback4((value3) => onValueChange?.(type, value3), [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React6.createElement(FormFieldWrapper, {
+    readonly,
+    ...props
+  }, ({ value: value3 }) => /* @__PURE__ */ React6.createElement(Input2.Switch, {
+    disabled: !!readonly,
+    checked: value3,
+    onCheckedChange: handleChange
+  }));
 };
 
 // src/components/Form/fields/GeoPointField.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import React8, { useCallback as useCallback7, useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } 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 }) => {
-  var _effect = _useSignals8();
-  try {
-    const { t } = useTranslation5(translationKey);
-    const { status, error } = getStatus();
-    const geoPoint = useMemo5(() => getValue() ?? [
-      0,
-      0
-    ], [
-      getValue
-    ]);
-    const value3 = useMemo5(() => GeoLocation3.fromGeoPoint(geoPoint), [
-      geoPoint
-    ]);
-    const [longitudeText, setLongitudeText] = useState3(value3.longitude?.toString());
-    const [latitudeText, setLatitudeText] = useState3(value3.latitude?.toString());
-    useEffect3(() => {
-      const location = GeoLocation3.fromGeoPoint(geoPoint);
-      setLongitudeText(location.longitude?.toString());
-      setLatitudeText(location.latitude?.toString());
-    }, [
-      geoPoint
-    ]);
-    const handleChange = useCallback7((coordinateType, setText) => (event) => {
-      const inputText = event.target.value;
-      setText(inputText);
-      if (inputText !== "" && inputText !== "-") {
-        const coord = safeParseFloat(inputText);
-        if (coord !== void 0 && !isNaN(coord)) {
-          const currentLocation = GeoLocation3.fromGeoPoint(getValue() ?? [
-            0,
-            0
-          ]);
-          const newLocation = {
-            ...currentLocation,
-            [coordinateType]: coord
-          };
-          const newValue = GeoLocation3.toGeoPoint(newLocation);
-          onValueChange(type, newValue);
-        }
+  const { t } = useTranslation4(translationKey);
+  const { status, error } = getStatus();
+  const geoPoint = useMemo5(() => getValue() ?? [
+    0,
+    0
+  ], [
+    getValue
+  ]);
+  const value3 = useMemo5(() => GeoLocation3.fromGeoPoint(geoPoint), [
+    geoPoint
+  ]);
+  const [longitudeText, setLongitudeText] = useState2(value3.longitude?.toString());
+  const [latitudeText, setLatitudeText] = useState2(value3.latitude?.toString());
+  useEffect4(() => {
+    const location = GeoLocation3.fromGeoPoint(geoPoint);
+    setLongitudeText(location.longitude?.toString());
+    setLatitudeText(location.latitude?.toString());
+  }, [
+    geoPoint
+  ]);
+  const handleChange = useCallback5((coordinateType, setText) => (event) => {
+    const inputText = event.target.value;
+    setText(inputText);
+    if (inputText !== "" && inputText !== "-") {
+      const coord = safeParseFloat(inputText);
+      if (coord !== void 0 && !isNaN(coord)) {
+        const currentLocation = GeoLocation3.fromGeoPoint(getValue() ?? [
+          0,
+          0
+        ]);
+        const newLocation = {
+          ...currentLocation,
+          [coordinateType]: coord
+        };
+        const newValue = GeoLocation3.toGeoPoint(newLocation);
+        onValueChange(type, newValue);
       }
-    }, [
-      type,
-      getValue,
-      onValueChange
-    ]);
-    if ((readonly || layout === "static") && !value3?.latitude && !value3?.longitude) {
-      return null;
     }
-    return /* @__PURE__ */ React8.createElement(Input4.Root, {
-      validationValence: status
-    }, layout !== "inline" && /* @__PURE__ */ React8.createElement(FormFieldLabel, {
-      error,
-      readonly,
-      label,
-      asChild: true
-    }), layout === "static" ? /* @__PURE__ */ React8.createElement(LatLng, value3) : /* @__PURE__ */ React8.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, {
-      type: "number",
-      step: "0.00001",
-      min: "-90",
-      max: "90",
-      disabled: !!readonly,
-      placeholder: t("latitude placeholder"),
-      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, {
-      type: "number",
-      step: "0.00001",
-      min: "-180",
-      max: "180",
-      disabled: !!readonly,
-      placeholder: t("longitude placeholder"),
-      value: longitudeText ?? "",
-      onChange: handleChange("longitude", setLongitudeText),
-      onBlur
-    })))));
-  } finally {
-    _effect.f();
+  }, [
+    type,
+    getValue,
+    onValueChange
+  ]);
+  if ((readonly || layout === "static") && !value3?.latitude && !value3?.longitude) {
+    return null;
   }
+  return /* @__PURE__ */ React7.createElement(Input3.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React7.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label,
+    asChild: true
+  }), layout === "static" ? /* @__PURE__ */ React7.createElement(LatLng, value3) : /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: "grid grid-cols-2 gap-2"
+  }, /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement(Input3.Root, null, layout !== "inline" && /* @__PURE__ */ React7.createElement(Input3.Label, null, t("latitude label")), /* @__PURE__ */ React7.createElement(Input3.TextInput, {
+    type: "number",
+    step: "0.00001",
+    min: "-90",
+    max: "90",
+    disabled: !!readonly,
+    placeholder: t("latitude placeholder"),
+    value: latitudeText ?? "",
+    onChange: handleChange("latitude", setLatitudeText),
+    onBlur
+  }))), /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement(Input3.Root, null, layout !== "inline" && /* @__PURE__ */ React7.createElement(Input3.Label, null, t("longitude label")), /* @__PURE__ */ React7.createElement(Input3.TextInput, {
+    type: "number",
+    step: "0.00001",
+    min: "-180",
+    max: "180",
+    disabled: !!readonly,
+    placeholder: t("longitude placeholder"),
+    value: longitudeText ?? "",
+    onChange: handleChange("longitude", setLongitudeText),
+    onBlur
+  })))));
 };
 var LatLng = ({ latitude = 0, longitude = 0 }) => {
-  var _effect = _useSignals8();
-  try {
-    const latHem = latitude >= 0 ? "N" : "S";
-    const lngHem = longitude >= 0 ? "E" : "W";
-    return /* @__PURE__ */ React8.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", {
-      className: "text-subdued"
-    }, "\xB0", latHem)), /* @__PURE__ */ React8.createElement("span", null, /* @__PURE__ */ React8.createElement("span", null, Math.abs(longitude).toFixed(5)), /* @__PURE__ */ React8.createElement("span", {
-      className: "text-subdued"
-    }, "\xB0", lngHem)));
-  } finally {
-    _effect.f();
-  }
+  const latHem = latitude >= 0 ? "N" : "S";
+  const lngHem = longitude >= 0 ? "E" : "W";
+  return /* @__PURE__ */ React7.createElement("span", {
+    className: "inline-flex items-center gap-1"
+  }, /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement("span", null, Math.abs(latitude).toFixed(5)), /* @__PURE__ */ React7.createElement("span", {
+    className: "text-subdued"
+  }, "\xB0", latHem)), /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement("span", null, Math.abs(longitude).toFixed(5)), /* @__PURE__ */ React7.createElement("span", {
+    className: "text-subdued"
+  }, "\xB0", lngHem)));
 };
 
 // src/components/Form/fields/MarkdownField.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
-import React9, { useCallback as useCallback8, useEffect as useEffect4, 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 }) => {
-  var _effect = _useSignals9();
-  try {
-    const { status, error } = getStatus();
-    const textareaRef = useRef2(null);
-    const adjustHeight = useCallback8(() => {
-      const textarea = textareaRef.current;
-      if (textarea) {
-        textarea.style.blockSize = "auto";
-        textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
-      }
-    }, []);
-    useEffect4(() => {
-      adjustHeight();
-    }, [
-      adjustHeight
-    ]);
-    useEffect4(() => {
-      adjustHeight();
-    }, [
-      getValue(),
-      adjustHeight
-    ]);
-    const handleChange = useCallback8((event) => onValueChange(type, event.target.value), [
-      type,
-      onValueChange
-    ]);
-    const value3 = getValue();
-    if ((readonly || layout === "static") && !value3) {
-      return null;
-    }
-    return /* @__PURE__ */ React9.createElement(Input5.Root, {
-      validationValence: status
-    }, layout !== "inline" && /* @__PURE__ */ React9.createElement(FormFieldLabel, {
-      error,
-      readonly,
-      label
-    }), layout === "static" ? /* @__PURE__ */ React9.createElement("p", null, value3) : /* @__PURE__ */ React9.createElement(Input5.TextArea, {
-      ref: textareaRef,
-      disabled: !!readonly,
-      placeholder,
-      value: value3 ?? "",
-      classNames: "min-bs-auto max-bs-40 overflow-auto",
-      onChange: handleChange,
-      onBlur,
-      style: {
-        resize: "none"
-      },
-      spellCheck: false
-    }), layout === "full" && /* @__PURE__ */ React9.createElement(Input5.Validation, null, error));
-  } finally {
-    _effect.f();
+  const { status, error } = getStatus();
+  const textareaRef = useRef2(null);
+  const adjustHeight = useCallback6(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.blockSize = "auto";
+      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
+    }
+  }, []);
+  useEffect5(() => {
+    adjustHeight();
+  }, [
+    adjustHeight
+  ]);
+  useEffect5(() => {
+    adjustHeight();
+  }, [
+    getValue(),
+    adjustHeight
+  ]);
+  const handleChange = useCallback6((event) => onValueChange(type, event.target.value), [
+    type,
+    onValueChange
+  ]);
+  const value3 = getValue();
+  if ((readonly || layout === "static") && !value3) {
+    return null;
   }
+  return /* @__PURE__ */ React8.createElement(Input4.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React8.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), layout === "static" ? /* @__PURE__ */ React8.createElement("p", null, value3) : /* @__PURE__ */ React8.createElement(Input4.TextArea, {
+    ref: textareaRef,
+    disabled: !!readonly,
+    placeholder,
+    value: value3 ?? "",
+    classNames: "min-bs-auto max-bs-40 overflow-auto",
+    onChange: handleChange,
+    onBlur,
+    style: {
+      resize: "none"
+    },
+    spellCheck: false
+  }), layout === "full" && /* @__PURE__ */ React8.createElement(Input4.Validation, null, error));
 };
 
 // src/components/Form/fields/NumberField.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
-import React10, { useCallback as useCallback9 } 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 }) => {
-  var _effect = _useSignals10();
-  try {
-    const handleChange = useCallback9((event) => onValueChange(type, safeParseFloat2(event.target.value) || 0), [
-      type,
-      onValueChange
-    ]);
-    return /* @__PURE__ */ React10.createElement(FormFieldWrapper, {
-      readonly,
-      ...props
-    }, ({ value: value3 = "" }) => /* @__PURE__ */ React10.createElement(Input6.TextInput, {
-      type: "number",
-      disabled: !!readonly,
-      placeholder,
-      value: value3,
-      onChange: handleChange,
-      onBlur
-    }));
-  } finally {
-    _effect.f();
-  }
+  const handleChange = useCallback7((event) => onValueChange(type, safeParseFloat2(event.target.value) || 0), [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React9.createElement(FormFieldWrapper, {
+    readonly,
+    ...props
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React9.createElement(Input5.TextInput, {
+    type: "number",
+    disabled: !!readonly,
+    placeholder,
+    value: value3,
+    onChange: handleChange,
+    onBlur
+  }));
 };
 
 // src/components/Form/fields/RefField.tsx
-import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
 import "@dxos/lit-ui/dx-tag-picker.pcss";
-import React12, { useCallback as useCallback11, useMemo as useMemo7 } from "react";
-import { 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 Icon3, Input as Input7, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { descriptionText, mx as mx5 } from "@dxos/react-ui-theme";
-import { isNonNullable as isNonNullable2 } from "@dxos/util";
+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 { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
-import React11, { forwardRef as forwardRef2, useCallback as useCallback10, useMemo as useMemo6, useState as useState4 } from "react";
-import { Icon as Icon2, Popover, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { Combobox } from "@dxos/react-ui-searchlist";
-var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, onSelect, onCreate, ...props }, ref) => {
-  var _effect = _useSignals11();
-  try {
-    const { t } = useTranslation6(translationKey);
-    const [showForm, setShowForm] = useState4(false);
-    const [searchString, setSearchString] = useState4("");
-    const handleFormSave = useCallback10((values) => {
-      onCreate?.(values);
-      setShowForm(false);
-      setSearchString("");
-    }, [
-      onCreate
-    ]);
-    const handleFormCancel = useCallback10(() => {
-      setShowForm(false);
-      setSearchString("");
-    }, []);
-    const handleClick = useCallback10((event) => {
-      if (createSchema && event.target.closest('[data-value="__create__"]')) {
-        event.stopPropagation();
-        event.preventDefault();
-        setShowForm(true);
-      }
-    }, [
-      createSchema
-    ]);
-    const handleKeyDown = useCallback10((event) => {
-      if (event.key === "Enter" && createSchema && event.currentTarget.querySelector('[role="option"][aria-selected="true"][data-value="__create__"]')) {
-        event.stopPropagation();
-        event.preventDefault();
-        setShowForm(true);
-      }
-    }, [
-      createSchema
-    ]);
-    const labelById = useMemo6(() => options.reduce((acc, option) => {
-      acc[option.id.toLowerCase()] = option.label.toLowerCase();
-      return acc;
-    }, {}), [
-      options
-    ]);
-    return /* @__PURE__ */ React11.createElement(Combobox.Content, {
-      ...props,
-      ref,
-      filter: (value3, search) => value3 === "__create__" || labelById[value3]?.includes(search.toLowerCase()) ? 1 : 0,
-      onClickCapture: handleClick,
-      onKeyDownCapture: handleKeyDown
-    }, showForm && createSchema ? /* @__PURE__ */ React11.createElement(Popover.Viewport, null, /* @__PURE__ */ React11.createElement(Form.Root, {
-      testId: "create-referenced-object-form",
-      schema: createSchema,
-      values: createInitialValuePath ? {
-        [createInitialValuePath]: searchString
-      } : {},
-      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, {
-      placeholder: t("ref field combobox input placeholder"),
-      value: searchString,
-      onValueChange: setSearchString,
-      autoFocus: true
-    }), /* @__PURE__ */ React11.createElement(Combobox.List, null, options.map((option) => /* @__PURE__ */ React11.createElement(Combobox.Item, {
-      key: option.id,
-      value: option.id,
-      onSelect: () => onSelect(option.id),
-      classNames: "flex items-center gap-2"
-    }, /* @__PURE__ */ React11.createElement("span", {
-      className: "grow"
-    }, option.label), selectedIds?.includes(option.id) && /* @__PURE__ */ React11.createElement(Icon2, {
-      icon: "ph--check--regular"
-    }))), searchString.length > 0 && createOptionLabel && createOptionIcon && createSchema && onCreate && /* @__PURE__ */ React11.createElement(Combobox.Item, {
-      value: "__create__",
-      classNames: "flex items-center gap-2"
-    }, /* @__PURE__ */ React11.createElement(Icon2, {
-      icon: createOptionIcon
-    }), t(createOptionLabel[0], {
+import React10, { forwardRef as forwardRef2, useCallback as useCallback8, useState as useState3 } from "react";
+import { Popover, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { Combobox, useSearchListInput, useSearchListResults } from "@dxos/react-ui-searchlist";
+var CreateItem = ({ createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
+  const { t } = useTranslation5(translationKey);
+  const { query } = useSearchListInput();
+  return /* @__PURE__ */ React10.createElement(Combobox.Item, {
+    value: "__create__",
+    label: t(createOptionLabel[0], {
       ns: createOptionLabel[1].ns,
-      text: searchString
-    })))), /* @__PURE__ */ React11.createElement(Combobox.Arrow, null));
-  } finally {
-    _effect.f();
-  }
+      text: query
+    }),
+    icon: createOptionIcon,
+    classNames: "flex items-center gap-2",
+    closeOnSelect: false,
+    onSelect: () => {
+      onCreateItemSelect(query);
+    }
+  });
+};
+var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, onSelect, onCreate, ...props }, ref) => {
+  const { t } = useTranslation5(translationKey);
+  const [showForm, setShowForm] = useState3(false);
+  const [formInitialValue, setFormInitialValue] = useState3("");
+  const { results, handleSearch } = useSearchListResults({
+    items: options
+  });
+  const handleFormSave = useCallback8((values) => {
+    onCreate?.(values);
+    setShowForm(false);
+    setFormInitialValue("");
+  }, [
+    onCreate
+  ]);
+  const handleFormCancel = useCallback8(() => {
+    setShowForm(false);
+    setFormInitialValue("");
+  }, []);
+  const handleKeyDown = useCallback8((event) => {
+    if (event.key === "Enter" && createSchema && event.currentTarget.querySelector('[role="option"][aria-selected="true"][data-value="__create__"]')) {
+      event.stopPropagation();
+      event.preventDefault();
+      const input = event.currentTarget.querySelector('input[type="text"]');
+      const currentQuery = input?.value || "";
+      setFormInitialValue(currentQuery);
+      setShowForm(true);
+    }
+  }, [
+    createSchema
+  ]);
+  return /* @__PURE__ */ React10.createElement(Combobox.Content, {
+    ...props,
+    ref,
+    onSearch: handleSearch,
+    onKeyDownCapture: handleKeyDown
+  }, showForm && createSchema ? /* @__PURE__ */ React10.createElement(Popover.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Root, {
+    testId: "create-referenced-object-form",
+    schema: createSchema,
+    values: createInitialValuePath ? {
+      [createInitialValuePath]: formInitialValue
+    } : {},
+    onSave: handleFormSave,
+    onCancel: handleFormCancel
+  }, /* @__PURE__ */ React10.createElement(Form.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Content, null, /* @__PURE__ */ React10.createElement(Form.FieldSet, null), /* @__PURE__ */ React10.createElement(Form.Actions, null))))) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Combobox.Input, {
+    placeholder: t("ref field combobox input placeholder"),
+    autoFocus: true
+  }), /* @__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__ */ React10.createElement(CreateItem, {
+    createOptionLabel,
+    createOptionIcon,
+    onCreateItemSelect: (query) => {
+      setFormInitialValue(query);
+      setShowForm(true);
+    }
+  }))), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
 });
 ObjectPickerContent.displayName = "ObjectPickerContent";
 var ObjectPicker = {
   Root: Combobox.Root,
+  Portal: Combobox.Portal,
   Trigger: Combobox.Trigger,
   VirtualTrigger: Combobox.VirtualTrigger,
   Content: ObjectPickerContent
 };
 
 // src/components/Form/fields/RefField.tsx
-var isRefSnapShot = (val) => {
+var isRefSnapshot = (val) => {
   return typeof val === "object" && typeof val?.["/"] === "string";
 };
+var defaultGetOptions = (results) => results.map((result) => {
+  const id = Entity.getDXN(result).toString();
+  const label = Entity.getLabel(result);
+  return {
+    id,
+    label: label ?? id
+  };
+});
+var defaultResultsHook = (db, typename) => useQuery(db, typename ? typename === Type.getTypename(Type.Obj) ? Filter.everything() : Filter.typename(typename) : Filter.nothing());
 var RefField = (props) => {
-  var _effect = _useSignals12();
-  try {
-    const { type, readonly, label, placeholder, layout, getStatus, getValue, array, createOptionLabel, createOptionIcon, createSchema, createInitialValuePath, onCreate, onQueryRefOptions, onValueChange } = props;
-    const { t } = useTranslation7(translationKey);
-    const { status, error } = getStatus();
-    const typename = useMemo7(() => type ? findAnnotation(type, ReferenceAnnotationId)?.typename : void 0, [
-      type
-    ]);
-    const { options, update: updateOptions } = useQueryRefOptions({
-      typename,
-      onQueryRefOptions
-    });
-    const handleGetValue = useCallback11(() => {
-      const formValue = getValue();
-      const unknownToRefOption = (value3) => {
-        const isRef = Ref2.isRef(value3);
-        if (isRef || isRefSnapShot(value3)) {
-          const dxnString = isRef ? value3.dxn.toString() : value3["/"];
-          const matchingOption = options.find((option2) => option2.id === dxnString);
-          if (matchingOption) {
-            return matchingOption;
-          }
-        }
-        return void 0;
-      };
-      if (array && Array.isArray(formValue)) {
-        return formValue.map(unknownToRefOption).filter(isNonNullable2) ?? [];
-      }
-      const option = unknownToRefOption(formValue);
-      if (option) {
-        return [
-          option
-        ];
-      }
-      return [];
-    }, [
-      options,
-      array,
-      getValue
-    ]);
-    const handleUpdate = useCallback11((ids) => {
-      if (ids.length === 0) {
-        onValueChange(type, void 0);
-        return;
-      }
-      const refs = ids.map((id) => {
-        const item = options.find((option) => option.id === id);
-        if (item) {
-          const dxn = DXN.parse(item.id);
-          return Ref2.fromDXN(dxn);
-        }
-        return null;
-      }).filter(isNonNullable2);
-      if (array) {
-        onValueChange(type, refs);
-      } else {
-        onValueChange(type, refs[0]);
-      }
-    }, [
-      options,
-      type,
-      array,
-      onValueChange
-    ]);
-    const handleCreate = useCallback11((values) => {
-      onCreate?.(values);
-      updateOptions();
-    }, [
-      onCreate,
-      updateOptions
-    ]);
-    const items = handleGetValue();
-    const selectedIds = useMemo7(() => items.map((i) => i.id), [
-      items
-    ]);
-    const toggleSelect = useCallback11((id) => {
-      if (array) {
-        const nextIds = selectedIds.includes(id) ? selectedIds.filter((x) => x !== id) : [
-          ...selectedIds,
-          id
-        ];
-        handleUpdate(nextIds);
-      } else {
-        if (selectedIds[0] === id) {
-          handleUpdate([]);
-        } else {
-          handleUpdate([
-            id
-          ]);
+  const { type, readonly, label, placeholder, layout, getStatus, getValue, createOptionLabel, createOptionIcon, createInitialValuePath, db, resultsHook: useResults = defaultResultsHook, schemaHook: useSchema = useSchema$, getOptions: getOptions2 = defaultGetOptions, onCreate, onValueChange } = props;
+  const { t } = useTranslation6(translationKey);
+  const { status, error } = getStatus();
+  const typename = useMemo6(() => type ? findAnnotation(type, ReferenceAnnotationId)?.typename : void 0, [
+    type
+  ]);
+  const results = useResults(db, typename);
+  const options = useMemo6(() => getOptions2(results), [
+    results,
+    getOptions2
+  ]);
+  const handleGetValue = useCallback9(() => {
+    const formValue = getValue();
+    const unknownToRefOption = (value3) => {
+      const isRef = Ref2.isRef(value3);
+      if (isRef || isRefSnapshot(value3)) {
+        const dxnString = isRef ? value3.dxn.toString() : value3["/"];
+        const matchingOption = options.find((option) => option.id === dxnString);
+        if (matchingOption) {
+          return matchingOption;
         }
       }
-    }, [
-      array,
-      selectedIds,
-      handleUpdate
-    ]);
-    if (!typename || (readonly || layout === "static") && items.length < 1) {
-      return null;
+      return void 0;
+    };
+    return unknownToRefOption(formValue);
+  }, [
+    options,
+    getValue
+  ]);
+  const handleUpdate = useCallback9((id) => {
+    const item2 = options.find((option) => option.id === id);
+    const ref = item2 ? Ref2.fromDXN(DXN.parse(item2.id)) : void 0;
+    onValueChange(type, ref);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const item = handleGetValue();
+  const selectedIds = useMemo6(() => item ? [
+    item.id
+  ] : [], [
+    item
+  ]);
+  const createSchema = useSchema(db, typename);
+  const handleCreate = useCallback9((values) => {
+    if (createSchema && onCreate) {
+      onCreate(createSchema, values);
     }
-    return /* @__PURE__ */ React12.createElement(Input7.Root, {
-      validationValence: status
-    }, layout !== "inline" && /* @__PURE__ */ React12.createElement(FormFieldLabel, {
-      error,
-      readonly,
-      label
-    }), /* @__PURE__ */ React12.createElement("div", null, readonly ? items.length < 1 ? /* @__PURE__ */ React12.createElement("p", {
-      className: mx5(descriptionText, "mbe-2")
-    }, t("empty readonly ref field label")) : items.map((item) => /* @__PURE__ */ React12.createElement(DxAnchor, {
-      key: item.id,
-      refid: item.id,
-      rootclassname: "mie-1"
-    }, item.label)) : /* @__PURE__ */ React12.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React12.createElement(ObjectPicker.Trigger, {
-      asChild: true,
-      classNames: "p-0"
-    }, items?.length === 1 ? /* @__PURE__ */ React12.createElement("div", {
-      className: "flex gap-2 is-full"
-    }, items?.map((item) => /* @__PURE__ */ React12.createElement(Input7.Root, {
-      key: item.id
-    }, /* @__PURE__ */ React12.createElement(Input7.TextInput, {
-      value: item.label,
-      readOnly: true,
-      classNames: "is-full"
-    })))) : /* @__PURE__ */ React12.createElement(Button2, {
-      classNames: "is-full text-start gap-2"
-    }, /* @__PURE__ */ React12.createElement("div", {
-      role: "none",
-      className: "grow overflow-hidden"
-    }, /* @__PURE__ */ React12.createElement("span", {
-      className: "flex truncate text-description"
-    }, placeholder ?? t("ref field placeholder", {
-      count: array ? 99 : 1
-    }))), /* @__PURE__ */ React12.createElement(Icon3, {
-      size: 3,
-      icon: "ph--caret-down--bold"
-    }))), /* @__PURE__ */ React12.createElement(ObjectPicker.Content, {
-      classNames: "popover-card-width",
-      options,
-      selectedIds,
-      createSchema,
-      createOptionLabel,
-      createOptionIcon,
-      createInitialValuePath,
-      onCreate: handleCreate,
-      onSelect: toggleSelect
-    }))), layout === "full" && /* @__PURE__ */ React12.createElement(Input7.DescriptionAndValidation, null, error));
-  } finally {
-    _effect.f();
+  }, [
+    createSchema,
+    onCreate
+  ]);
+  const handleSelect = useCallback9((id) => {
+    if (item?.id === id) {
+      handleUpdate(void 0);
+    } else {
+      handleUpdate(id);
+    }
+  }, [
+    item,
+    handleUpdate
+  ]);
+  if (!typename || (readonly || layout === "static") && !item) {
+    return null;
   }
+  return /* @__PURE__ */ React11.createElement(Input6.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React11.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), /* @__PURE__ */ React11.createElement("div", null, readonly ? !item ? /* @__PURE__ */ React11.createElement("p", {
+    className: mx3(descriptionText, "mbe-2")
+  }, t("empty readonly ref field label")) : /* @__PURE__ */ React11.createElement(DxAnchor, {
+    key: item.id,
+    dxn: item.id,
+    rootclassname: "mie-1"
+  }, item.label) : /* @__PURE__ */ React11.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Trigger, {
+    asChild: true,
+    classNames: "p-0"
+  }, item ? /* @__PURE__ */ React11.createElement("div", {
+    className: "flex gap-2 is-full"
+  }, /* @__PURE__ */ React11.createElement(Input6.Root, {
+    key: item.id
+  }, /* @__PURE__ */ React11.createElement(Input6.TextInput, {
+    value: item.label,
+    readOnly: true,
+    classNames: "is-full"
+  }))) : /* @__PURE__ */ React11.createElement(Button, {
+    classNames: "is-full text-start gap-2"
+  }, /* @__PURE__ */ React11.createElement("div", {
+    role: "none",
+    className: "grow overflow-hidden"
+  }, /* @__PURE__ */ React11.createElement("span", {
+    className: "flex truncate text-description"
+  }, placeholder ?? t("ref field placeholder"))), /* @__PURE__ */ React11.createElement(Icon2, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }))), /* @__PURE__ */ React11.createElement(ObjectPicker.Portal, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Content, {
+    classNames: "popover-card-width",
+    options,
+    selectedIds,
+    createSchema: createSchema && omitId(createSchema),
+    createOptionLabel,
+    createOptionIcon,
+    createInitialValuePath,
+    onCreate: handleCreate,
+    onSelect: handleSelect
+  })))), layout === "full" && /* @__PURE__ */ React11.createElement(Input6.DescriptionAndValidation, null, error));
 };
 
 // src/components/Form/fields/SelectField.tsx
-import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
-import React13, { useCallback as useCallback12 } 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 }) => {
-  var _effect = _useSignals13();
-  try {
-    const { status, error } = getStatus();
-    const value3 = getValue();
-    const handleValueChange = useCallback12((value4) => onValueChange(type, value4), [
-      type,
-      onValueChange
-    ]);
-    if ((readonly || layout === "static") && value3 == null) {
-      return null;
-    }
-    return /* @__PURE__ */ React13.createElement(Input8.Root, {
-      validationValence: status
-    }, layout !== "inline" && /* @__PURE__ */ React13.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, {
-      value: value3,
-      onValueChange: handleValueChange
-    }, /* @__PURE__ */ React13.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 }) => (
-      // NOTE: Numeric values are converted to and from strings.
-      /* @__PURE__ */ React13.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));
-  } finally {
-    _effect.f();
+  const { status, error } = getStatus();
+  const value3 = getValue();
+  const handleValueChange = useCallback10((value4) => onValueChange(type, value4), [
+    type,
+    onValueChange
+  ]);
+  if ((readonly || layout === "static") && value3 == null) {
+    return null;
   }
+  return /* @__PURE__ */ React12.createElement(Input7.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React12.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), 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__ */ React12.createElement(Select.TriggerButton, {
+    classNames: "is-full",
+    disabled: !!readonly,
+    placeholder
+  }), /* @__PURE__ */ React12.createElement(Select.Portal, null, /* @__PURE__ */ React12.createElement(Select.Content, null, /* @__PURE__ */ React12.createElement(Select.Viewport, null, options?.map(({ value: value4, label: label2 }) => (
+    // NOTE: Numeric values are converted to and from strings.
+    /* @__PURE__ */ React12.createElement(Select.Option, {
+      key: String(value4),
+      value: String(value4)
+    }, label2 ?? String(value4))
+  ))), /* @__PURE__ */ React12.createElement(Select.Arrow, null)))), layout === "full" && /* @__PURE__ */ React12.createElement(Input7.DescriptionAndValidation, null, error));
 };
 
 // src/components/Form/fields/SelectOptionField.tsx
-import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
-import React14, { useCallback as useCallback13, useEffect as useEffect5, useRef as useRef3, useState as useState5 } 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, subtleHover } from "@dxos/react-ui-theme";
+import { hues, osTranslations, subtleHover } from "@dxos/ui-theme";
 var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueChange }) => {
-  var _effect = _useSignals14();
-  try {
-    const { t } = useTranslation8(translationKey);
-    const { status, error } = getStatus();
-    const [selected, setSelectedId] = useState5(null);
-    const [isNewOption, setIsNewOption] = useState5(false);
-    const inputRef = useRef3(null);
-    const options = getValue();
-    useEffect5(() => {
-      if (options === void 0) {
-        onValueChange(type, []);
-      }
-    }, [
-      options,
-      type,
-      onValueChange
-    ]);
-    const randomHue = () => {
-      const usedHues = new Set(options?.map((option) => option.color) ?? []);
-      const unusedHues = hues.filter((hue) => !usedHues.has(hue));
-      if (unusedHues.length > 0) {
-        return unusedHues[Math.floor(Math.random() * unusedHues.length)];
-      }
-      const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
-      const availableHues = hues.filter((hue) => !lastThree.has(hue));
-      return availableHues[Math.floor(Math.random() * availableHues.length)] ?? hues[Math.floor(Math.random() * hues.length)];
+  const { t } = useTranslation7(translationKey);
+  const { status, error } = getStatus();
+  const [selected, setSelectedId] = useState4(null);
+  const [isNewOption, setIsNewOption] = useState4(false);
+  const inputRef = useRef3(null);
+  const options = getValue();
+  useEffect6(() => {
+    if (options === void 0) {
+      onValueChange(type, []);
+    }
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const randomHue = () => {
+    const usedHues = new Set(options?.map((option) => option.color) ?? []);
+    const unusedHues = hues.filter((hue) => !usedHues.has(hue));
+    if (unusedHues.length > 0) {
+      return unusedHues[Math.floor(Math.random() * unusedHues.length)];
+    }
+    const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
+    const availableHues = hues.filter((hue) => !lastThree.has(hue));
+    return availableHues[Math.floor(Math.random() * availableHues.length)] ?? hues[Math.floor(Math.random() * hues.length)];
+  };
+  const handleAdd = useCallback11(() => {
+    const newId = PublicKey.random().truncate();
+    const newOption = {
+      id: newId,
+      title: "",
+      color: randomHue()
     };
-    const handleAdd = useCallback13(() => {
-      const newId = PublicKey.random().truncate();
-      const newOption = {
-        id: newId,
-        title: "",
-        color: randomHue()
-      };
-      onValueChange(type, [
-        ...options ?? [],
-        newOption
-      ]);
-      setSelectedId(newId);
-      setIsNewOption(true);
-    }, [
-      options,
-      type,
-      onValueChange
+    onValueChange(type, [
+      ...options ?? [],
+      newOption
     ]);
-    const handleDelete = useCallback13((id) => {
-      const newOptions = options?.filter((option) => option.id !== id) ?? [];
-      onValueChange(type, newOptions);
+    setSelectedId(newId);
+    setIsNewOption(true);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleDelete = useCallback11((id) => {
+    const newOptions = options?.filter((option) => option.id !== id) ?? [];
+    onValueChange(type, newOptions);
+    setSelectedId(null);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleMove = useCallback11((from, to) => {
+    if (!options) {
+      return;
+    }
+    const newOptions = [
+      ...options
+    ];
+    const [removed] = newOptions.splice(from, 1);
+    newOptions.splice(to, 0, removed);
+    onValueChange(type, newOptions);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleClick = useCallback11((id) => {
+    setSelectedId((current) => current === id ? null : id);
+  }, []);
+  const handleTitleChange = useCallback11((id) => (e) => {
+    const newOptions = options?.map((o) => o.id === id ? {
+      ...o,
+      title: e.target.value
+    } : o);
+    onValueChange(type, newOptions ?? []);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleKeyDown = useCallback11((ev) => {
+    if (ev.key === "Enter") {
       setSelectedId(null);
-    }, [
-      options,
-      type,
-      onValueChange
-    ]);
-    const handleMove = useCallback13((from, to) => {
-      if (!options) {
-        return;
-      }
-      const newOptions = [
-        ...options
-      ];
-      const [removed] = newOptions.splice(from, 1);
-      newOptions.splice(to, 0, removed);
-      onValueChange(type, newOptions);
-    }, [
-      options,
-      type,
-      onValueChange
-    ]);
-    const handleClick = useCallback13((id) => {
-      setSelectedId((current) => current === id ? null : id);
-    }, []);
-    const handleTitleChange = useCallback13((id) => (e) => {
-      const newOptions = options?.map((o) => o.id === id ? {
-        ...o,
-        title: e.target.value
-      } : o);
-      onValueChange(type, newOptions ?? []);
-    }, [
-      options,
-      type,
-      onValueChange
-    ]);
-    const handleKeyDown = useCallback13((ev) => {
-      if (ev.key === "Enter") {
-        setSelectedId(null);
-      }
-    }, []);
-    const handleColorChange = useCallback13((id) => (hue) => {
-      const newOptions = options?.map((o) => o.id === id ? {
-        ...o,
-        color: hue
-      } : o);
-      onValueChange(type, newOptions ?? []);
-    }, [
-      options,
-      type,
-      onValueChange
-    ]);
-    useEffect5(() => {
-      if (selected && isNewOption && inputRef.current) {
-        inputRef.current.focus();
-        setIsNewOption(false);
-      }
-    }, [
-      selected,
-      isNewOption
-    ]);
-    return /* @__PURE__ */ React14.createElement(Input9.Root, {
-      validationValence: status
-    }, /* @__PURE__ */ React14.createElement(FormFieldLabel, {
-      error,
-      readonly,
-      label
-    }), /* @__PURE__ */ React14.createElement("div", {
-      role: "none"
-    }, options && /* @__PURE__ */ React14.createElement(List.Root, {
-      items: options,
-      isItem: (_item) => true,
-      onMove: readonly ? void 0 : handleMove,
-      readonly: !!readonly
-    }, ({ items }) => /* @__PURE__ */ React14.createElement("div", {
-      role: "list",
-      className: "is-full overflow-auto"
-    }, items?.map((item) => /* @__PURE__ */ React14.createElement("div", {
-      key: item.id
-    }, /* @__PURE__ */ React14.createElement(List.Item, {
-      role: "button",
-      item,
-      classNames: [
-        subtleHover,
-        "flex flex-col cursor-pointer rounded-sm"
-      ],
-      "aria-expanded": selected === item.id
-    }, /* @__PURE__ */ React14.createElement("div", {
-      className: "flex items-center"
-    }, /* @__PURE__ */ React14.createElement(List.ItemDragHandle, {
-      disabled: !!readonly
-    }), /* @__PURE__ */ React14.createElement(List.ItemTitle, {
-      onClick: () => handleClick(item.id),
-      classNames: "flex-1"
-    }, /* @__PURE__ */ React14.createElement(Tag, {
-      palette: item.color
-    }, item.title || "\u200B")), /* @__PURE__ */ React14.createElement(IconButton3, {
-      iconOnly: true,
-      variant: "ghost",
-      label: t(selected === item.id ? "collapse label" : "expand label", {
-        ns: "os"
-      }),
-      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, {
-      classNames: "text-xs"
-    }, t("select option label")), /* @__PURE__ */ React14.createElement("div", {
-      className: "grid grid-cols-[1fr_min-content_min-content] gap-1"
-    }, /* @__PURE__ */ React14.createElement(Input9.TextInput, {
-      disabled: !!readonly,
-      placeholder: t("select option label placeholder"),
-      ref: selected === item.id ? inputRef : void 0,
-      value: item.title,
-      onChange: handleTitleChange(item.id),
-      onKeyDown: handleKeyDown,
-      classNames: "flex-1"
-    }), /* @__PURE__ */ React14.createElement(HuePicker, {
-      disabled: !!readonly,
-      value: item.color,
-      onChange: handleColorChange(item.id)
-    }), /* @__PURE__ */ React14.createElement(IconButton3, {
-      disabled: !!readonly,
-      icon: "ph--trash--fill",
-      iconOnly: true,
-      label: t("select option delete"),
-      onClick: () => handleDelete(item.id)
-    })))))), /* @__PURE__ */ React14.createElement(IconButton3, {
-      variant: "ghost",
-      icon: "ph--plus--regular",
-      label: t("select option add"),
-      onClick: handleAdd,
-      disabled: !!readonly,
-      classNames: "is-full"
-    })))));
-  } finally {
-    _effect.f();
-  }
+    }
+  }, []);
+  const handleColorChange = useCallback11((id) => (hue) => {
+    const newOptions = options?.map((o) => o.id === id ? {
+      ...o,
+      color: hue
+    } : o);
+    onValueChange(type, newOptions ?? []);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  useEffect6(() => {
+    if (selected && isNewOption && inputRef.current) {
+      inputRef.current.focus();
+      setIsNewOption(false);
+    }
+  }, [
+    selected,
+    isNewOption
+  ]);
+  return /* @__PURE__ */ React13.createElement(Input8.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React13.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), /* @__PURE__ */ React13.createElement("div", {
+    role: "none"
+  }, options && /* @__PURE__ */ React13.createElement(List.Root, {
+    items: options,
+    isItem: (_item) => true,
+    onMove: readonly ? void 0 : handleMove,
+    readonly: !!readonly
+  }, ({ items }) => /* @__PURE__ */ React13.createElement("div", {
+    role: "list",
+    className: "is-full overflow-auto"
+  }, items?.map((item) => /* @__PURE__ */ React13.createElement("div", {
+    key: item.id
+  }, /* @__PURE__ */ React13.createElement(List.Item, {
+    role: "button",
+    item,
+    classNames: [
+      subtleHover,
+      "flex flex-col cursor-pointer rounded-sm"
+    ],
+    "aria-expanded": selected === item.id
+  }, /* @__PURE__ */ React13.createElement("div", {
+    className: "flex items-center"
+  }, /* @__PURE__ */ React13.createElement(List.ItemDragHandle, {
+    disabled: !!readonly
+  }), /* @__PURE__ */ React13.createElement(List.ItemTitle, {
+    onClick: () => handleClick(item.id),
+    classNames: "flex-1"
+  }, /* @__PURE__ */ React13.createElement(Tag, {
+    palette: item.color
+  }, item.title || "\u200B")), /* @__PURE__ */ React13.createElement(IconButton3, {
+    iconOnly: true,
+    variant: "ghost",
+    label: t(selected === item.id ? "collapse label" : "expand label", {
+      ns: osTranslations
+    }),
+    icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
+    onClick: () => handleClick(item.id)
+  })), selected === item.id && /* @__PURE__ */ React13.createElement("div", {
+    className: "pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine"
+  }, /* @__PURE__ */ React13.createElement(Input8.Label, {
+    classNames: "text-xs"
+  }, t("select option label")), /* @__PURE__ */ React13.createElement("div", {
+    className: "grid grid-cols-[1fr_min-content_min-content] gap-1"
+  }, /* @__PURE__ */ React13.createElement(Input8.TextInput, {
+    disabled: !!readonly,
+    placeholder: t("select option label placeholder"),
+    ref: selected === item.id ? inputRef : void 0,
+    value: item.title,
+    onChange: handleTitleChange(item.id),
+    onKeyDown: handleKeyDown,
+    classNames: "flex-1"
+  }), /* @__PURE__ */ React13.createElement(HuePicker, {
+    disabled: !!readonly,
+    value: item.color,
+    onChange: handleColorChange(item.id)
+  }), /* @__PURE__ */ React13.createElement(IconButton3, {
+    disabled: !!readonly,
+    icon: "ph--trash--fill",
+    iconOnly: true,
+    label: t("select option delete"),
+    onClick: () => handleDelete(item.id)
+  })))))), /* @__PURE__ */ React13.createElement(IconButton3, {
+    variant: "ghost",
+    icon: "ph--plus--regular",
+    label: t("select option add"),
+    onClick: handleAdd,
+    disabled: !!readonly,
+    classNames: "is-full"
+  })))));
 };
 
 // src/components/Form/fields/TextField.tsx
-import { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
-import React15, { useCallback as useCallback14 } 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 }) => {
-  var _effect = _useSignals15();
-  try {
-    const handleChange = useCallback14((event) => onValueChange(type, event.target.value), [
-      type,
-      onValueChange
-    ]);
-    return /* @__PURE__ */ React15.createElement(FormFieldWrapper, {
-      readonly,
-      ...props
-    }, ({ value: value3 = "" }) => /* @__PURE__ */ React15.createElement(Input10.TextInput, {
-      noAutoFill: true,
-      disabled: !!readonly,
-      placeholder,
-      value: value3,
-      onChange: handleChange,
-      onBlur
-    }));
-  } finally {
-    _effect.f();
-  }
+  const handleChange = useCallback12((event) => onValueChange(type, event.target.value), [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React14.createElement(FormFieldWrapper, {
+    readonly,
+    ...props
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React14.createElement(Input9.TextInput, {
+    noAutoFill: true,
+    disabled: !!readonly,
+    placeholder,
+    value: value3,
+    onChange: handleChange,
+    onBlur
+  }));
 };
 
 // src/components/Form/fields/TextAreaField.tsx
-import { useSignals as _useSignals16 } from "@preact-signals/safe-react/tracking";
-import React16, { useCallback as useCallback15 } 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 }) => {
-  var _effect = _useSignals16();
-  try {
-    const handleChange = useCallback15((event) => onValueChange(type, event.target.value), [
-      type,
-      onValueChange
-    ]);
-    return /* @__PURE__ */ React16.createElement(FormFieldWrapper, {
-      readonly,
-      ...props
-    }, ({ value: value3 = "" }) => /* @__PURE__ */ React16.createElement(Input11.TextArea, {
-      rows: 3,
-      disabled: !!readonly,
-      placeholder,
-      value: value3,
-      onChange: handleChange,
-      onBlur
-    }));
-  } finally {
-    _effect.f();
-  }
+  const handleChange = useCallback13((event) => onValueChange(type, event.target.value), [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React15.createElement(FormFieldWrapper, {
+    readonly,
+    ...props
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React15.createElement(Input10.TextArea, {
+    rows: 3,
+    disabled: !!readonly,
+    placeholder,
+    value: value3,
+    onChange: handleChange,
+    onBlur
+  }));
 };
 
 // src/components/Form/fields/TupleField.tsx
-import { useSignals as _useSignals17 } from "@preact-signals/safe-react/tracking";
-import React17 from "react";
-import { Input as Input12 } from "@dxos/react-ui";
-import { mx as mx6 } from "@dxos/react-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",
@@ -2252,494 +1910,631 @@ var gridCols = [
   "grid-cols-4"
 ];
 var TupleField = ({ binding, type, readonly, label, getStatus, getValue, onValueChange, onBlur }) => {
-  var _effect = _useSignals17();
-  try {
-    const { status, error } = getStatus();
-    const values = getValue() ?? {};
-    return /* @__PURE__ */ React17.createElement(Input12.Root, {
-      validationValence: status
-    }, /* @__PURE__ */ React17.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, {
-      key: prop,
-      type: "number",
-      disabled: !!readonly,
-      value: values[prop],
-      onChange: (event) => {
-        onValueChange(type, {
-          ...values,
-          [prop]: safeParseFloat3(event.target.value, 0)
-        });
-      },
-      onBlur
-    }))));
-  } finally {
-    _effect.f();
-  }
+  const { status, error } = getStatus();
+  const values = getValue() ?? {};
+  return /* @__PURE__ */ React16.createElement(Input11.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React16.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), /* @__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,
+    value: values[prop],
+    onChange: (event) => {
+      onValueChange(type, {
+        ...values,
+        [prop]: safeParseFloat3(event.target.value, 0)
+      });
+    },
+    onBlur
+  }))));
 };
 
 // src/components/FieldEditor/FieldEditor.tsx
-var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
-var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel }) => {
-  var _effect = _useSignals18();
-  try {
-    const { t } = useTranslation9(translationKey);
-    const [props, setProps] = useState6(projection.getFieldProjection(field.id).props);
-    useEffect6(() => setProps(projection.getFieldProjection(field.id).props), [
-      field,
-      projection
-    ]);
-    const [schemas, setSchemas] = useState6([]);
-    useAsyncEffect2(async () => {
-      if (!registry) {
-        return;
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
+var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCancel }) => {
+  const { t } = useTranslation8(translationKey);
+  const [props, setProps] = useState5(projection.getFieldProjection(field.id).props);
+  useEffect7(() => setProps(projection.getFieldProjection(field.id).props), [
+    field,
+    projection
+  ]);
+  const [schemas, setSchemas] = useState5([]);
+  useAsyncEffect(async () => {
+    if (!registry) {
+      return;
+    }
+    const subscription = registry.query().subscribe((query) => setSchemas(query.results), {
+      fire: true
+    });
+    const schemas2 = await registry.query().run();
+    setSchemas(schemas2);
+    return () => subscription?.();
+  }, [
+    registry
+  ]);
+  const [referenceSchema, setReferenceSchema] = useState5();
+  useEffect7(() => {
+    setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
+  }, [
+    schemas,
+    props?.referenceSchema
+  ]);
+  const [{ fieldSchema }, setFieldSchema] = useState5({
+    fieldSchema: getFormatSchema(props?.format)
+  });
+  const fieldMap = useMemo7(() => ({
+    ["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__ */ React17.createElement(SelectField, {
+      ...props2,
+      options: schemas.map((schema) => ({
+        value: schema.typename
+      }))
+    }),
+    ["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__ */ React17.createElement(SelectOptionField, props2)
+  }), [
+    t,
+    schemas,
+    referenceSchema
+  ]);
+  const propIsNotType = useCallback14((props2) => props2.filter((prop) => prop.name !== "type"), []);
+  const handleValuesChanged = useCallback14((_props) => {
+    setFieldSchema((prev) => {
+      const fieldSchema2 = getFormatSchema(_props.format);
+      if (prev.fieldSchema === fieldSchema2) {
+        return prev;
       }
-      const subscription = registry.query().subscribe((query) => setSchemas(query.results), {
-        fire: true
-      });
-      const schemas2 = await registry.query().run();
-      setSchemas(schemas2);
-      return () => subscription?.();
-    }, [
-      registry
-    ]);
-    const [referenceSchema, setReferenceSchema] = useState6();
-    useEffect6(() => {
-      setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
-    }, [
-      schemas,
-      props?.referenceSchema
-    ]);
-    const [{ fieldSchema }, setFieldSchema] = useState6({
-      fieldSchema: getFormatSchema(props?.format)
+      return {
+        fieldSchema: fieldSchema2
+      };
     });
-    const fieldMap = useMemo8(() => ({
-      ["format"]: (props2) => /* @__PURE__ */ React18.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, {
-        ...props2,
-        options: schemas.map((schema) => ({
-          value: schema.typename
-        }))
-      }),
-      ["referencePath"]: (props2) => /* @__PURE__ */ React18.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)
-    }), [
-      t,
-      schemas,
-      referenceSchema
-    ]);
-    const propIsNotType = useCallback16((props2) => props2.filter((prop) => prop.name !== "type"), []);
-    const handleValuesChanged = useCallback16((_props) => {
-      setFieldSchema((prev) => {
-        const fieldSchema2 = getFormatSchema(_props.format);
-        if (prev.fieldSchema === fieldSchema2) {
-          return prev;
+    setReferenceSchema((prev) => {
+      if (_props.referenceSchema !== prev?.typename) {
+        const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
+        if (newSchema) {
+          return newSchema;
         }
+      }
+      return prev;
+    });
+    setProps((props2) => {
+      const type = formatToType[_props.format];
+      const additionalProps = formatToAdditionalPropertyAttributes[_props.format];
+      if (props2.type !== type) {
         return {
-          fieldSchema: fieldSchema2
+          ...props2,
+          ..._props,
+          ...additionalProps,
+          type
         };
-      });
-      setReferenceSchema((prev) => {
-        if (_props.referenceSchema !== prev?.typename) {
-          const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
-          if (newSchema) {
-            return newSchema;
-          }
-        }
-        return prev;
-      });
-      setProps((props2) => {
-        const type = formatToType[_props.format];
-        const additionalProps = formatToAdditionalPropertyAttributes[_props.format];
-        if (props2.type !== type) {
-          return {
-            ...props2,
-            ..._props,
-            ...additionalProps,
-            type
-          };
+      }
+      return _props;
+    });
+  }, [
+    schemas,
+    props.format,
+    props.referenceSchema
+  ]);
+  const handleValidate = useCallback14(({ property }) => {
+    if (property && projection.getFields().find((f) => f.path === property && f.path !== field.path)) {
+      return [
+        {
+          path: "property",
+          message: `property is not unique: '${property}'`
         }
-        return _props;
+      ];
+    }
+  }, [
+    projection.getFields(),
+    field
+  ]);
+  const handleSave = useCallback14((props2) => {
+    if (view) {
+      Obj3.change(view, () => {
+        projection.setFieldProjection({
+          field,
+          props: props2
+        });
       });
-    }, [
-      schemas,
-      props.format,
-      props.referenceSchema
-    ]);
-    const handleValidate = useCallback16(({ property }) => {
-      if (property && projection.fields.find((f) => f.path === property && f.path !== field.path)) {
-        return [
-          {
-            path: "property",
-            message: `property is not unique: '${property}'`
-          }
-        ];
-      }
-    }, [
-      projection.fields,
-      field
-    ]);
-    const handleSave = useCallback16((props2) => {
+    } else {
       projection.setFieldProjection({
         field,
         props: props2
       });
-      onSave();
-    }, [
-      projection,
-      field,
-      onSave
-    ]);
-    const handleCancel = useCallback16(() => {
-      onSave();
-      requestAnimationFrame(() => onCancel?.());
-    }, [
-      onSave
-    ]);
-    if (!fieldSchema) {
-      log3.warn("invalid format", {
-        props
-      }, {
-        F: __dxlog_file4,
-        L: 166,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      return null;
     }
-    return /* @__PURE__ */ React18.createElement(Form.Root, {
-      key: field.id,
-      fieldMap,
-      autoFocus: true,
-      readonly,
-      schema: fieldSchema,
-      values: props,
-      exclude: propIsNotType,
-      sort: [
-        "property",
-        "format"
-      ],
-      onValuesChanged: handleValuesChanged,
-      onValidate: handleValidate,
-      onSave: handleSave,
-      onCancel: handleCancel
-    }, /* @__PURE__ */ React18.createElement(Form.Content, null, /* @__PURE__ */ React18.createElement(Form.FieldSet, null), /* @__PURE__ */ React18.createElement(Form.Actions, null)));
-  } finally {
-    _effect.f();
+    onSave();
+  }, [
+    projection,
+    field,
+    view,
+    onSave
+  ]);
+  const handleCancel = useCallback14(() => {
+    onSave();
+    requestAnimationFrame(() => onCancel?.());
+  }, [
+    onSave
+  ]);
+  if (!fieldSchema) {
+    log2.warn("invalid format", {
+      props
+    }, {
+      F: __dxlog_file2,
+      L: 173,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return null;
   }
+  return /* @__PURE__ */ React17.createElement(Form.Root, {
+    key: field.id,
+    fieldMap,
+    autoFocus: true,
+    readonly,
+    schema: fieldSchema,
+    values: props,
+    exclude: propIsNotType,
+    sort: [
+      "property",
+      "format"
+    ],
+    onValuesChanged: handleValuesChanged,
+    onValidate: handleValidate,
+    onSave: handleSave,
+    onCancel: handleCancel
+  }, /* @__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
-import { useSignals as _useSignals19 } from "@preact-signals/safe-react/tracking";
+import { RegistryContext } from "@effect-atom/atom-react";
 import * as Array2 from "effect/Array";
 import * as Match2 from "effect/Match";
 import * as Option4 from "effect/Option";
 import * as Schema3 from "effect/Schema";
-import React19, { forwardRef as forwardRef3, useCallback as useCallback17, useImperativeHandle, useMemo as useMemo9, useState as useState7 } from "react";
-import { Filter as Filter2, Format as Format5, Query, QueryAST } from "@dxos/echo";
+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 { EchoSchema, isMutable, toJsonSchema } from "@dxos/echo/internal";
-import "@dxos/echo-db";
-import { invariant as invariant2 } from "@dxos/invariant";
+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 { mx as mx7, subtleHover as subtleHover2 } from "@dxos/react-ui-theme";
-import { FieldSchema, ProjectionModel, VIEW_FIELD_LIMIT, getTypenameFromQuery } from "@dxos/schema";
-var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
+import { FieldSchema, ProjectionModel, VIEW_FIELD_LIMIT, createEchoChangeCallback, getTypenameFromQuery } from "@dxos/schema";
+import { mx as mx6, osTranslations as osTranslations2, subtleHover as subtleHover2 } from "@dxos/ui-theme";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
 var listGrid = "grid grid-cols-[min-content_1fr_min-content_min-content_min-content]";
 var listItemGrid = "grid grid-cols-subgrid col-span-5";
 var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode = "schema", registry, readonly, showHeading = false, types, tags, onQueryChanged, onDelete }, forwardedRef) => {
-  var _effect = _useSignals19();
-  try {
-    const schemaReadonly = !isMutable(schema);
-    const { t } = useTranslation10(translationKey);
-    const projectionModel = useMemo9(() => {
-      const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-      return new ProjectionModel(jsonSchema, view.projection);
-    }, [
-      schema,
-      JSON.stringify(view.projection)
-    ]);
-    useImperativeHandle(forwardedRef, () => projectionModel, [
-      projectionModel
-    ]);
-    const [expandedField, setExpandedField] = useState7();
-    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);
-    }), Match2.orElse(() => void 0));
-    const viewSchema = useMemo9(() => {
-      const base = Schema3.Struct({
-        query: mode === "schema" ? Format5.URL.annotations({
-          title: "Record type"
-        }) : QueryAST.Query.annotations({
-          title: "Query"
-        })
-      });
-      if (mode === "tag") {
-        return Schema3.Struct({
-          ...base.fields,
-          target: Schema3.optional(Schema3.String.annotations({
-            title: "Target Queue"
-          }))
-        }).pipe(Schema3.mutable);
-      }
-      return base.pipe(Schema3.mutable);
-    }, [
-      mode
-    ]);
-    const viewValues = useMemo9(() => ({
-      query: mode === "schema" ? getTypenameFromQuery(view.query.ast) : view.query.ast,
-      target: queueTarget
-    }), [
-      mode,
-      view.query.ast,
-      queueTarget
-    ]);
-    const fieldMap = useMemo9(() => mode === "tag" ? customFields({
-      types,
-      tags
-    }) : void 0, [
-      mode,
-      types,
-      tags
-    ]);
-    const handleAdd = useCallback17(() => {
-      invariant2(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 129,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      const field = projectionModel.createFieldProjection();
-      setExpandedField(field.id);
-    }, [
-      schema,
-      projectionModel,
-      readonly
-    ]);
-    const handleUpdate = useCallback17((values) => {
-      requestAnimationFrame(() => {
-        const query = mode === "schema" ? Query.select(Filter2.typename(values.query)).ast : values.query;
-        onQueryChanged?.(query, values.target);
-      });
-    }, [
-      onQueryChanged,
+  const atomRegistry = useContext(RegistryContext);
+  const schemaReadonly = !isMutable(schema);
+  const { t } = useTranslation10(translationKey);
+  const projectionModel = useMemo8(() => {
+    const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
+    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
+    const model = new ProjectionModel({
+      registry: atomRegistry,
       view,
-      queueTarget,
-      mode
-    ]);
-    const handleDelete = useCallback17((fieldId) => {
-      invariant2(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 146,
-        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, {
-      valence: "info",
-      classNames: "mlb-cardSpacingBlock"
-    }, /* @__PURE__ */ React19.createElement(Callout.Title, null, t("system schema description"))), /* @__PURE__ */ React19.createElement(Form.Root, {
-      schema: viewSchema,
-      values: viewValues,
-      fieldMap,
-      autoSave: true,
-      onSave: handleUpdate
-    }, /* @__PURE__ */ React19.createElement(Form.FieldSet, null), /* @__PURE__ */ React19.createElement(FormFieldLabel, {
-      label: t("fields label"),
-      asChild: true
-    }), /* @__PURE__ */ React19.createElement(FieldList, {
-      schema,
-      view,
-      registry,
-      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"
-    })));
-  } finally {
-    _effect.f();
-  }
+      baseSchema: jsonSchema,
+      change
+    });
+    return model;
+  }, [
+    atomRegistry,
+    schema,
+    view
+  ]);
+  useImperativeHandle(forwardedRef, () => projectionModel, [
+    projectionModel
+  ]);
+  const queueTarget = Match2.value(view.query.ast).pipe(Match2.when({
+    type: "options"
+  }, ({ options }) => {
+    return Option4.fromNullable(options.queues).pipe(Option4.flatMap((queues) => Array2.head(queues)), Option4.getOrUndefined);
+  }), Match2.orElse(() => void 0));
+  const viewSchema = useMemo8(() => {
+    const base = Schema3.Struct({
+      query: mode === "schema" ? Format5.URL.annotations({
+        title: "Record type"
+      }) : QueryAST.Query.annotations({
+        title: "Query"
+      })
+    });
+    if (mode === "tag") {
+      return Schema3.Struct({
+        ...base.fields,
+        target: Schema3.optional(Schema3.String.annotations({
+          title: "Target Queue"
+        }))
+      }).pipe(Schema3.mutable);
+    }
+    return base.pipe(Schema3.mutable);
+  }, [
+    mode
+  ]);
+  const viewValues = useMemo8(() => ({
+    query: mode === "schema" ? getTypenameFromQuery(view.query.ast) : view.query.ast,
+    target: queueTarget
+  }), [
+    mode,
+    view.query.ast,
+    queueTarget
+  ]);
+  const fieldMap = useMemo8(() => mode === "tag" ? customFields({
+    types,
+    tags
+  }) : void 0, [
+    mode,
+    types,
+    tags
+  ]);
+  const handleUpdate = useCallback15((values) => {
+    requestAnimationFrame(() => {
+      const query = mode === "schema" ? Query.select(Filter2.typename(values.query)).ast : values.query;
+      onQueryChanged?.(query, values.target);
+    });
+  }, [
+    onQueryChanged,
+    view,
+    queueTarget,
+    mode
+  ]);
+  const handleDelete = useCallback15((fieldId) => {
+    invariant(!readonly, void 0, {
+      F: __dxlog_file3,
+      L: 155,
+      S: void 0,
+      A: [
+        "!readonly",
+        ""
+      ]
+    });
+    onDelete?.(fieldId);
+  }, [
+    onDelete,
+    readonly
+  ]);
+  return /* @__PURE__ */ React19.createElement("div", {
+    role: "none",
+    className: mx6(classNames)
+  }, schemaReadonly && !readonly && /* @__PURE__ */ React19.createElement(Callout.Root, {
+    valence: "info",
+    classNames: "mlb-cardSpacingBlock"
+  }, /* @__PURE__ */ React19.createElement(Callout.Title, null, t("system schema description"))), /* @__PURE__ */ React19.createElement(Form.Root, {
+    schema: viewSchema,
+    values: viewValues,
+    fieldMap,
+    autoSave: true,
+    onSave: handleUpdate
+  }, /* @__PURE__ */ React19.createElement(Form.FieldSet, null), /* @__PURE__ */ React19.createElement(FormFieldLabel, {
+    label: t("fields label"),
+    asChild: true
+  }), /* @__PURE__ */ React19.createElement(FieldList, {
+    schema,
+    view,
+    registry,
+    readonly,
+    showHeading,
+    onDelete: handleDelete
+  })));
 });
 var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDelete }) => {
-  var _effect = _useSignals19();
-  try {
-    const schemaReadonly = !isMutable(schema);
-    const { t } = useTranslation10(translationKey);
-    const projectionModel = useMemo9(() => {
-      const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-      return new ProjectionModel(jsonSchema, view.projection);
-    }, [
-      schema,
-      JSON.stringify(view.projection)
-    ]);
-    const [expandedField, setExpandedField] = useState7();
-    const handleToggleField = useCallback17((field) => {
-      setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
-    }, [
-      readonly
-    ]);
-    const handleDelete = useCallback17((fieldId) => {
-      invariant2(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 218,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      if (fieldId === expandedField) {
-        setExpandedField(void 0);
-      }
-      onDelete?.(fieldId);
-    }, [
-      expandedField,
-      onDelete,
-      readonly
-    ]);
-    const handleMove = useCallback17((fromIndex, toIndex) => {
-      invariant2(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 230,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
+  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 = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
+    const model = new ProjectionModel({
+      registry: atomRegistry,
+      view,
+      baseSchema: jsonSchema,
+      change
+    });
+    return model;
+  }, [
+    atomRegistry,
+    schema,
+    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);
+  }, [
+    readonly
+  ]);
+  const handleDelete = useCallback15((fieldId) => {
+    invariant(!readonly, void 0, {
+      F: __dxlog_file3,
+      L: 234,
+      S: void 0,
+      A: [
+        "!readonly",
+        ""
+      ]
+    });
+    if (fieldId === expandedField) {
+      setExpandedField(void 0);
+    }
+    onDelete?.(fieldId);
+  }, [
+    expandedField,
+    onDelete,
+    readonly
+  ]);
+  const handleMove = useCallback15((fromIndex, toIndex) => {
+    invariant(!readonly, void 0, {
+      F: __dxlog_file3,
+      L: 246,
+      S: void 0,
+      A: [
+        "!readonly",
+        ""
+      ]
+    });
+    Obj4.change(view, (v) => {
       const fields = [
-        ...view.projection.fields
+        ...v.projection.fields
       ];
       const [moved] = fields.splice(fromIndex, 1);
       fields.splice(toIndex, 0, moved);
-      view.projection.fields = fields;
-    }, [
-      view.projection.fields,
-      readonly
-    ]);
-    const handleClose = useCallback17(() => setExpandedField(void 0), []);
-    const handleHide = useCallback17((fieldId) => {
-      setExpandedField(void 0);
-      projectionModel.hideFieldProjection(fieldId);
-    }, [
-      projectionModel
-    ]);
-    const handleShow = useCallback17((property) => {
-      setExpandedField(void 0);
-      projectionModel.showFieldProjection(property);
-    }, [
-      projectionModel
-    ]);
-    return /* @__PURE__ */ React19.createElement(List2.Root, {
-      items: view.projection.fields,
-      isItem: Schema3.is(FieldSchema),
-      getId: (field) => field.id,
-      onMove: readonly ? void 0 : handleMove,
-      readonly
-    }, ({ items: fields }) => /* @__PURE__ */ React19.createElement(React19.Fragment, null, showHeading && /* @__PURE__ */ React19.createElement("h3", {
-      className: "text-sm"
-    }, t("field path label")), /* @__PURE__ */ React19.createElement("div", {
-      role: "list",
-      className: listGrid
-    }, fields?.map((field) => {
-      const hidden = field.visible === false;
-      return /* @__PURE__ */ React19.createElement(List2.Item, {
-        key: field.id,
-        item: field,
-        classNames: listItemGrid,
-        "aria-expanded": expandedField === field.id
-      }, /* @__PURE__ */ React19.createElement("div", {
-        role: "none",
-        className: mx7(subtleHover2, listItemGrid, "rounded-sm cursor-pointer min-bs-10")
-      }, /* @__PURE__ */ React19.createElement(List2.ItemDragHandle, {
-        disabled: readonly || schemaReadonly
-      }), /* @__PURE__ */ React19.createElement(List2.ItemTitle, {
-        classNames: hidden && "text-subdued",
-        onClick: () => handleToggleField(field)
-      }, field.path), /* @__PURE__ */ React19.createElement(List2.ItemButton, {
-        label: t(hidden ? "show field label" : "hide field label"),
-        "data-testid": hidden ? "show-field-button" : "hide-field-button",
-        icon: hidden ? "ph--eye-closed--regular" : "ph--eye--regular",
-        autoHide: false,
-        disabled: readonly || !hidden && projectionModel.fields.length <= 1,
-        onClick: () => hidden ? handleShow(field.path) : handleHide(field.id)
-      }), !readonly && /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(List2.ItemDeleteButton, {
-        label: t("delete field label"),
-        autoHide: false,
-        disabled: readonly || schemaReadonly || view.projection.fields.length <= 1,
-        onClick: () => handleDelete(field.id),
-        "data-testid": "field.delete"
-      }), /* @__PURE__ */ React19.createElement(IconButton4, {
-        iconOnly: true,
-        variant: "ghost",
-        label: t("toggle expand label", {
-          ns: "os"
-        }),
-        icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
-        onClick: () => handleToggleField(field),
-        "data-testid": "field.toggle"
-      }))), expandedField === field.id && !readonly && /* @__PURE__ */ React19.createElement("div", {
-        role: "none",
-        className: "col-span-5 mbs-1 mbe-1 border border-separator rounded-md"
-      }, /* @__PURE__ */ React19.createElement(FieldEditor, {
-        readonly: readonly || schemaReadonly,
-        registry,
-        projection: projectionModel,
-        field,
-        onSave: handleClose
-      })));
-    }))));
-  } finally {
-    _effect.f();
+      v.projection.fields = fields;
+    });
+  }, [
+    view,
+    readonly
+  ]);
+  const handleClose = useCallback15(() => setExpandedField(void 0), []);
+  const handleHide = useCallback15((fieldId) => {
+    setExpandedField(void 0);
+    projectionModel.hideFieldProjection(fieldId);
+  }, [
+    projectionModel
+  ]);
+  const handleShow = useCallback15((property) => {
+    setExpandedField(void 0);
+    projectionModel.showFieldProjection(property);
+  }, [
+    projectionModel
+  ]);
+  if (!viewSnapshot) {
+    return null;
   }
+  return /* @__PURE__ */ React19.createElement(List2.Root, {
+    items: viewSnapshot.projection.fields,
+    isItem: Schema3.is(FieldSchema),
+    getId: (field) => field.id,
+    onMove: readonly ? void 0 : handleMove,
+    readonly
+  }, ({ items: fields }) => /* @__PURE__ */ React19.createElement(React19.Fragment, null, showHeading && /* @__PURE__ */ React19.createElement("h3", {
+    className: "text-sm"
+  }, t("field path label")), /* @__PURE__ */ React19.createElement("div", {
+    role: "list",
+    className: listGrid
+  }, fields?.map((field) => {
+    const hidden = field.visible === false;
+    return /* @__PURE__ */ React19.createElement(List2.Item, {
+      key: field.id,
+      item: field,
+      classNames: listItemGrid,
+      "aria-expanded": expandedField === field.id
+    }, /* @__PURE__ */ React19.createElement("div", {
+      role: "none",
+      className: mx6(subtleHover2, listItemGrid, "rounded-sm cursor-pointer min-bs-10")
+    }, /* @__PURE__ */ React19.createElement(List2.ItemDragHandle, {
+      disabled: readonly || schemaReadonly
+    }), /* @__PURE__ */ React19.createElement(List2.ItemTitle, {
+      classNames: hidden && "text-subdued",
+      onClick: () => handleToggleField(field)
+    }, field.path), /* @__PURE__ */ React19.createElement(List2.ItemButton, {
+      label: t(hidden ? "show field label" : "hide field label"),
+      "data-testid": hidden ? "show-field-button" : "hide-field-button",
+      icon: hidden ? "ph--eye-closed--regular" : "ph--eye--regular",
+      autoHide: false,
+      disabled: readonly || !hidden && projectionModel.getFields().length <= 1,
+      onClick: () => hidden ? handleShow(field.path) : handleHide(field.id)
+    }), !readonly && /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(List2.ItemDeleteButton, {
+      label: t("delete field label"),
+      autoHide: false,
+      disabled: readonly || schemaReadonly || viewSnapshot.projection.fields.length <= 1,
+      onClick: () => handleDelete(field.id),
+      "data-testid": "field.delete"
+    }), /* @__PURE__ */ React19.createElement(IconButton4, {
+      iconOnly: true,
+      variant: "ghost",
+      label: t("toggle expand label", {
+        ns: osTranslations2
+      }),
+      icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
+      onClick: () => handleToggleField(field),
+      "data-testid": "field.toggle"
+    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React19.createElement("div", {
+      role: "none",
+      className: "col-span-5 mbs-1 mbe-1 border border-separator rounded-md"
+    }, /* @__PURE__ */ React19.createElement(FieldEditor, {
+      readonly: readonly || schemaReadonly,
+      registry,
+      projection: projectionModel,
+      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 }) => ({
   query: ({ type, readonly, label, getValue, onValueChange }) => {
-    const handleChange = useCallback17((query) => onValueChange(type, query.ast), [
+    const handleChange = useCallback15((query) => onValueChange(type, query.ast), [
       onValueChange
     ]);
     return /* @__PURE__ */ React19.createElement(Input13.Root, null, /* @__PURE__ */ React19.createElement(FormFieldLabel, {
@@ -2756,15 +2551,6 @@ var customFields = ({ types, tags }) => ({
 export {
   ArrayField,
   BooleanField,
-  ControlFrame,
-  ControlFrameItem,
-  ControlGroup,
-  ControlGroupButton,
-  ControlItem,
-  ControlItemInput,
-  ControlPage,
-  ControlSection,
-  ControlSectionHeading,
   FieldEditor,
   Form,
   FormFieldErrorBoundary,
@@ -2777,12 +2563,12 @@ export {
   RefField,
   SelectField,
   SelectOptionField,
+  Settings,
   TextAreaField,
   TextField,
   TupleField,
   ViewEditor,
   cellClassesForFieldType,
-  controlItemClasses,
   formatForDisplay,
   formatForEditing,
   getDefaultValue,
@@ -2791,13 +2577,12 @@ export {
   omitId,
   parseValue,
   pathNotUniqueError,
+  setValueEchoAware,
   translations,
   useFormContext,
   useFormFieldState,
   useFormHandler,
   useFormValues,
-  useKeyHandler,
-  useQueryRefOptions,
-  useRefQueryOptions
+  useKeyHandler
 };
 //# sourceMappingURL=index.mjs.map