@dxos/react-ui-form 0.9.0 → 0.9.1-staging.ee54ba693a

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

@@ -0,0 +1,140 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Option from 'effect/Option';
+import * as SchemaAST from 'effect/SchemaAST';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { Input, type TextInputProps } from '@dxos/react-ui';
+import { safeParseFloat } from '@dxos/util';
+
+import { type FormFieldRendererProps } from '#types';
+
+import { FormRow } from '../../FormRow';
+
+/**
+ * Extracts numeric constraints (`minimum`/`maximum` bounds and whether the value must be an integer)
+ * by walking the chain of Refinement ASTs and reading each one's JSON schema annotation (e.g. produced
+ * by `Schema.between` / `Schema.int`). Returns empty constraints when none are declared.
+ */
+export const getNumericConstraints = (ast: SchemaAST.AST): { min?: number; max?: number; integer: boolean } => {
+  let node: SchemaAST.AST | undefined = ast;
+  let min: number | undefined;
+  let max: number | undefined;
+  let integer = false;
+  // Nested refinements (e.g. `Schema.int()` + `Schema.between()`) each carry their own JSON schema
+  // fragment, so accumulate across the chain rather than reading only the outermost node.
+  while (node && SchemaAST.isRefinement(node)) {
+    const jsonSchema = Option.getOrUndefined(SchemaAST.getJSONSchemaAnnotation(node));
+    if (jsonSchema != null) {
+      // Stacked refinements intersect: keep the strictest bound (largest min, smallest max).
+      if ('minimum' in jsonSchema && typeof jsonSchema.minimum === 'number') {
+        min = min === undefined ? jsonSchema.minimum : Math.max(min, jsonSchema.minimum);
+      }
+      if ('maximum' in jsonSchema && typeof jsonSchema.maximum === 'number') {
+        max = max === undefined ? jsonSchema.maximum : Math.min(max, jsonSchema.maximum);
+      }
+      if (
+        ('type' in jsonSchema && jsonSchema.type === 'integer') ||
+        ('multipleOf' in jsonSchema && jsonSchema.multipleOf === 1)
+      ) {
+        integer = true;
+      }
+    }
+    node = node.from;
+  }
+  return { min, max, integer };
+};
+
+export const NumberField = ({
+  type,
+  readonly,
+  placeholder,
+  getValue,
+  onValueChange,
+  onBlur,
+  ...props
+}: FormFieldRendererProps<number>) => {
+  const { min, max, integer } = getNumericConstraints(type);
+
+  // Clamp to the declared bounds (and round when integer) so the committed value respects the schema's
+  // natural limits — `<input type="number">`'s min/max only constrain the spinner, not typed input.
+  const clamp = useCallback(
+    (n: number) => {
+      let value = integer ? Math.round(n) : n;
+      if (min !== undefined) {
+        value = Math.max(min, value);
+      }
+      if (max !== undefined) {
+        value = Math.min(max, value);
+      }
+      return value;
+    },
+    [min, max, integer],
+  );
+
+  // Track raw string input so the user can clear the field before typing a new number.
+  // We only commit to onValueChange when the raw string parses to a valid number.
+  const [raw, setRaw] = useState<string>(() => {
+    const v = getValue();
+    return v !== undefined ? String(v) : '';
+  });
+
+  // Sync display when an external change updates the committed value (e.g. reactive form
+  // calculations). Only overwrite raw when the external value differs from what raw parses
+  // to, preserving partial edits like "1." which correctly parse to 1.
+  const externalValue = getValue();
+  useEffect(() => {
+    if (externalValue !== safeParseFloat(raw)) {
+      setRaw(externalValue !== undefined ? String(externalValue) : '');
+    }
+  }, [externalValue]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleChange = useCallback<NonNullable<TextInputProps['onChange']>>(
+    (event) => {
+      const value = event.target.value;
+      setRaw(value);
+      const parsed = safeParseFloat(value);
+      if (parsed !== undefined) {
+        onValueChange(type, clamp(parsed));
+      }
+    },
+    [type, onValueChange, clamp],
+  );
+
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLElement>) => {
+      const parsed = safeParseFloat(raw);
+      if (parsed === undefined) {
+        // The field was left empty or invalid; reset to the last committed value.
+        const committed = getValue();
+        setRaw(committed !== undefined ? String(committed) : '');
+      } else {
+        // Reflect the clamped value even when it equals the previously committed one (so `externalValue`
+        // doesn't change), otherwise the input keeps showing the out-of-range text the user typed.
+        setRaw(String(clamp(parsed)));
+      }
+      onBlur(event);
+    },
+    [raw, getValue, onBlur, clamp],
+  );
+
+  return (
+    <FormRow<number> readonly={readonly} getValue={getValue} {...props}>
+      {() => (
+        <Input.TextInput
+          type='number'
+          disabled={!!readonly}
+          placeholder={placeholder}
+          value={raw}
+          min={min}
+          max={max}
+          step={integer ? 1 : undefined}
+          onChange={handleChange}
+          onBlur={handleBlur}
+        />
+      )}
+    </FormRow>
+  );
+};

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

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './NumberField';

package/src/components/Form/FormField/fields/PasswordField/PasswordField.stories.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { Format } from '@dxos/echo';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { TestLayout } from '../../../../../testing';
+import { Form } from '../../../Form';
+
+const schema = Schema.Struct({
+  name: Schema.String.annotations({ title: 'Name' }).pipe(Format.FormatAnnotation.set(Format.TypeFormat.Password)),
+}).pipe(Schema.mutable);
+
+type Values = Schema.Schema.Type<typeof schema>;
+
+const DefaultStory = () => {
+  const [values, setValues] = useState<Values>({ name: 'Alice' });
+  return (
+    <TestLayout json={values}>
+      <Form.Root
+        schema={schema}
+        values={values}
+        onValuesChanged={(values) => setValues((prev) => ({ ...prev, ...values }))}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/FormField/PasswordField',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen', translations },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,41 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Input, type TextInputProps } from '@dxos/react-ui';
+
+import { type FormFieldRendererProps } from '#types';
+
+import { FormRow } from '../../FormRow';
+
+export const PasswordField = ({
+  type,
+  readonly,
+  placeholder,
+  onBlur,
+  onValueChange,
+  ...props
+}: FormFieldRendererProps<string>) => {
+  const handleChange = useCallback<NonNullable<TextInputProps['onChange']>>(
+    (event) => onValueChange(type, event.target.value),
+    [type, onValueChange],
+  );
+
+  return (
+    <FormRow<string> readonly={readonly} {...props}>
+      {({ value = '' }) => (
+        <Input.TextInput
+          type='password'
+          noAutoFill
+          disabled={!!readonly}
+          placeholder={placeholder}
+          value={value}
+          onBlur={onBlur}
+          onChange={handleChange}
+        />
+      )}
+    </FormRow>
+  );
+};

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

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './PasswordField';

package/src/components/Form/{fields → FormField/fields/RefField}/InlineRefField.tsx

@@ -10,12 +10,14 @@ import { useType as defaultUseType } from '@dxos/echo-react';
 import { ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/Annotation';
 import { SchemaEx } from '@dxos/effect';
 import { DXN, URI } from '@dxos/keys';
-import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
+import { IconButton, Input, useTranslation } from '@dxos/react-ui';
 
 import { translationKey } from '#translations';
 
-import { Form, omitId } from '../Form';
-import { FormFieldLabel } from '../FormFieldComponent';
+import { omitId } from '../../../../../util';
+import { FormContent, FormFieldSetController, FormRoot } from '../../../FormControls';
+import { FormFieldLabel } from '../../FormRow';
+import { presentationFor } from '../../presentation';
 import { type RefFieldProps } from './RefField';
 
 /**
@@ -33,7 +35,8 @@ export const InlineRefField = (props: RefFieldProps) => {
     readonly,
     label,
     jsonPath,
-    layout,
+    presentation,
+    required,
     db,
     getValue,
     onValueChange,
@@ -41,6 +44,7 @@ export const InlineRefField = (props: RefFieldProps) => {
     useType = defaultUseType,
   } = props;
   const { t } = useTranslation(translationKey);
+  const resolved = presentationFor(presentation);
 
   const reference = getValue() as Ref.Ref<any> | undefined;
   const typename = useMemo(
@@ -66,16 +70,19 @@ export const InlineRefField = (props: RefFieldProps) => {
 
   return (
     <Input.Root>
-      {layout !== 'inline' && <FormFieldLabel readonly={readonly} label={label} path={jsonPath} />}
+      {resolved.showLabel && <FormFieldLabel readonly={readonly} required={required} label={label} path={jsonPath} />}
       {reference ? (
         <InlineForm reference={reference} db={db} readonly={readonly} useType={useType} />
       ) : (
         !readonly &&
         onCreate && (
-          <Button classNames='w-full gap-form-gap' disabled={!createType || !db} onClick={() => void handleCreate()}>
-            <Icon icon='ph--plus--regular' size={4} />
-            <span>{label || t('ref-field.placeholder')}</span>
-          </Button>
+          <IconButton
+            classNames='w-full gap-form-gap'
+            disabled={!createType || !db}
+            icon='ph--plus--regular'
+            label={label || t('ref-field.placeholder')}
+            onClick={() => void handleCreate()}
+          />
         )
       )}
     </Input.Root>
@@ -129,10 +136,10 @@ const InlineForm = ({ reference, db, readonly, useType = defaultUseType }: Inlin
   }
 
   return (
-    <Form.Root db={db} schema={formSchema} defaultValues={defaultValues as any} onValuesChanged={handleChange}>
-      <Form.Content>
-        <Form.FieldSet collapsible readonly={readonly} />
-      </Form.Content>
-    </Form.Root>
+    <FormRoot db={db} schema={formSchema} defaultValues={defaultValues as any} onValuesChanged={handleChange}>
+      <FormContent>
+        <FormFieldSetController collapsible readonly={readonly} />
+      </FormContent>
+    </FormRoot>
   );
 };

package/src/components/Form/FormField/fields/RefField/RefField.stories.tsx

@@ -0,0 +1,97 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useState } from 'react';
+
+import { Annotation, Obj, Ref } from '@dxos/echo';
+import { useSpaces } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { Organization, TestLayout } from '../../../../../testing';
+import { Form } from '../../../Form';
+
+// Picker: select an existing Organization.
+const RefSchema = Schema.Struct({
+  employer: Ref.Ref(Organization).annotations({ title: 'Employer' }),
+}).pipe(Schema.mutable);
+
+// Inline: edit the referenced Organization's fields in a nested form.
+const InlineSchema = Schema.Struct({
+  employer: Ref.Ref(Organization).pipe(
+    Schema.annotations({ title: 'Employer' }),
+    Annotation.FormInlineAnnotation.set(true),
+  ),
+}).pipe(Schema.mutable);
+
+const RefStory = ({ schema }: { schema: Schema.Schema<any> }) => {
+  const spaces = useSpaces();
+  const space = spaces[0];
+  const [values, setValues] = useState<Record<string, unknown>>({});
+  if (!space) {
+    return <Loading />;
+  }
+
+  return (
+    <TestLayout json={values}>
+      <Form.Root
+        schema={schema}
+        values={values}
+        db={space.db}
+        onValuesChanged={(values) => setValues((prev) => ({ ...prev, ...values }))}
+        // `name` is required; the inline create starts from `{}`, so seed a default the form can then edit.
+        onCreate={(_type, props: any) => space.db.add(Obj.make(Organization, { name: 'New organization', ...props }))}
+      >
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-form/FormField/RefField',
+  render: RefStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [Organization],
+      onCreateSpace: ({ space }) => {
+        Array.from({ length: 8 }).forEach((_, i) =>
+          space.db.add(Obj.make(Organization, { name: `Organization ${i}` })),
+        );
+      },
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof RefStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    schema: RefSchema,
+  },
+};
+
+export const Inline: Story = {
+  args: {
+    schema: InlineSchema,
+  },
+};

package/src/components/Form/{fields → FormField/fields/RefField}/RefField.test.ts

@@ -4,7 +4,8 @@
 
 import { describe, test } from 'vitest';
 
-import { type RefOption } from '../../ObjectPicker';
+import { type RefOption } from '#types';
+
 import { findRefOption } from './RefField';
 
 // Sample qualified self URIs as produced by an in-space object (Entity.getURI / `echo://<space>/<id>`).
@@ -28,6 +29,14 @@ describe('findRefOption', () => {
     expect(findRefOption({ '/': LOCAL }, options)?.label).toBe('Target');
   });
 
+  test('matches a keyed-entity ref by direct URI equality', ({ expect }) => {
+    // Keyed/registry entities (skills, operations) are referenced by a named DXN with no parseable
+    // EID; the option id and the ref uri are the same named URI, so they match by direct equality.
+    const named = 'dxn:type:example.com/skill/research';
+    const keyedOptions: RefOption[] = [...options, { id: named, label: 'Research' }];
+    expect(findRefOption({ '/': named }, keyedOptions)?.label).toBe('Research');
+  });
+
   test('returns undefined for a non-ref value', ({ expect }) => {
     expect(findRefOption('not-a-ref', options)).toBeUndefined();
     expect(findRefOption(undefined, options)).toBeUndefined();

package/src/components/Form/{fields → FormField/fields/RefField}/RefField.tsx

@@ -5,8 +5,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
 import '@dxos/lit-ui/dx-tag-picker.pcss';
-import { type Database, Entity, Filter, Obj, Query, Ref, Scope, Type } from '@dxos/echo';
-import { useQuery, useType as defaultUseType } from '@dxos/echo-react';
+import { Entity, Filter, Obj, Query, Ref, Scope, Type } from '@dxos/echo';
+import { useType as defaultUseType, useQuery } from '@dxos/echo-react';
 import { ANY_OBJECT_TYPENAME, ReferenceAnnotationId, type ReferenceAnnotationValue } from '@dxos/echo/internal';
 import { SchemaEx } from '@dxos/effect';
 import { DXN, EID, URI } from '@dxos/keys';
@@ -15,10 +15,12 @@ import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
 import { ParentLabelAnnotationId } from '@dxos/schema';
 
 import { translationKey } from '#translations';
+import { type CreateOptions, type FormFieldRendererProps, type RefFieldDataProps, type RefOption } from '#types';
 
-import { ObjectPicker, type ObjectPickerContentProps, type RefOption } from '../../ObjectPicker';
-import { omitHiddenFormFields, omitId } from '../Form';
-import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
+import { omitHiddenFormFields, omitId } from '../../../../../util';
+import { ObjectPicker } from '../../../../ObjectPicker';
+import { FormFieldLabel } from '../../FormRow';
+import { presentationFor } from '../../presentation';
 
 // TODO(burdon): Factor out.
 const isRefSnapshot = (val: any): val is { '/': string } => {
@@ -39,7 +41,14 @@ export const findRefOption = (value: unknown, options: RefOption[]): RefOption |
   if (!isRef && !isRefSnapshot(value)) {
     return undefined;
   }
-  const valueEid = EID.tryParse(isRef ? value.uri : value['/']);
+  const valueUri = isRef ? value.uri : value['/'];
+  // Keyed/registry entities (skills, operations) are referenced by a named DXN rather than an
+  // entity-id, so they carry no parseable EID; match those by direct URI equality against the option id.
+  const directMatch = options.find((option) => option.id === valueUri);
+  if (directMatch) {
+    return directMatch;
+  }
+  const valueEid = EID.tryParse(valueUri);
   if (!valueEid) {
     return undefined;
   }
@@ -85,31 +94,11 @@ const defaultUseResults: NonNullable<RefFieldProps['useResults']> = (db, typenam
       : typename === ANY_OBJECT_TYPENAME
         ? // Untyped refs show space objects only; the registry is too broad for "any".
           Query.select(Filter.everything())
-        : // Include registry scope so keyed entities (blueprints, operations) appear as options.
+        : // Include registry scope so keyed entities (skills, operations) appear as options.
           Query.select(Filter.type(DXN.make(typename))).from(Scope.space(), Scope.registry()),
   );
 
-export type RefFieldProps = FormFieldComponentProps &
-  Pick<
-    ObjectPickerContentProps,
-    'createOptionLabel' | 'createOptionIcon' | 'createInitialValuePath' | 'createFieldMap'
-  > & {
-    db?: Database.Database;
-    // TODO(burdon): Replace hooks with callbacks.
-    useType?: (db?: Database.Database, typeUri?: URI.URI) => Type.AnyEntity;
-    useResults?: (db?: Database.Database, typename?: string) => Entity.Any[];
-    getOptions?: (
-      objects: Entity.Any[],
-      options?: { parentLabel?: boolean; getTypePlaceholder?: (typename: string) => string },
-    ) => RefOption[];
-    /**
-     * Persist a newly-created object. Called after the user fills out the
-     * inline create form and clicks Save. Should add the object to the
-     * database and return it (sync or async). The returned object is then
-     * wired into this slot's form value as a Ref.
-     */
-    onCreate?: (schema: Type.AnyEntity, values: any) => Obj.Unknown | Promise<Obj.Unknown> | undefined | void;
-  };
+export type RefFieldProps = FormFieldRendererProps & RefFieldDataProps & CreateOptions;
 
 export const RefField = (props: RefFieldProps) => {
   const {
@@ -118,7 +107,8 @@ export const RefField = (props: RefFieldProps) => {
     label,
     jsonPath,
     placeholder,
-    layout,
+    presentation,
+    required,
     getStatus,
     getValue,
     createOptionLabel,
@@ -130,10 +120,12 @@ export const RefField = (props: RefFieldProps) => {
     useResults = defaultUseResults,
     getOptions = defaultGetOptions,
     onCreate,
+    resolveCreateEntry,
     onValueChange,
   } = props;
   const { t } = useTranslation(translationKey);
   const { status, error } = getStatus();
+  const resolved = presentationFor(presentation);
 
   const typename = useMemo(
     () => (type ? SchemaEx.findAnnotation<ReferenceAnnotationValue>(type, ReferenceAnnotationId)?.typename : undefined),
@@ -164,24 +156,31 @@ export const RefField = (props: RefFieldProps) => {
   const selectedIds = useMemo(() => (item ? [item.id] : []), [item]);
   const createSchema = useType(db, typename && typename !== ANY_OBJECT_TYPENAME ? DXN.make(typename) : undefined);
 
+  // Per-typename override supplied by the caller (e.g. SpaceCapabilities.CreateObjectEntry).
+  const createEntry = typename ? resolveCreateEntry?.(typename) : undefined;
+
   // Lift the popover open state so we can dismiss it after a successful create.
   const [open, setOpen] = useState(false);
 
   const handleCreate = useCallback(
     async (values: any) => {
-      if (!createSchema || !onCreate) {
-        return;
-      }
-      const newObject = await onCreate(createSchema, values);
-      if (newObject) {
-        // Wire the newly-created object into this slot's form value. ArrayField
-        // owns the array; this RefField represents a single slot, so writing a
-        // Ref via `onValueChange` populates that slot.
-        onValueChange(type, Ref.make(newObject));
+      // Wire the newly-created object into this slot's form value. ArrayField
+      // owns the array; this RefField represents a single slot, so writing a
+      // Ref via `onValueChange` populates that slot.
+      if (createEntry?.createObject && db) {
+        const newObject = await createEntry.createObject(values, db);
+        if (newObject) {
+          onValueChange(type, Ref.make(newObject));
+        }
+      } else if (createSchema && onCreate) {
+        const newObject = await onCreate(createSchema, values);
+        if (newObject) {
+          onValueChange(type, Ref.make(newObject));
+        }
       }
       setOpen(false);
     },
-    [createSchema, onCreate, type, onValueChange],
+    [createEntry, db, createSchema, onCreate, type, onValueChange],
   );
 
   const handleUpdate = useCallback(
@@ -204,13 +203,15 @@ export const RefField = (props: RefFieldProps) => {
     [item, handleUpdate],
   );
 
-  if (!typename || ((readonly || layout === 'static') && !item)) {
+  if (!typename || ((readonly || resolved.isStatic) && !item)) {
     return null;
   }
 
   return (
     <Input.Root validationValence={status}>
-      {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} path={jsonPath} />}
+      {resolved.showLabel && (
+        <FormFieldLabel error={error} readonly={readonly} required={required} label={label} path={jsonPath} />
+      )}
       <div>
         {readonly ? (
           !item ? (
@@ -245,22 +246,29 @@ export const RefField = (props: RefFieldProps) => {
                 classNames='dx-card-popover-width'
                 options={options}
                 selectedIds={selectedIds}
-                // Strip hidden (`FormInputAnnotation.set(false)`) fields so the
-                // form's validator doesn't reject required-but-hidden fields
-                // such as backing-object refs supplied by a `FactoryAnnotation`.
-                createSchema={createSchema && omitHiddenFormFields(omitId(Type.getSchema(createSchema)))}
+                // Prefer the plugin-registered inputSchema; fall back to stripping hidden fields
+                // (`FormInputAnnotation.set(false)`) from the raw ECHO type schema so the form's
+                // validator doesn't reject required-but-hidden fields such as backing-object refs
+                // supplied by a `FactoryAnnotation`.
+                createSchema={
+                  createEntry?.inputSchema ??
+                  (createSchema && omitHiddenFormFields(omitId(Type.getSchema(createSchema))))
+                }
                 createOptionLabel={createOptionLabel}
                 createOptionIcon={createOptionIcon}
                 createInitialValuePath={createInitialValuePath}
                 createFieldMap={createFieldMap}
-                onCreate={handleCreate}
+                // Offer inline create when the caller wired a handler OR a plugin-registered
+                // createObject override is available. A resolvable `createSchema` alone is not
+                // enough (e.g. operation refs, whose objects can't be created ad hoc).
+                onCreate={onCreate || createEntry?.createObject ? handleCreate : undefined}
                 onSelect={handleSelect}
               />
             </ObjectPicker.Portal>
           </ObjectPicker.Root>
         )}
       </div>
-      {layout === 'full' && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
+      {resolved.showError && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
     </Input.Root>
   );
 };

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

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './RefField';
+export * from './InlineRefField';