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

package/src/components/ObjectPicker/ObjectPicker.tsx

@@ -5,39 +5,31 @@
 import type * as Schema from 'effect/Schema';
 import React, { type KeyboardEvent, forwardRef, useCallback, useState } from 'react';
 
-import { type Palette, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { Combobox } from '@dxos/react-ui-list';
 import { useSearchListResults } from '@dxos/react-ui-search';
 
 import { translationKey } from '#translations';
+import { type CreateOptions, type RefOption } from '#types';
 
 import { Form } from '../Form';
-import { type FormFieldMap } from '../Form/FormFieldComponent';
 
-export type RefOption = {
-  id: string;
-  label: string;
-  hue?: Palette;
-};
-
-export type ObjectPickerContentProps = ThemedClassName<{
-  options: RefOption[];
-  selectedIds?: string[];
-  createOptionLabel?: [string, { ns: string | readonly string[] }];
-  createOptionIcon?: string;
-  createSchema?: Schema.Schema.AnyNoContext;
-  createInitialValuePath?: string;
-  createFieldMap?: FormFieldMap;
-  /**
-   * Persist a newly-created object given the form values. May be async (e.g.
-   * to write to a database). The Promise is awaited before the inline create
-   * form is collapsed back to the picker list, so consumers can complete
-   * follow-up work (assign the new ref to a parent slot, close the popover)
-   * before the picker UI re-renders.
-   */
-  onCreate?: (values: any) => unknown | Promise<unknown>;
-  onSelect: (id: string) => void;
-}>;
+export type ObjectPickerContentProps = ThemedClassName<
+  CreateOptions & {
+    options: RefOption[];
+    selectedIds?: string[];
+    createSchema?: Schema.Schema.AnyNoContext;
+    /**
+     * Persist a newly-created object given the form values. May be async (e.g.
+     * to write to a database). The Promise is awaited before the inline create
+     * form is collapsed back to the picker list, so consumers can complete
+     * follow-up work (assign the new ref to a parent slot, close the popover)
+     * before the picker UI re-renders.
+     */
+    onCreate?: (values: any) => unknown | Promise<unknown>;
+    onSelect?: (id: string) => void;
+  }
+>;
 
 const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>(
   (
@@ -137,8 +129,9 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
               key={option.id}
               value={option.id}
               label={option.label}
+              description={option.description}
               checked={selectedIds?.includes(option.id)}
-              onSelect={() => onSelect(option.id)}
+              onSelect={() => onSelect?.(option.id)}
               classNames='flex items-center gap-2'
             />
           ))}

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

@@ -7,7 +7,7 @@ import * as Schema from 'effect/Schema';
 import React, { useEffect } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
-import { DXN, Annotation, Filter, Obj, Ref, Tag, Type } from '@dxos/echo';
+import { Annotation, DXN, Filter, Obj, Ref, Tag, Type } from '@dxos/echo';
 import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/Annotation';
 import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
@@ -18,7 +18,7 @@ import { Pipeline } from '@dxos/types';
 
 import { translations } from '#translations';
 
-import { OBJECT_PROPERTIES_DEBUG_SYMBOL } from '../testing';
+import { OBJECT_PROPERTIES_DEBUG_SYMBOL } from '../../testing';
 import { ObjectProperties } from './ObjectProperties';
 
 //

package/src/components/ObjectProperties/ObjectProperties.test.tsx

@@ -9,7 +9,7 @@ import { afterEach, describe, expect, test } from 'vitest';
 import { Filter, Obj, Tag } from '@dxos/echo';
 import { DXN, EID } from '@dxos/keys';
 
-import { OBJECT_PROPERTIES_DEBUG_SYMBOL } from '../testing';
+import { OBJECT_PROPERTIES_DEBUG_SYMBOL } from '../../testing';
 import * as stories from './ObjectProperties.stories';
 import { type ObjectPropertiesDebug } from './ObjectProperties.stories';
 

package/src/components/ObjectProperties/ObjectProperties.tsx

@@ -15,14 +15,17 @@ import { HuePicker } from '@dxos/react-ui-pickers';
 import { FactoryAnnotation } from '@dxos/schema';
 
 import { translationKey } from '#translations';
+import { type FormFieldMap, type RefFieldDataProps } from '#types';
 
-import { Form, type FormFieldMap, META_TAGS_KEY, withMetaTags } from '../Form';
+import { Form, META_TAGS_KEY, withMetaTags } from '../Form';
 
-export type ObjectPropertiesProps = PropsWithChildren<{ object: Obj.Unknown }>;
+export type ObjectPropertiesProps = PropsWithChildren<
+  { object: Obj.Unknown } & Pick<RefFieldDataProps, 'getCreateDefaults' | 'resolveCreateEntry'>
+>;
 
 // TODO(wittjosiah): Reconcile w/ ObjectForm.
 export const ObjectProperties = composable<HTMLDivElement, ObjectPropertiesProps>(
-  ({ children, object, ...props }, forwardedRef) => {
+  ({ children, object, getCreateDefaults, resolveCreateEntry, ...props }, forwardedRef) => {
     const db = Obj.getDatabase(object);
     const meta = Obj.getMeta(object);
     // `meta.tags` already holds `Ref<Tag>`s (materialized by the database handler).
@@ -110,6 +113,7 @@ export const ObjectProperties = composable<HTMLDivElement, ObjectPropertiesProps
 
     return (
       <Form.Root
+        db={db}
         schema={formSchema}
         defaultValues={values as any}
         createTypename={Type.getTypename(Tag.Tag)}
@@ -117,14 +121,15 @@ export const ObjectProperties = composable<HTMLDivElement, ObjectPropertiesProps
         createOptionLabel={['add-tag.label', { ns: translationKey }]}
         createInitialValuePath='label'
         createFieldMap={createFieldMap}
-        db={db}
         onValuesChanged={handleChange}
         onCreate={handleCreate}
+        getCreateDefaults={getCreateDefaults}
+        resolveCreateEntry={resolveCreateEntry}
       >
-        <Form.Viewport {...composableProps(props)} ref={forwardedRef}>
+        <Form.Viewport {...composableProps(props)} scroll ref={forwardedRef}>
           <Form.Content>
             <Form.FieldSet />
-            {children}
+            <Form.Section>{children}</Form.Section>
           </Form.Content>
         </Form.Viewport>
       </Form.Root>
@@ -133,12 +138,12 @@ export const ObjectProperties = composable<HTMLDivElement, ObjectPropertiesProps
 );
 
 const createFieldMap: FormFieldMap = {
-  hue: ({ type, label, layout, getValue, onValueChange }) => {
+  hue: ({ type, label, presentation, getValue, onValueChange }) => {
     const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
     const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
     return (
       <>
-        {layout !== 'inline' && <Form.Label label={label} />}
+        {presentation !== 'inline' && <Form.Label label={label} />}
         <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} />
       </>
     );

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

@@ -69,11 +69,11 @@ const PeopleGrid = ({ db }: { db?: Database.Database }) => {
   );
 };
 
-type StoryProps = Partial<Pick<RefEditorProps, 'value' | 'mode' | 'activateOnTyping' | 'autoFocus'>>;
+type StoryArgs = Partial<Pick<RefEditorProps, 'value' | 'mode' | 'activateOnTyping' | 'autoFocus'>>;
 
 // NOTE: The Person config (type/match/getValues) is supplied in render, not args — Storybook's
 // arg traversal attempts to mutate the proxied ECHO schema and crashes.
-const DefaultStory = ({ value: initialValue, ...args }: StoryProps) => {
+const DefaultStory = ({ value: initialValue, ...args }: StoryArgs) => {
   const { space } = useClientStory();
   const [value, setValue] = useState(initialValue ?? '');
 
@@ -88,7 +88,6 @@ const DefaultStory = ({ value: initialValue, ...args }: StoryProps) => {
         icon='ph--user--regular'
         db={space?.db}
         onChange={setValue}
-        classNames='border'
       />
       <JsonHighlighter data={{ value }} classNames='text-xs' />
       <PeopleGrid db={space?.db} />

package/src/components/RefEditor/RefEditor.tsx

@@ -246,7 +246,7 @@ export const RefEditor = forwardRef<EditorController, RefEditorProps>(
       >
         <Editor.View
           // TOOD(burdon): Use same style as react-ui Input.
-          classNames='border border-separator rounded-xs px-2'
+          classNames='border border-input-separator rounded-xs px-2'
           {...props}
           initialValue={value}
           selectionEnd

package/src/components/ViewEditor/ViewEditor.stories.tsx

@@ -12,17 +12,16 @@ import { type Mutable } from '@dxos/echo/Obj';
 import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ProjectionModel, ViewModel, getTypeURIFromQuery } from '@dxos/schema';
 import { Employer, Organization, Person, Pipeline } from '@dxos/types';
 
 import { translations } from '#translations';
 
-import { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
+import { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../../testing';
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 
 const types = [
-  // TODO(burdon): Get label from annotation.
   { value: Type.getURI(Organization.Organization), label: 'Organization' },
   { value: Type.getURI(Person.Person), label: 'Person' },
   { value: Type.getURI(Pipeline.Pipeline), label: 'Project' },
@@ -36,9 +35,9 @@ export type ViewEditorDebugObjects = {
   projection: ProjectionModel;
 };
 
-type DefaultStoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
+type StoryArgs = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
-const DefaultStory = (props: DefaultStoryProps) => {
+const DefaultStory = (props: StoryArgs) => {
   const { space } = useClientStory();
   const [type, setType] = useState<Type.AnyEntity>();
   const [view, setView] = useState<View.View>();
@@ -126,14 +125,14 @@ const DefaultStory = (props: DefaultStoryProps) => {
     }
   }, [type, view]);
 
-  // NOTE(ZaymonFC): This looks awkward but it resolves an infinite parsing issue with sb.
+  // NOTE(ZaymonFC): Avoids infinite parsing issue with storybook args.
   const json = useMemo(
     () => JSON.parse(JSON.stringify({ schema: type, view, projection: projectionRef.current })),
     [JSON.stringify(type), JSON.stringify(view)],
   );
 
   if (!type || !view) {
-    return <div />;
+    return <Loading />;
   }
 
   return (

package/src/components/ViewEditor/ViewEditor.test.tsx

@@ -10,7 +10,7 @@ import { Type, View } from '@dxos/echo';
 import { instanceOf as isInstanceOf } from '@dxos/echo/Obj';
 import { ProjectionModel } from '@dxos/schema';
 
-import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
+import { VIEW_EDITOR_DEBUG_SYMBOL } from '../../testing';
 import * as stories from './ViewEditor.stories';
 import { type ViewEditorDebugObjects } from './ViewEditor.stories';
 
@@ -138,11 +138,17 @@ describe('ViewEditor', () => {
     expect(addedPropertyProjection!.props.property).toBe('added_property');
   });
 
-  // TODO(mykola): Fix flaky test.
-  test('delete property', { retry: 2 }, async () => {
+  test('delete property', async () => {
     await Default.run();
     await waitForViewEditor();
 
+    // Wait for the field list to render — useObject(view) inside ViewEditor resolves
+    // asynchronously after the outer story's type/view state is set, so the debug
+    // element can appear before the list items are in the DOM.
+    await waitFor(() => {
+      expect(screen.getByText('name')).toBeInTheDocument();
+    });
+
     // Find the delete button for the 'name' property.
     const nameProperty = screen.getByText('name');
     const propertyRow = nameProperty.closest('[role="listitem"]');

package/src/components/ViewEditor/ViewEditor.tsx

@@ -26,9 +26,9 @@ import {
 import { SchemaEx } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { useObject, useQuery } from '@dxos/react-client/echo';
-import { IconButton, Input, Message, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { Input, Message, type ThemedClassName, ToggleIconButton, useTranslation } from '@dxos/react-ui';
 import { QueryForm, type QueryFormProps } from '@dxos/react-ui-components';
-import { List } from '@dxos/react-ui-list';
+import { OrderedList } from '@dxos/react-ui-list';
 import {
   ParentLabelAnnotation,
   ProjectionModel,
@@ -36,19 +36,13 @@ import {
   createEchoChangeCallback,
   getTypeURIFromQuery,
 } from '@dxos/schema';
-import { mx, osTranslations } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { translationKey } from '#translations';
+import { type FormFieldMap, type FormFieldRenderer, type FormFieldRendererProps } from '#types';
 
 import { FieldEditor } from '../FieldEditor';
-import {
-  Form,
-  type FormFieldComponent,
-  type FormFieldComponentProps,
-  FormFieldLabel,
-  type FormFieldMap,
-  type FormRootProps,
-} from '../Form';
+import { CompactIconButton, Form, FormFieldHeader, FormFieldLabel, type FormRootProps } from '../Form';
 
 export type ViewEditorProps = ThemedClassName<
   {
@@ -64,7 +58,7 @@ export type ViewEditorProps = ThemedClassName<
 >;
 
 /**
- * Schema-based object form.
+ * View editor form.
  */
 export const ViewEditor = forwardRef<ProjectionModel | null, ViewEditorProps>(
   (
@@ -92,6 +86,7 @@ export const ViewEditor = forwardRef<ProjectionModel | null, ViewEditorProps>(
       if (!type) {
         return null;
       }
+
       const jsonSchema = type.jsonSchema;
 
       // Always use createEchoChangeCallback since the view is ECHO-backed.
@@ -117,6 +112,7 @@ export const ViewEditor = forwardRef<ProjectionModel | null, ViewEditorProps>(
         if (from._tag !== 'scope') {
           return undefined;
         }
+
         const feedScope = from.scopes.find((s) => s._tag === 'feed');
         return Option.fromNullable(feedScope).pipe(
           Option.map((s) => s.feedUri),
@@ -216,42 +212,54 @@ export const ViewEditor = forwardRef<ProjectionModel | null, ViewEditorProps>(
 
     return (
       <div className={mx(classNames)}>
-        {/* If readonly is set, then the callout is not needed. */}
-        {schemaReadonly && !readonly && (
-          <Message.Root valence='info' classNames='my-form-padding'>
-            <Message.Title>{t('system-schema.description')}</Message.Title>
-          </Message.Root>
-        )}
-
         {/* TODO(burdon): Is the form read-only or just the schema? */}
         <Form.Root schema={viewSchema} values={viewValues} fieldMap={fieldMap} db={db} onValuesChanged={handleUpdate}>
-          <Form.FieldSet />
-
-          {type && (
-            <>
-              <FormFieldLabel label={t('fields.label')} asChild />
-              <FieldList
-                type={type}
-                view={view}
-                registry={registry}
-                readonly={readonly}
-                showHeading={showHeading}
-                onDelete={handleDelete}
-              />
-            </>
-          )}
+          <Form.Viewport>
+            <Form.Content>
+              {/* If readonly is set, then the callout is not needed. */}
+              {schemaReadonly && !readonly && (
+                <Message.Root valence='info' classNames='my-form-padding'>
+                  <Message.Title>{t('system-schema.description')}</Message.Title>
+                </Message.Root>
+              )}
+              <Form.FieldSet />
+              {type && (
+                <FieldList
+                  type={type}
+                  view={view}
+                  registry={registry}
+                  readonly={readonly}
+                  showHeading={showHeading}
+                  onDelete={handleDelete}
+                />
+              )}
+            </Form.Content>
+          </Form.Viewport>
         </Form.Root>
       </div>
     );
   },
 );
 
-type FieldListProps = Omit<
-  Pick<ViewEditorProps, 'type' | 'view' | 'registry' | 'readonly' | 'showHeading' | 'onDelete'>,
-  'type'
-> & {
+const customFields = ({ types, tags }: Pick<ViewEditorProps, 'types' | 'tags'>): Record<string, FormFieldRenderer> => ({
+  query: ({ type, readonly, label, getValue, onValueChange }: FormFieldRendererProps) => {
+    const handleChange = useCallback<NonNullable<QueryFormProps['onChange']>>(
+      (query) => onValueChange(type, query.ast),
+      [onValueChange],
+    );
+
+    return (
+      <Input.Root>
+        <FormFieldLabel readonly={readonly} label={label} />
+        <QueryForm initialQuery={getValue()} types={types} tags={tags} onChange={handleChange} />
+      </Input.Root>
+    );
+  },
+});
+
+type FieldListProps = {
   type: Type.AnyEntity;
-};
+} & Pick<ViewEditorProps, 'view' | 'registry' | 'readonly' | 'showHeading' | 'onDelete'>;
 
 const FieldList = ({ type, view, registry, readonly, showHeading = false, onDelete }: FieldListProps) => {
   const atomRegistry = useContext(RegistryContext);
@@ -268,14 +276,12 @@ const FieldList = ({ type, view, registry, readonly, showHeading = false, onDele
     // Pass type only when mutable to allow schema mutations.
     const change = createEchoChangeCallback(view, Type.getDatabase(type) != null ? type : undefined);
 
-    const model = new ProjectionModel({
+    return new ProjectionModel({
       registry: atomRegistry,
       view,
       baseSchema: jsonSchema,
       change,
     });
-
-    return model;
   }, [atomRegistry, type, view]);
 
   const [expandedField, setExpandedField] = useState<View.FieldType['id']>();
@@ -286,13 +292,6 @@ const FieldList = ({ type, view, registry, readonly, showHeading = false, onDele
     setExpandedField(field.id);
   }, [projectionModel, readonly]);
 
-  const handleToggleField = useCallback(
-    (field: View.FieldType) => {
-      setExpandedField((prevExpandedFieldId) => (prevExpandedFieldId === field.id ? undefined : field.id));
-    },
-    [readonly],
-  );
-
   const handleDelete = useCallback(
     (fieldId: string) => {
       invariant(!readonly);
@@ -342,106 +341,77 @@ const FieldList = ({ type, view, registry, readonly, showHeading = false, onDele
   }
 
   return (
-    <List.Root<View.FieldType>
+    <OrderedList.Root<View.FieldType>
       items={viewSnapshot.projection.fields as View.FieldType[]}
       isItem={Schema.is(View.FieldSchema)}
       getId={(field) => field.id}
       onMove={readonly ? undefined : handleMove}
       readonly={readonly}
+      expandedId={expandedField}
+      onExpandedChange={setExpandedField}
     >
       {({ items: fields }) => (
         <>
-          {showHeading && <h3 className='text-sm'>{t('field-path.label')}</h3>}
-          <div role='list' className='grid grid-cols-[min-content_1fr_min-content_min-content_min-content]'>
-            {fields?.map((field) => {
+          <FormFieldHeader
+            label={t('fields.label')}
+            readonly={readonly}
+            add={{
+              label: t('add-property-button.label'),
+              disabled: viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT,
+              onClick: handleAdd,
+            }}
+          />
+          {showHeading && <FormFieldLabel standalone classNames='py-1' label={t('field-path.label')} />}
+          <OrderedList.Content>
+            {fields.map((field) => {
               const hidden = field.visible === false;
               return (
-                <List.Item<View.FieldType>
+                <OrderedList.DetailItem<View.FieldType>
                   key={field.id}
+                  id={field.id}
                   item={field}
-                  classNames={'grid grid-cols-subgrid col-span-5'}
-                  aria-expanded={expandedField === field.id}
-                >
-                  <div className='grid grid-cols-subgrid col-span-5 rounded-xs cursor-pointer min-h-10 dx-hover'>
-                    <List.ItemDragHandle disabled={readonly || schemaReadonly} />
-                    <List.ItemTitle classNames={hidden && 'text-subdued'} onClick={() => handleToggleField(field)}>
-                      {field.path}
-                    </List.ItemTitle>
-                    <List.ItemIconButton
+                  canDrag={!readonly && !schemaReadonly}
+                  expandable={!readonly}
+                  title={field.path}
+                  titleClassNames={hidden ? 'text-subdued' : undefined}
+                  actions={
+                    <ToggleIconButton
+                      iconOnly
+                      variant='ghost'
+                      active={hidden}
+                      icon='ph--eye--regular'
+                      activeIcon='ph--eye-closed--regular'
                       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 && (
-                      <>
-                        <List.ItemDeleteButton
-                          label={t('delete-field.label')}
-                          autoHide={false}
-                          disabled={readonly || schemaReadonly || viewSnapshot.projection.fields.length <= 1}
-                          onClick={() => handleDelete(field.id)}
-                          data-testid='field.delete'
-                        />
-                        <List.ItemIconButton
-                          iconOnly
-                          variant='ghost'
-                          label={t('toggle-expand.label', { ns: osTranslations })}
-                          icon={expandedField === field.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
-                          onClick={() => handleToggleField(field)}
-                          data-testid='field.toggle'
-                        />
-                      </>
-                    )}
-                  </div>
-                  {expandedField === field.id && !readonly && (
-                    <div className='col-span-full mt-1 mb-1 border border-separator rounded-md'>
-                      <FieldEditor
-                        readonly={readonly || schemaReadonly}
-                        registry={registry}
-                        projection={projectionModel}
-                        field={field}
-                        onSave={handleClose}
+                  }
+                  trailing={
+                    !readonly && (
+                      <CompactIconButton
+                        icon='ph--x--regular'
+                        label={t('delete-field.label')}
+                        disabled={schemaReadonly || viewSnapshot.projection.fields.length <= 1}
+                        onClick={() => handleDelete(field.id)}
+                        data-testid='field.delete'
                       />
-                    </div>
-                  )}
-                </List.Item>
+                    )
+                  }
+                >
+                  <FieldEditor
+                    readonly={readonly || schemaReadonly}
+                    registry={registry}
+                    projection={projectionModel}
+                    field={field}
+                    onSave={handleClose}
+                  />
+                </OrderedList.DetailItem>
               );
             })}
-          </div>
-          {!readonly && !expandedField && (
-            <div className='my-form-padding'>
-              <IconButton
-                icon='ph--plus--regular'
-                label={t('add-property-button.label')}
-                onClick={handleAdd}
-                disabled={viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT}
-                classNames='w-full'
-              />
-            </div>
-          )}
+          </OrderedList.Content>
         </>
       )}
-    </List.Root>
+    </OrderedList.Root>
   );
 };
-
-const customFields = ({
-  types,
-  tags,
-}: Pick<ViewEditorProps, 'types' | 'tags'>): Record<string, FormFieldComponent> => ({
-  query: ({ type, readonly, label, getValue, onValueChange }: FormFieldComponentProps) => {
-    const handleChange = useCallback<NonNullable<QueryFormProps['onChange']>>(
-      (query) => onValueChange(type, query.ast),
-      [onValueChange],
-    );
-
-    return (
-      <Input.Root>
-        <FormFieldLabel readonly={readonly} label={label} />
-        <QueryForm initialQuery={getValue()} types={types} tags={tags} onChange={handleChange} />
-      </Input.Root>
-    );
-  },
-});

package/src/components/index.ts

@@ -9,5 +9,4 @@ export * from './ObjectPicker';
 export * from './ObjectProperties';
 export * from './ObjectTree';
 export * from './RefEditor';
-export * from './Settings';
 export * from './ViewEditor';

package/src/hooks/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
+export * from './useAsyncFieldEffect';
+export * from './useFormContext';
 export * from './useFormHandler';
 export * from './useKeyHandler';