@dxos/react-ui-form 0.8.4-main.7ace549 → 0.8.4-main.937b3ca

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

@@ -7,16 +7,16 @@ import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { DXN, Filter, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
-import { type EchoSchema, Format } from '@dxos/echo/internal';
+import { type EchoSchema, Format, type Mutable } from '@dxos/echo/internal';
 import { useQuery } from '@dxos/react-client/echo';
-import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { type ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
 import { Employer, Organization, Person, Project } from '@dxos/types';
 
 import { translations } from '../../translations';
-import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
+import { TestLayout, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 
@@ -24,7 +24,7 @@ const types = [
   // TODO(burdon): Get label from annotation.
   { value: Organization.Organization.typename, label: 'Organization' },
   { value: Person.Person.typename, label: 'Person' },
-  { value: Type.getTypename(Project.Project), label: 'Project' },
+  { value: Project.Project.typename, label: 'Project' },
   { value: Employer.Employer.typename, label: 'Employer' },
 ];
 
@@ -38,12 +38,12 @@ export type ViewEditorDebugObjects = {
 type StoryProps = Pick<ViewEditorProps, 'readonly' | 'mode'>;
 
 const DefaultStory = (props: StoryProps) => {
-  const { space } = useClientProvider();
+  const { space } = useClientStory();
   const [schema, setSchema] = useState<EchoSchema>();
   const [view, setView] = useState<View.View>();
   const projectionRef = useRef<ProjectionModel>(null);
 
-  const tags = useQuery(space, Filter.type(Tag.Tag));
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
 
   useAsyncEffect(async () => {
     if (space) {
@@ -52,7 +52,7 @@ const DefaultStory = (props: StoryProps) => {
         email: Format.Email,
         salary: Format.Currency(),
       }).pipe(
-        Type.Obj({
+        Type.object({
           typename: 'example.com/type/Test',
           version: '0.1.0',
         }),
@@ -63,7 +63,7 @@ const DefaultStory = (props: StoryProps) => {
         description: Schema.String,
         completed: Schema.Boolean,
       }).pipe(
-        Type.Obj({
+        Type.object({
           typename: 'example.com/type/Alternate',
           version: '0.1.0',
         }),
@@ -90,7 +90,9 @@ const DefaultStory = (props: StoryProps) => {
       if (props.mode === 'tag') {
         const queue = target && DXN.tryParse(target) ? target : undefined;
         const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
-        view.query.ast = query.ast;
+        Obj.change(view, (v) => {
+          v.query.ast = query.ast as Mutable<typeof query.ast>;
+        });
 
         const typename = getTypenameFromQuery(query.ast);
         const [newSchema] = await space.db.schemaRegistry.query({ typename }).run();
@@ -102,10 +104,14 @@ const DefaultStory = (props: StoryProps) => {
           query,
           jsonSchema: newSchema.jsonSchema,
         });
-        view.projection = Obj.getSnapshot(newView).projection;
+        Obj.change(view, (v) => {
+          v.projection = Obj.getSnapshot(newView).projection as Mutable<typeof v.projection>;
+        });
         setSchema(() => newSchema);
       } else {
-        view.query.ast = newQuery;
+        Obj.change(view, (v) => {
+          v.query.ast = newQuery as Mutable<typeof newQuery>;
+        });
         schema.updateTypename(getTypenameFromQuery(newQuery));
       }
     },
@@ -140,20 +146,18 @@ const DefaultStory = (props: StoryProps) => {
 
   return (
     <TestLayout json={json}>
-      <TestPanel>
-        <ViewEditor
-          ref={projectionRef}
-          schema={schema}
-          view={view}
-          registry={space?.db.schemaRegistry}
-          mode={props.mode}
-          readonly={props.readonly}
-          types={types}
-          tags={tags}
-          onQueryChanged={updateViewQuery}
-          onDelete={handleDelete}
-        />
-      </TestPanel>
+      <ViewEditor
+        ref={projectionRef}
+        schema={schema}
+        view={view}
+        registry={space?.db.schemaRegistry}
+        mode={props.mode}
+        readonly={props.readonly}
+        types={types}
+        tags={tags}
+        onQueryChanged={updateViewQuery}
+        onDelete={handleDelete}
+      />
     </TestLayout>
   );
 };

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

@@ -54,7 +54,7 @@ describe('ViewEditor', () => {
     const nameField = screen.getByText('name');
     fireEvent.click(nameField);
 
-    const fieldInput = screen.getByPlaceholderText('Field name.');
+    const fieldInput = screen.getByPlaceholderText('Property name');
     fireEvent.change(fieldInput, { target: { value: 'new_property' } });
 
     fireEvent.click(screen.getByTestId('save-button'));
@@ -93,8 +93,12 @@ describe('ViewEditor', () => {
     const addButton = screen.getByText('Add property');
     fireEvent.click(addButton);
 
+    // Open the last field.
+    const buttons = screen.getAllByTestId('field.toggle');
+    fireEvent.click(buttons.at(-1)!);
+
     // Fill out the property field.
-    const fieldInput = screen.getByPlaceholderText('Field name.');
+    const fieldInput = screen.getByPlaceholderText('Property name');
     fireEvent.change(fieldInput, { target: { value: 'added_property' } });
 
     // Click the format combo box and select the first option.

package/src/components/ViewEditor/ViewEditor.tsx

@@ -2,33 +2,40 @@
 // Copyright 2024 DXOS.org
 //
 
+import { RegistryContext } from '@effect-atom/atom-react';
 import * as Array from 'effect/Array';
 import * as Match from 'effect/Match';
 import * as Option from 'effect/Option';
 import * as Schema from 'effect/Schema';
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useContext, useImperativeHandle, useMemo, useState } from 'react';
 
-import { QueryAST } from '@dxos/echo';
-import { EchoSchema, Format, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo/internal';
-import { Filter, Query, type SchemaRegistry } from '@dxos/echo-db';
+import { Filter, Format, Obj, Query, QueryAST, type SchemaRegistry } from '@dxos/echo';
+import { EchoSchema, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo/internal';
 import { invariant } from '@dxos/invariant';
 import { Callout, IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { QueryForm, type QueryFormProps } from '@dxos/react-ui-components';
 import { List } from '@dxos/react-ui-list';
-import { cardSpacing } from '@dxos/react-ui-stack';
-import { inputTextLabel, mx, subtleHover } from '@dxos/react-ui-theme';
 import {
   FieldSchema,
   type FieldType,
   ProjectionModel,
   VIEW_FIELD_LIMIT,
   type View,
+  createDirectChangeCallback,
+  createEchoChangeCallback,
   getTypenameFromQuery,
 } from '@dxos/schema';
+import { mx, osTranslations, subtleHover } from '@dxos/ui-theme';
 
 import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
-import { Form, type FormProps, type InputComponent, InputHeader, type InputProps } from '../Form';
+import {
+  Form,
+  type FormFieldComponent,
+  type FormFieldComponentProps,
+  FormFieldLabel,
+  type FormFieldMap,
+} from '../Form';
 
 const listGrid = 'grid grid-cols-[min-content_1fr_min-content_min-content_min-content]';
 const listItemGrid = 'grid grid-cols-subgrid col-span-5';
@@ -38,13 +45,12 @@ export type ViewEditorProps = ThemedClassName<
     schema: Schema.Schema.AnyNoContext;
     view: View.View;
     mode?: 'schema' | 'tag';
-    registry?: SchemaRegistry;
+    registry?: SchemaRegistry.SchemaRegistry;
     readonly?: boolean;
     showHeading?: boolean;
     onQueryChanged?: (query: QueryAST.Query, target?: string) => void;
     onDelete?: (fieldId: string) => void;
-  } & Pick<FormProps<any>, 'outerSpacing'> &
-    Pick<QueryFormProps, 'types' | 'tags'>
+  } & Pick<QueryFormProps, 'types' | 'tags'>
 >;
 
 /**
@@ -64,17 +70,33 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       tags,
       onQueryChanged,
       onDelete,
-      outerSpacing = true,
     },
     forwardedRef,
   ) => {
+    const atomRegistry = useContext(RegistryContext);
     const schemaReadonly = !isMutable(schema);
     const { t } = useTranslation(translationKey);
+
     const projectionModel = useMemo(() => {
       // Use reactive and mutable version of json schema when schema is mutable.
       const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-      return new ProjectionModel(jsonSchema, view.projection);
-    }, [schema, JSON.stringify(view.projection)]);
+
+      // Use createEchoChangeCallback for mutable schemas (EchoSchema), otherwise use direct mutation.
+      const change =
+        schema instanceof EchoSchema
+          ? createEchoChangeCallback(view, schema)
+          : createDirectChangeCallback(view.projection, jsonSchema);
+
+      const model = new ProjectionModel({
+        registry: atomRegistry,
+        view,
+        baseSchema: jsonSchema,
+        change,
+      });
+
+      return model;
+    }, [atomRegistry, schema, view]);
+
     useImperativeHandle(forwardedRef, () => projectionModel, [projectionModel]);
     const [expandedField, setExpandedField] = useState<FieldType['id']>();
 
@@ -116,20 +138,17 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       [mode, view.query.ast, queueTarget],
     );
 
-    const handleToggleField = useCallback(
-      (field: FieldType) => {
-        setExpandedField((prevExpandedFieldId) => (prevExpandedFieldId === field.id ? undefined : field.id));
-      },
-      [readonly],
+    const fieldMap = useMemo<FormFieldMap | undefined>(
+      () => (mode === 'tag' ? customFields({ types, tags }) : undefined),
+      [mode, types, tags],
     );
 
-    // TODO(burdon): Check if mutable; variant of useCallback that return undefined if readonly?
-
+    // TODO(burdon): Check if mutable.
     const handleAdd = useCallback(() => {
       invariant(!readonly);
       const field = projectionModel.createFieldProjection();
       setExpandedField(field.id);
-    }, [schema, projectionModel, readonly]);
+    }, [projectionModel, readonly]);
 
     const handleUpdate = useCallback(
       (values: any) => {
@@ -153,143 +172,32 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
       [expandedField, onDelete, readonly],
     );
 
-    const handleMove = useCallback(
-      (fromIndex: number, toIndex: number) => {
-        invariant(!readonly);
-        // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
-        const fields = [...view.projection.fields];
-        const [moved] = fields.splice(fromIndex, 1);
-        fields.splice(toIndex, 0, moved);
-        view.projection.fields = fields;
-      },
-      [view.projection.fields, readonly],
-    );
-
-    const handleClose = useCallback(() => setExpandedField(undefined), []);
-
-    const handleHide = useCallback(
-      (fieldId: string) => {
-        setExpandedField(undefined);
-        projectionModel.hideFieldProjection(fieldId);
-      },
-      [projectionModel],
-    );
-
-    const handleShow = useCallback(
-      (property: string) => {
-        setExpandedField(undefined);
-        projectionModel.showFieldProjection(property as JsonProp);
-      },
-      [projectionModel],
-    );
-
-    const custom = useMemo(() => (mode === 'tag' ? customFields({ types, tags }) : undefined), [types, tags, mode]);
-
     return (
       <div role='none' className={mx(classNames)}>
-        {/* If readonlyProp is set, then the callout is not needed. */}
+        {/* If readonly is set, then the callout is not needed. */}
         {schemaReadonly && !readonly && (
-          <Callout.Root valence='info' classNames={['mlb-cardSpacingBlock', outerSpacing && 'mli-cardSpacingInline']}>
+          <Callout.Root valence='info' classNames='mlb-cardSpacingBlock'>
             <Callout.Title>{t('system schema description')}</Callout.Title>
           </Callout.Root>
         )}
 
         {/* TODO(burdon): Is the form read-only or just the schema? */}
-        {/* TODO(burdon): Readonly fields should take up the same space as editable fields (just be ghosted). */}
-        <Form<Schema.Schema.Type<typeof viewSchema>>
-          autoSave
-          schema={viewSchema}
-          values={viewValues}
-          onSave={handleUpdate}
-          outerSpacing={outerSpacing}
-          Custom={custom}
-        />
-
-        <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
-          <h2 className={mx(inputTextLabel)}>{t('fields label')}</h2>
-
-          <List.Root<FieldType>
-            items={view.projection.fields}
-            isItem={Schema.is(FieldSchema)}
-            getId={(field) => field.id}
-            onMove={readonly ? undefined : handleMove}
+        <Form.Root schema={viewSchema} values={viewValues} fieldMap={fieldMap} autoSave onSave={handleUpdate}>
+          <Form.FieldSet />
+
+          <FormFieldLabel label={t('fields label')} asChild />
+          <FieldList
+            schema={schema}
+            view={view}
+            registry={registry}
             readonly={readonly}
-          >
-            {({ items: fields }) => (
-              <>
-                {showHeading && <h3 className='text-sm'>{t('field path label')}</h3>}
-                <div role='list' className={listGrid}>
-                  {fields?.map((field) => {
-                    const hidden = field.visible === false;
-                    return (
-                      <List.Item<FieldType>
-                        key={field.id}
-                        item={field}
-                        classNames={listItemGrid}
-                        aria-expanded={expandedField === field.id}
-                      >
-                        <div
-                          role='none'
-                          className={mx(subtleHover, listItemGrid, 'rounded-sm cursor-pointer min-bs-10')}
-                        >
-                          <List.ItemDragHandle disabled={readonly || schemaReadonly} />
-                          <List.ItemTitle
-                            classNames={hidden && 'text-subdued'}
-                            onClick={() => handleToggleField(field)}
-                          >
-                            {field.path}
-                          </List.ItemTitle>
-                          <List.ItemButton
-                            label={t(hidden ? 'show field label' : 'hide field label')}
-                            data-testid={hidden ? 'show-field-button' : 'hide-field-button'}
-                            icon={hidden ? 'ph--eye-closed--regular' : 'ph--eye--regular'}
-                            autoHide={false}
-                            disabled={readonly || (!hidden && projectionModel.fields.length <= 1)}
-                            onClick={() => (hidden ? handleShow(field.path) : handleHide(field.id))}
-                          />
-                          {!readonly && (
-                            <>
-                              <List.ItemDeleteButton
-                                label={t('delete field label')}
-                                autoHide={false}
-                                disabled={readonly || schemaReadonly || view.projection.fields.length <= 1}
-                                onClick={() => handleDelete(field.id)}
-                                data-testid='field.delete'
-                              />
-                              <IconButton
-                                iconOnly
-                                variant='ghost'
-                                label={t('toggle expand label', { ns: 'os' })}
-                                icon={
-                                  expandedField === field.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'
-                                }
-                                onClick={() => handleToggleField(field)}
-                              />
-                            </>
-                          )}
-                        </div>
-                        {expandedField === field.id && !readonly && (
-                          <div role='none' className='col-span-5 mbs-1 mbe-1 border border-separator rounded-md'>
-                            <FieldEditor
-                              readonly={readonly || schemaReadonly ? 'disabled-input' : false}
-                              projection={projectionModel}
-                              field={field}
-                              registry={registry}
-                              onSave={handleClose}
-                            />
-                          </div>
-                        )}
-                      </List.Item>
-                    );
-                  })}
-                </div>
-              </>
-            )}
-          </List.Root>
-        </div>
+            showHeading={showHeading}
+            onDelete={handleDelete}
+          />
+        </Form.Root>
 
         {!readonly && !expandedField && (
-          <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
+          <div role='none' className='mlb-cardSpacingBlock'>
             <IconButton
               icon='ph--plus--regular'
               label={t('add property button label')}
@@ -305,17 +213,175 @@ export const ViewEditor = forwardRef<ProjectionModel, ViewEditorProps>(
   },
 );
 
-const customFields = ({ types, tags }: Pick<ViewEditorProps, 'types' | 'tags'>): Record<string, InputComponent> => ({
-  query: (props: InputProps) => {
-    const handleChange = useCallback(
-      (query: Query.Any) => props.onValueChange('object', query.ast),
-      [props.onValueChange],
+type FieldListProps = Pick<ViewEditorProps, 'schema' | 'view' | 'registry' | 'readonly' | 'showHeading' | 'onDelete'>;
+
+const FieldList = ({ schema, view, registry, readonly, showHeading = false, onDelete }: FieldListProps) => {
+  const atomRegistry = useContext(RegistryContext);
+  const schemaReadonly = !isMutable(schema);
+  const { t } = useTranslation(translationKey);
+
+  const projectionModel = useMemo(() => {
+    // Use reactive and mutable version of json schema when schema is mutable.
+    const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
+
+    // Use createEchoChangeCallback for mutable schemas (EchoSchema), otherwise use direct mutation.
+    const change =
+      schema instanceof EchoSchema
+        ? createEchoChangeCallback(view, schema)
+        : createDirectChangeCallback(view.projection, jsonSchema);
+
+    const model = new ProjectionModel({
+      registry: atomRegistry,
+      view,
+      baseSchema: jsonSchema,
+      change,
+    });
+
+    return model;
+  }, [atomRegistry, schema, view]);
+
+  const [expandedField, setExpandedField] = useState<FieldType['id']>();
+
+  const handleToggleField = useCallback(
+    (field: FieldType) => {
+      setExpandedField((prevExpandedFieldId) => (prevExpandedFieldId === field.id ? undefined : field.id));
+    },
+    [readonly],
+  );
+
+  const handleDelete = useCallback(
+    (fieldId: string) => {
+      invariant(!readonly);
+      if (fieldId === expandedField) {
+        setExpandedField(undefined);
+      }
+
+      onDelete?.(fieldId);
+    },
+    [expandedField, onDelete, readonly],
+  );
+
+  const handleMove = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      invariant(!readonly);
+      // NOTE(ZaymonFC): Using arrayMove here causes a race condition with the kanban model.
+      const fields = [...view.projection.fields];
+      const [moved] = fields.splice(fromIndex, 1);
+      fields.splice(toIndex, 0, moved);
+      Obj.change(view, (v) => {
+        v.projection.fields = fields;
+      });
+    },
+    [view.projection.fields, readonly],
+  );
+
+  const handleClose = useCallback(() => setExpandedField(undefined), []);
+
+  const handleHide = useCallback(
+    (fieldId: string) => {
+      setExpandedField(undefined);
+      projectionModel.hideFieldProjection(fieldId);
+    },
+    [projectionModel],
+  );
+
+  const handleShow = useCallback(
+    (property: string) => {
+      setExpandedField(undefined);
+      projectionModel.showFieldProjection(property as JsonProp);
+    },
+    [projectionModel],
+  );
+
+  return (
+    <List.Root<FieldType>
+      items={view.projection.fields as FieldType[]}
+      isItem={Schema.is(FieldSchema)}
+      getId={(field) => field.id}
+      onMove={readonly ? undefined : handleMove}
+      readonly={readonly}
+    >
+      {({ items: fields }) => (
+        <>
+          {showHeading && <h3 className='text-sm'>{t('field path label')}</h3>}
+          <div role='list' className={listGrid}>
+            {fields?.map((field) => {
+              const hidden = field.visible === false;
+              return (
+                <List.Item<FieldType>
+                  key={field.id}
+                  item={field}
+                  classNames={listItemGrid}
+                  aria-expanded={expandedField === field.id}
+                >
+                  <div role='none' className={mx(subtleHover, listItemGrid, 'rounded-sm cursor-pointer min-bs-10')}>
+                    <List.ItemDragHandle disabled={readonly || schemaReadonly} />
+                    <List.ItemTitle classNames={hidden && 'text-subdued'} onClick={() => handleToggleField(field)}>
+                      {field.path}
+                    </List.ItemTitle>
+                    <List.ItemButton
+                      label={t(hidden ? 'show field label' : 'hide field label')}
+                      data-testid={hidden ? 'show-field-button' : 'hide-field-button'}
+                      icon={hidden ? 'ph--eye-closed--regular' : 'ph--eye--regular'}
+                      autoHide={false}
+                      disabled={readonly || (!hidden && projectionModel.getFields().length <= 1)}
+                      onClick={() => (hidden ? handleShow(field.path) : handleHide(field.id))}
+                    />
+                    {!readonly && (
+                      <>
+                        <List.ItemDeleteButton
+                          label={t('delete field label')}
+                          autoHide={false}
+                          disabled={readonly || schemaReadonly || view.projection.fields.length <= 1}
+                          onClick={() => handleDelete(field.id)}
+                          data-testid='field.delete'
+                        />
+                        <IconButton
+                          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 role='none' className='col-span-5 mbs-1 mbe-1 border border-separator rounded-md'>
+                      <FieldEditor
+                        readonly={readonly || schemaReadonly}
+                        registry={registry}
+                        projection={projectionModel}
+                        field={field}
+                        onSave={handleClose}
+                      />
+                    </div>
+                  )}
+                </List.Item>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </List.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>
-        <InputHeader label={props.label} />
-        <QueryForm initialQuery={props.getValue()} types={types} tags={tags} onChange={handleChange} />
+        <FormFieldLabel readonly={readonly} label={label} />
+        <QueryForm initialQuery={getValue()} types={types} tags={tags} onChange={handleChange} />
       </Input.Root>
     );
   },

package/src/components/testing.tsx

@@ -5,25 +5,27 @@
 import React, { type PropsWithChildren } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-stack';
+import { Card } from '@dxos/react-ui-mosaic';
 import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
-import { mx, textBlockWidth } from '@dxos/react-ui-theme';
+import { textBlockWidth } from '@dxos/ui-theme';
 
 type TestLayoutProps = ThemedClassName<PropsWithChildren<{ json?: any }>>;
 
 export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
   return (
-    <div className='is-full bs-full grid grid-cols-[1fr_1fr] gap-2 overflow-hidden'>
-      <div className={mx('p-4 justify-center overflow-y-auto', classNames)}>{children}</div>
-      <JsonFilter data={json} classNames='is-full text-xs' testId='debug' />
+    <div className='is-full bs-full grid grid-cols-[1fr_1fr] p-4 gap-4 overflow-hidden'>
+      <TestPanel classNames={['flex flex-col bs-full overflow-y-auto', classNames]}>{children}</TestPanel>
+      <TestPanel classNames={'overflow-hidden'}>
+        <JsonFilter testId='debug' data={json} classNames='bs-full text-xs' />
+      </TestPanel>
     </div>
   );
 };
 
 type TestPanelProps = ThemedClassName<PropsWithChildren>;
 
-export const TestPanel = ({ classNames, children }: TestPanelProps) => {
-  return <Card.StaticRoot classNames={[textBlockWidth, classNames]}>{children}</Card.StaticRoot>;
+const TestPanel = ({ classNames, children }: TestPanelProps) => {
+  return <Card.Root classNames={['bs-full overflow-y-auto', textBlockWidth, classNames]}>{children}</Card.Root>;
 };
 
 // Symbol for accessing debug objects in tests.

package/src/hooks/index.ts

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