@dxos/react-ui-form 0.10.0 → 0.11.0

package/src/components/Form/FormField/fields/SelectField/create-select-field.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { invariant } from '@dxos/invariant';
+import { Select } from '@dxos/react-ui';
+
+import { type FormFieldRenderer, type FormFieldRendererProps } from '#types';
+
+import { FormRow } from '../../FormRow';
+import { type SelectFieldOption } from './SelectField';
+
+// Kept out of `SelectField.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+export type CreateSelectFieldOptions = {
+  /** Options to display. Strings are used as both value and label. */
+  options: ReadonlyArray<string | SelectFieldOption>;
+  /** Label for the sentinel option that maps to `undefined`. Defaults to `'Default'`. Pass `null` to omit. */
+  defaultLabel?: string | null;
+};
+
+/**
+ * Factory for a `fieldMap` entry (keyed by JSON path) that renders a Select over a fixed list of
+ * options, with an optional sentinel mapping to `undefined`. Use for fields whose choices come from a
+ * runtime list rather than the schema (e.g. available model ids).
+ */
+export const createSelectField = ({
+  options,
+  defaultLabel = 'Default',
+}: CreateSelectFieldOptions): FormFieldRenderer => {
+  const normalized = options.map((option) => (typeof option === 'string' ? { value: option, label: option } : option));
+  const hasDefault = defaultLabel !== null;
+  // The sentinel maps to `undefined`. Radix forbids an empty-string `Select.Item` value, so use a
+  // non-empty placeholder; reserved (a real option with this value would be unrepresentable).
+  const sentinel = '__default__';
+  invariant(
+    !normalized.some((option) => option.value === sentinel),
+    `createSelectField: option value '${sentinel}' is reserved.`,
+  );
+
+  return ({ type, readonly, onValueChange, ...props }: FormFieldRendererProps<string | undefined>) => (
+    <FormRow<string>
+      readonly={readonly}
+      renderStatic={(value) => (
+        <p className='truncate min-w-0'>
+          {normalized.find((option) => option.value === value)?.label ?? String(value ?? '')}
+        </p>
+      )}
+      {...props}
+    >
+      {({ value }) => (
+        <Select.Root
+          disabled={!!readonly}
+          value={value ?? sentinel}
+          onValueChange={(next) => onValueChange(type, hasDefault && next === sentinel ? undefined : next)}
+        >
+          <Select.TriggerButton classNames='w-full' disabled={!!readonly} />
+          {normalized.length > 0 && (
+            <Select.Portal>
+              <Select.Content>
+                <Select.Viewport>
+                  {hasDefault && <Select.Option value={sentinel}>{defaultLabel}</Select.Option>}
+                  {normalized.map((option) => (
+                    <Select.Option key={option.value} value={option.value}>
+                      {option.label ?? option.value}
+                    </Select.Option>
+                  ))}
+                </Select.Viewport>
+                <Select.Arrow />
+              </Select.Content>
+            </Select.Portal>
+          )}
+        </Select.Root>
+      )}
+    </FormRow>
+  );
+};

package/src/components/Form/FormField/fields/SelectField/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './create-select-field';
+
 export * from './SelectField';

package/src/components/Form/FormField/fields/SelectOptionField/SelectOptionField.tsx

@@ -9,7 +9,8 @@ import { PublicKey } from '@dxos/keys';
 import { type ChromaticPalette, IconButton, Input, Tag, ToggleIconButton, useTranslation } from '@dxos/react-ui';
 import { OrderedList } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
-import { hues, osTranslations } from '@dxos/ui-theme';
+import { osTranslations } from '@dxos/ui-theme';
+import { hues } from '@dxos/ui-types';
 
 import { translationKey } from '#translations';
 import { type FormFieldRendererProps } from '#types';

package/src/components/Form/FormFieldSet/FormFieldSetContainer.tsx

@@ -2,7 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
-import React, { type PropsWithChildren, useState } from 'react';
+import React, { Children, type PropsWithChildren, useState } from 'react';
 
 import { type ThemedClassName, ToggleIconButton, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
@@ -10,8 +10,7 @@ import { mx } from '@dxos/ui-theme';
 import { translationKey } from '#translations';
 
 import { formTheme } from '../Form.theme';
-import { FormFieldHeader } from '../FormField/FormFieldHeader';
-import { type FormFieldPresentation } from '../FormField/presentation';
+import { FormFieldHeader, type FormFieldPresentation } from '../FormField';
 
 const styles = formTheme.styles();
 
@@ -47,7 +46,10 @@ export const FormFieldSetContainer = ({
   const { t } = useTranslation(translationKey);
   // TODO(burdon): Generalize collapse state (cf. useSelection in react-ui-attention, plugin-markdown cursor state).
   const [collapsed, setCollapsed] = useState(false);
-  const showBody = !(collapsible && collapsed);
+  // An empty object/array renders no sub-fields, so there is nothing to collapse — offering the
+  // toggle (and the click target on the header) would be a control that does nothing.
+  const canCollapse = collapsible && Children.toArray(children).length > 0;
+  const showBody = !(canCollapse && collapsed);
 
   const content = (
     <>
@@ -58,29 +60,29 @@ export const FormFieldSetContainer = ({
           readonly={readonly}
           classNames='pl-2'
           actions={
-            collapsible ? (
+            canCollapse ? (
               <ToggleIconButton
                 active={!collapsed}
                 classNames='px-1 mr-0.5'
                 variant='ghost'
-                density='xs'
+                density='sm'
                 iconOnly
                 icon='ph--caret-right--regular'
                 label={t(collapsed ? 'expand-fields.label' : 'collapse-fields.label')}
               />
             ) : undefined
           }
-          onClick={collapsible ? () => setCollapsed((value) => !value) : undefined}
+          onClick={canCollapse ? () => setCollapsed((value) => !value) : undefined}
         />
       )}
-      {showBody && (collapsible ? <div className={styles.fieldSetBody()}>{children}</div> : children)}
+      {showBody && (canCollapse ? <div className={styles.fieldSetBody()}>{children}</div> : children)}
     </>
   );
 
   // Nested groups render inside an indented, bordered container with a collapse toggle. A non-collapsible
   // group only materializes a wrapper when `classNames` is supplied — otherwise the body flows straight
   // into the parent grid (the default, grid-transparent behavior).
-  if (collapsible) {
+  if (canCollapse) {
     return (
       <div className={styles.fieldSetBoxOuter()}>
         <div className={styles.fieldSetBox({ class: mx(classNames) })}>{content}</div>

package/src/components/Form/FormLayout/FormLayout.test.ts

@@ -8,7 +8,7 @@ import { describe, test } from 'vitest';
 
 import { Annotation } from '@dxos/echo';
 
-import { resolveLayoutField } from './FormLayout';
+import { resolveLayoutField } from './resolve-layout-field';
 
 const Place = Schema.Struct({
   name: Schema.optional(Schema.String),

package/src/components/Form/FormLayout/FormLayout.tsx

@@ -4,7 +4,6 @@
 
 import * as Option from 'effect/Option';
 import * as Schema from 'effect/Schema';
-import * as SchemaAST from 'effect/SchemaAST';
 import * as String from 'effect/String';
 import React, { Fragment, useMemo } from 'react';
 
@@ -19,6 +18,7 @@ import { useFormContext, useFormFieldState } from '../../../hooks';
 import { formTheme } from '../Form.theme';
 import { FormField, FormFieldErrorBoundary, FormFieldLabel, type FormFieldProps, presentationFor } from '../FormField';
 import { type LayoutNode, LayoutParseError, parseLayout } from './parser';
+import { resolveLayoutField } from './resolve-layout-field';
 
 const FORM_LAYOUT_NAME = 'Form.Layout';
 
@@ -137,91 +137,6 @@ const RenderNode = ({ node, schema, basePath, ...props }: RenderNodeProps) => {
   );
 };
 
-export type ResolvedLayoutField = {
-  /** Resolved leaf AST node for the field. */
-  type: SchemaAST.AST;
-  /** Path segments (dotted names split on `.`). */
-  segments: string[];
-  /** Last path segment; used to derive the field label when there is no `title` annotation. */
-  leafName: string;
-  /** Resolved `title` annotation for the field, if any. */
-  title?: string;
-  /**
-   * Set when the field resolves to a nested struct carrying a `LabelAnnotation` —
-   * the type literal whose computed label should render in place of the struct's
-   * sub-fields. Undefined for ordinary (non-auto-labelled) fields.
-   */
-  labelType?: SchemaAST.AST;
-  /** Whether the resolved property is required (non-optional). */
-  required: boolean;
-};
-
-/**
- * Walks a dotted path of property names through nested struct ASTs, returning the
- * leaf `PropertySignature` (or `undefined` if any segment is missing).
- */
-const resolvePropertySignature = (ast: SchemaAST.AST, segments: string[]): SchemaAST.PropertySignature | undefined => {
-  let node: SchemaAST.AST = ast;
-  for (let index = 0; index < segments.length; index++) {
-    const typeLiteral = SchemaEx.findNode(node, SchemaAST.isTypeLiteral);
-    if (!typeLiteral) {
-      return undefined;
-    }
-    const prop = SchemaAST.getPropertySignatures(typeLiteral).find(
-      (p) => globalThis.String(p.name) === segments[index],
-    );
-    if (!prop) {
-      return undefined;
-    }
-    if (index === segments.length - 1) {
-      return prop;
-    }
-    node = prop.type;
-  }
-
-  return undefined;
-};
-
-/**
- * Resolves a (possibly dotted) layout field name against a schema.
- * - `origin.code` drills through nested structs to the leaf field.
- * - A name resolving to a nested struct with a `LabelAnnotation` is flagged via
- *   `labelType` so the layout can auto-convert it to a single read-only label.
- * Returns `undefined` when the name does not resolve to a property.
- */
-export const resolveLayoutField = (schema: Schema.Schema<any>, name: string): ResolvedLayoutField | undefined => {
-  const segments = name.split('.');
-  const prop = resolvePropertySignature(schema.ast, segments);
-  if (!prop) {
-    return undefined;
-  }
-
-  // Normalized leaf type (optional unwrapped, refinements stripped, signature-level
-  // annotations merged) — matches how `getProperties` feeds `FormField`.
-  const { type: baseType } = SchemaEx.getBaseType(prop);
-  const type =
-    prop.annotations && Reflect.ownKeys(prop.annotations).length > 0
-      ? ({ ...baseType, annotations: { ...baseType.annotations, ...prop.annotations } } as SchemaAST.AST)
-      : baseType;
-
-  const title = SchemaEx.getAnnotation<string>(SchemaAST.TitleAnnotationId)(type);
-
-  // Label detection reads the *raw* property type: `SchemaEx.getBaseType`'s `encodedBoundAST`
-  // strips annotations from non-keyword inner types (e.g. nested structs), which would
-  // drop the `LabelAnnotation` we rely on here.
-  const labelType = SchemaEx.findNode(prop.type, SchemaAST.isTypeLiteral);
-  const labelled = labelType != null && Option.isSome(Annotation.LabelAnnotation.getFromAst(labelType));
-
-  return {
-    type,
-    segments,
-    leafName: segments[segments.length - 1],
-    title,
-    labelType: labelled ? labelType : undefined,
-    required: !prop.isOptional,
-  };
-};
-
 type LabelFieldProps = {
   schema: Schema.Schema<any>;
   label: string;

package/src/components/Form/FormLayout/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
+export { type ResolvedLayoutField, resolveLayoutField } from './resolve-layout-field';
+
 export { FormLayout, type FormLayoutProps } from './FormLayout';
 export { type LayoutNode, LayoutParseError, parseLayout } from './parser';

package/src/components/Form/FormLayout/resolve-layout-field.ts

@@ -0,0 +1,98 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Option from 'effect/Option';
+import * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
+
+import { Annotation } from '@dxos/echo';
+import { SchemaEx } from '@dxos/effect';
+
+// Kept out of `FormLayout.tsx`: react-refresh only fast-refreshes a module whose
+// exports are all components, so values exported beside them force a full page reload on every edit.
+
+export type ResolvedLayoutField = {
+  /** Resolved leaf AST node for the field. */
+  type: SchemaAST.AST;
+  /** Path segments (dotted names split on `.`). */
+  segments: string[];
+  /** Last path segment; used to derive the field label when there is no `title` annotation. */
+  leafName: string;
+  /** Resolved `title` annotation for the field, if any. */
+  title?: string;
+  /**
+   * Set when the field resolves to a nested struct carrying a `LabelAnnotation` —
+   * the type literal whose computed label should render in place of the struct's
+   * sub-fields. Undefined for ordinary (non-auto-labelled) fields.
+   */
+  labelType?: SchemaAST.AST;
+  /** Whether the resolved property is required (non-optional). */
+  required: boolean;
+};
+
+/**
+ * Walks a dotted path of property names through nested struct ASTs, returning the
+ * leaf `PropertySignature` (or `undefined` if any segment is missing).
+ */
+const resolvePropertySignature = (ast: SchemaAST.AST, segments: string[]): SchemaAST.PropertySignature | undefined => {
+  let node: SchemaAST.AST = ast;
+  for (let index = 0; index < segments.length; index++) {
+    const typeLiteral = SchemaEx.findNode(node, SchemaAST.isTypeLiteral);
+    if (!typeLiteral) {
+      return undefined;
+    }
+    const prop = SchemaAST.getPropertySignatures(typeLiteral).find(
+      (p) => globalThis.String(p.name) === segments[index],
+    );
+    if (!prop) {
+      return undefined;
+    }
+    if (index === segments.length - 1) {
+      return prop;
+    }
+    node = prop.type;
+  }
+
+  return undefined;
+};
+
+/**
+ * Resolves a (possibly dotted) layout field name against a schema.
+ * - `origin.code` drills through nested structs to the leaf field.
+ * - A name resolving to a nested struct with a `LabelAnnotation` is flagged via
+ *   `labelType` so the layout can auto-convert it to a single read-only label.
+ * Returns `undefined` when the name does not resolve to a property.
+ */
+export const resolveLayoutField = (schema: Schema.Schema<any>, name: string): ResolvedLayoutField | undefined => {
+  const segments = name.split('.');
+  const prop = resolvePropertySignature(schema.ast, segments);
+  if (!prop) {
+    return undefined;
+  }
+
+  // Normalized leaf type (optional unwrapped, refinements stripped, signature-level
+  // annotations merged) — matches how `getProperties` feeds `FormField`.
+  const { type: baseType } = SchemaEx.getBaseType(prop);
+  const type =
+    prop.annotations && Reflect.ownKeys(prop.annotations).length > 0
+      ? ({ ...baseType, annotations: { ...baseType.annotations, ...prop.annotations } } as SchemaAST.AST)
+      : baseType;
+
+  const title = SchemaEx.getAnnotation<string>(SchemaAST.TitleAnnotationId)(type);
+
+  // Label detection reads the *raw* property type: `SchemaEx.getBaseType`'s `encodedBoundAST`
+  // strips annotations from non-keyword inner types (e.g. nested structs), which would
+  // drop the `LabelAnnotation` we rely on here.
+  const labelType = SchemaEx.findNode(prop.type, SchemaAST.isTypeLiteral);
+  const labelled = labelType != null && Option.isSome(Annotation.LabelAnnotation.getFromAst(labelType));
+
+  return {
+    type,
+    segments,
+    leafName: segments[segments.length - 1],
+    title,
+    labelType: labelled ? labelType : undefined,
+    required: !prop.isOptional,
+  };
+};

package/src/components/ObjectForm/ObjectForm.stories.tsx

@@ -3,18 +3,28 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { expect, waitFor, within } from 'storybook/test';
 
 import { Filter, Obj, Ref, Tag } from '@dxos/echo';
-import { useQuery } from '@dxos/react-client/echo';
+import { useObject, useQuery } from '@dxos/echo-react';
+import { random } from '@dxos/random';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { Toolbar } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Person } from '@dxos/types';
 
 import { translations } from '#translations';
 
+import { TestLayout } from '../../testing';
 import { ObjectForm } from './ObjectForm';
 
+// Seed so the first background mutation deterministically targets `fullName` (moving it off 'Alice Carroll'), which
+// the play asserts. Seeded inside the component (below) rather than at module level: `@dxos/random` is a shared
+// singleton, and the full storybook run imports every story up front and runs them in sequence, so a module-level
+// seed gets consumed by other stories before this story's first tick.
+const REACTIVE_SEED = 42;
+
 const DefaultStory = () => {
   const { space } = useClientStory();
   const [person] = useQuery(space?.db, Filter.type(Person.Person));
@@ -30,7 +40,7 @@ const meta = {
   render: DefaultStory,
   decorators: [
     withTheme(),
-    withLayout({ layout: 'column', classNames: 'p-2', scroll: true }),
+    withLayout({ classNames: 'p-2', scroll: true }),
     withClientProvider({
       types: [Person.Person, Tag.Tag],
       createIdentity: true,
@@ -60,3 +70,83 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+/**
+ * Exercises the reactive companion form against a live ECHO object. The toolbar mutates the object's fields in the
+ * background (outside the form); because `ObjectForm` subscribes via `useObject`, those external changes appear in the
+ * inputs immediately. Editing a field holds your (possibly invalid) draft locally without snapping back, while the
+ * other fields keep updating from the background mutations.
+ */
+const ReactiveStory = () => {
+  const { space } = useClientStory();
+  const [person] = useQuery(space?.db, Filter.type(Person.Person));
+  // Reactive snapshot for the JSON panel: reflects both background mutations and the form's own writes, so it shows
+  // whether a form edit reaches the object immediately.
+  const [snapshot] = useObject(person);
+  const [running, setRunning] = useState(true);
+
+  const mutate = useCallback(() => {
+    if (!person) {
+      return;
+    }
+    Obj.update(person, (person) => {
+      if (random.datatype.boolean()) {
+        person.fullName = random.person.fullName();
+      } else {
+        person.jobTitle = random.person.jobTitle();
+      }
+    });
+  }, [person]);
+
+  useEffect(() => {
+    if (!running || !person) {
+      return;
+    }
+    // Seed here — the mounted component is the RNG's sole consumer during its test — so the first tick is deterministic.
+    random.seed(REACTIVE_SEED);
+    const interval = setInterval(mutate, 1000);
+    return () => clearInterval(interval);
+  }, [running, person, mutate]);
+
+  if (!person) {
+    return <></>;
+  }
+
+  return (
+    <TestLayout json={snapshot}>
+      <div className='flex flex-col gap-2'>
+        <Toolbar.Root>
+          <Toolbar.IconButton
+            icon={running ? 'ph--pause--regular' : 'ph--play--regular'}
+            label={running ? 'Stop background mutations' : 'Start background mutations'}
+            onClick={() => setRunning((value) => !value)}
+          />
+          <Toolbar.IconButton
+            icon='ph--shuffle--regular'
+            label='Mutate a random field once'
+            disabled={running}
+            onClick={mutate}
+          />
+        </Toolbar.Root>
+        <ObjectForm object={person} type={Person.Person} />
+      </div>
+    </TestLayout>
+  );
+};
+
+export const Reactive: Story = {
+  render: () => <ReactiveStory />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // The form initially reflects the live object (generous timeout: the client provider creates the identity/space
+    // asynchronously, which is slow under full-suite browser load).
+    await canvas.findByDisplayValue('Alice Carroll', {}, { timeout: 15_000 });
+
+    // The first background tick mutates `fullName` outside the form; the form reflects it reactively, so the initial
+    // value disappears. `waitFor` re-runs the selector until the assertion holds.
+    await waitFor(() => expect(canvas.queryByDisplayValue('Alice Carroll')).not.toBeInTheDocument(), {
+      timeout: 5_000,
+    });
+  },
+};

package/src/components/ObjectForm/ObjectForm.tsx

@@ -2,9 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Schema from 'effect/Schema';
 import React, { useCallback, useMemo } from 'react';
 
 import { Obj, Ref, Tag, Type } from '@dxos/echo';
+import { useObject } from '@dxos/echo-react';
 import { SchemaEx } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { HuePicker } from '@dxos/react-ui-pickers';
@@ -12,20 +14,36 @@ import { HuePicker } from '@dxos/react-ui-pickers';
 import { translationKey } from '#translations';
 import { type FormFieldMap } from '#types';
 
+import { omitId } from '../../util';
 import { Form, META_TAGS_KEY, withMetaTags } from '../Form';
 
 export type ObjectFormProps = {
   type: Type.AnyEntity;
   object: Obj.Unknown;
+  /**
+   * Optional schema override for the rendered fields, e.g. a projection of `type`'s schema
+   * (`Type.getSchema(T).pipe(Schema.pick(...))`). Values are still read from and written back to
+   * `object` by path, so the picked fields must be paths on `object`. Defaults to `type`'s schema.
+   */
+  schema?: Schema.Schema.AnyNoContext;
+  /** Render the meta-tags field. Defaults to `true`. */
+  showTags?: boolean;
 };
 
-export const ObjectForm = ({ object, type }: ObjectFormProps) => {
+export const ObjectForm = ({ object, type, schema, showTags = true }: ObjectFormProps) => {
   const db = Obj.getDatabase(object);
+  // Subscribe to the object so external/remote mutations re-render the form: ECHO reactivity is atom-based, so
+  // reading the raw object during render does not establish a subscription. `snapshot` is a fresh value on change.
+  const [snapshot] = useObject(object);
   const meta = Obj.getMeta(object);
   // `meta.tags` already holds `Ref<Tag>`s (materialized by the database handler).
   const tags = [...meta.tags];
-  const values = useMemo(() => ({ [META_TAGS_KEY]: tags, ...object }), [object, tags]);
-  const formSchema = useMemo(() => withMetaTags(Type.getSchema(type)), [type]);
+  const values = useMemo(() => ({ [META_TAGS_KEY]: tags, ...snapshot }), [snapshot, tags]);
+  const formSchema = useMemo(() => {
+    const base = schema ?? Type.getSchema(type);
+    // `withMetaTags` also drops `id`; keep it dropped when tags are omitted.
+    return showTags ? withMetaTags(base) : omitId(base);
+  }, [schema, type, showTags]);
 
   const handleCreate = useCallback((type: Type.AnyEntity, values: any) => {
     invariant(db);
@@ -79,7 +97,7 @@ export const ObjectForm = ({ object, type }: ObjectFormProps) => {
   return (
     <Form.Root
       schema={formSchema}
-      defaultValues={values}
+      values={values}
       createTypename={Type.getTypename(Tag.Tag)}
       createOptionIcon='ph--plus--regular'
       createOptionLabel={['add-tag.label', { ns: translationKey }]}

package/src/components/ObjectPicker/ObjectPicker.stories.tsx

@@ -8,8 +8,8 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
 import { Filter, Obj, Type } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { random } from '@dxos/random';
-import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { Button } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';

package/src/components/ObjectPicker/ObjectPicker.tsx

@@ -3,9 +3,9 @@
 //
 
 import type * as Schema from 'effect/Schema';
-import React, { type KeyboardEvent, forwardRef, useCallback, useState } from 'react';
+import React, { type KeyboardEvent, useCallback, useState } from 'react';
 
-import { Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Popover, type ThemedClassName, composable, useTranslation } from '@dxos/react-ui';
 import { Combobox } from '@dxos/react-ui-list';
 import { useSearchListResults } from '@dxos/react-ui-search';
 
@@ -31,7 +31,7 @@ export type ObjectPickerContentProps = ThemedClassName<
   }
 >;
 
-const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>(
+const ObjectPickerContent = composable<HTMLDivElement, ObjectPickerContentProps>(
   (
     {
       options,

package/src/components/ObjectProperties/ObjectProperties.stories.tsx

@@ -8,8 +8,8 @@ import React, { useEffect } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
 import { Annotation, DXN, Filter, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/Annotation';
-import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { Panel } from '@dxos/react-ui';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';

package/src/components/ObjectProperties/ObjectProperties.tsx

@@ -30,7 +30,13 @@ export const ObjectProperties = composable<HTMLDivElement, ObjectPropertiesProps
     const meta = Obj.getMeta(object);
     // `meta.tags` already holds `Ref<Tag>`s (materialized by the database handler).
     const tags = [...meta.tags];
-    const values = useMemo(() => ({ [META_TAGS_KEY]: tags, ...object }), [object, tags]);
+    const values = useMemo(
+      () => ({
+        [META_TAGS_KEY]: tags,
+        ...object,
+      }),
+      [object, tags],
+    );
 
     // Obj.getType fails for database-registered (dynamic) schemas due to DXN mismatch;
     // useType queries by the object's stored type URI, resolving both static and dynamic schemas.

package/src/components/ObjectTree/ObjectTree.stories.tsx

@@ -40,7 +40,7 @@ const value: ConfigProto = {
         subductionReplicator: true,
         signaling: true,
       },
-      servicesMode: Runtime.Client.ServicesMode.SHARED_WORKER,
+      servicesMode: Runtime.Client.ServicesMode.DEDICATED_WORKER,
       enableSnapshots: false,
       snapshotInterval: 60_000,
     },

package/src/components/RefEditor/RefEditor.stories.tsx

@@ -6,8 +6,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { Fragment, useState } from 'react';
 
 import { type Database, Filter, Obj } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { random } from '@dxos/random';
-import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
@@ -145,3 +145,11 @@ export const WithEmail: Story = {
     value: 'someone@example.com ',
   },
 };
+
+export const EmailModeWithValues: Story = {
+  args: {
+    mode: 'email',
+    activateOnTyping: true,
+    value: 'Alice Smith <alice@example.com>, bob@example.com, ',
+  },
+};