@dxos/react-ui-form 0.9.0 → 0.9.1-main.c7dcc2e112

package/src/components/ObjectForm/ObjectForm.tsx

@@ -10,27 +10,15 @@ import { invariant } from '@dxos/invariant';
 import { HuePicker } from '@dxos/react-ui-pickers';
 
 import { translationKey } from '#translations';
+import { type FormFieldMap } from '#types';
 
-import { Form, type FormFieldMap, META_TAGS_KEY, withMetaTags } from '../Form';
+import { Form, META_TAGS_KEY, withMetaTags } from '../Form';
 
 export type ObjectFormProps = {
   type: Type.AnyEntity;
   object: Obj.Unknown;
 };
 
-const createFieldMap: FormFieldMap = {
-  hue: ({ type, label, layout, 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} />}
-        <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} />
-      </>
-    );
-  },
-};
-
 export const ObjectForm = ({ object, type }: ObjectFormProps) => {
   const db = Obj.getDatabase(object);
   const meta = Obj.getMeta(object);
@@ -109,3 +97,16 @@ export const ObjectForm = ({ object, type }: ObjectFormProps) => {
     </Form.Root>
   );
 };
+
+const createFieldMap: FormFieldMap = {
+  hue: ({ type, label, layout, 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} />}
+        <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} />
+      </>
+    );
+  },
+};

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>(
   (
@@ -138,7 +130,7 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
               value={option.id}
               label={option.label}
               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

@@ -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,8 +15,9 @@ import { HuePicker } from '@dxos/react-ui-pickers';
 import { FactoryAnnotation } from '@dxos/schema';
 
 import { translationKey } from '#translations';
+import { type FormFieldMap } 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 }>;
 

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

@@ -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/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' },
@@ -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';
 

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 FormFieldRenderer, type FormFieldRendererProps, type FormFieldMap } from '#types';
 
 import { FieldEditor } from '../FieldEditor';
-import {
-  Form,
-  type FormFieldComponent,
-  type FormFieldComponentProps,
-  FormFieldLabel,
-  type FormFieldMap,
-  type FormRootProps,
-} from '../Form';
+import { CompactIconButton, FieldHeader, Form, 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) => {
+          <FieldHeader
+            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/hooks/index.ts

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

package/src/hooks/useFormContext.ts

@@ -0,0 +1,86 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import * as SchemaAST from 'effect/SchemaAST';
+import { useEffect, useMemo, useRef } from 'react';
+
+import { type AnyProperties } from '@dxos/echo/internal';
+import { SchemaEx } from '@dxos/effect';
+
+import { type CreateOptions, type FormFieldOptions, type FormFieldStateProps } from '#types';
+
+import { type FormHandler } from './useFormHandler';
+
+//
+// Context
+//
+
+export type FormContextValue<T extends AnyProperties = any> = {
+  /**
+   * Form handler.
+   */
+  form: FormHandler<T>;
+
+  /**
+   * Testing.
+   */
+  testId?: string;
+} & FormFieldOptions &
+  Pick<CreateOptions, 'createFieldMap'>;
+
+export const [FormContextProvider, useFormContext] = createContext<FormContextValue>('Form');
+
+/**
+ * Get the current form values.
+ */
+export const useFormValues: {
+  <T extends AnyProperties>(componentName: string, path?: (string | number)[]): T;
+  <T extends AnyProperties>(
+    componentName: string,
+    path: (string | number)[] | undefined,
+    defaultValue: () => T,
+  ): T | undefined;
+} = (componentName: string, path?: (string | number)[], defaultValue?: () => any) => {
+  const stablePath = useMemo(() => path ?? [], [path ? path.join('.') : undefined]);
+  const jsonPath = SchemaEx.createJsonPath(stablePath);
+  const {
+    form: { values, onValueChange },
+  } = useFormContext(componentName);
+
+  const value = SchemaEx.getValue(values, jsonPath);
+
+  // Apply default value once when the field has no value. lastAppliedPathRef prevents
+  // re-applying on every render (e.g. when defaultValue() returns null) and ensures
+  // we apply per path when the hook is used for different fields.
+  const lastAppliedPathRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (value == null && defaultValue && lastAppliedPathRef.current !== jsonPath) {
+      lastAppliedPathRef.current = jsonPath;
+      onValueChange(stablePath, SchemaAST.stringKeyword, defaultValue());
+    }
+  }, [value, defaultValue, onValueChange, stablePath, jsonPath]);
+
+  return value;
+};
+
+/**
+ * Get the state props for the given field.
+ */
+export const useFormFieldState = (componentName: string, path: (string | number)[] = []): FormFieldStateProps => {
+  const stablePath = useMemo(() => path, [Array.isArray(path) ? path.join('.') : path]);
+  const {
+    form: { getStatus, getValue, onBlur, onValueChange },
+  } = useFormContext(componentName);
+
+  return useMemo(
+    () => ({
+      getStatus: () => getStatus(stablePath),
+      getValue: () => getValue(stablePath),
+      onBlur: () => onBlur(stablePath),
+      onValueChange: (ast: SchemaAST.AST, value: any) => onValueChange(stablePath, ast, value),
+    }),
+    [getStatus, getValue, onBlur, onValueChange, stablePath],
+  );
+};

package/src/hooks/useFormHandler.ts

@@ -14,10 +14,7 @@ import { useDefaultValue } from '@dxos/react-ui';
 import { type ValidationError, validateSchema } from '@dxos/schema';
 import { type MaybePromise } from '@dxos/util';
 
-export type FormFieldStatus = {
-  status?: 'error';
-  error?: string;
-};
+import { type FormFieldStatus } from '#types';
 
 /**
  * Form properties.

package/src/index.ts

@@ -4,4 +4,5 @@
 
 export * from './components';
 export * from './hooks';
+export * from './types';
 export * from './util';

package/src/{components/testing.tsx → testing/TestLayout.tsx}

@@ -32,7 +32,7 @@ type TestPanelProps = ThemedClassName<PropsWithChildren>;
 
 export const TestPanel = slottable<HTMLDivElement, TestPanelProps>(({ children }, forwardedRef) => {
   return (
-    <div {...composableProps({ classNames: 'dx-container bg-card-surface rounded-md' })} ref={forwardedRef}>
+    <div {...composableProps({ classNames: 'dx-container dx-card-surface rounded-sm' })} ref={forwardedRef}>
       {children}
     </div>
   );

package/src/testing/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './schema';
+
+export * from './TestLayout';