@dxos/react-ui-form 0.8.4-main.c1de068 → 0.8.4-main.e098934

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

@@ -6,20 +6,22 @@ import '@dxos-theme';
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Obj, Type } from '@dxos/echo';
-import { Format, type EchoSchema, toJsonSchema, TypedObject } from '@dxos/echo-schema';
-import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
+import { Filter, Obj, Query, Type } from '@dxos/echo';
+import { type EchoSchema, Format, toJsonSchema } from '@dxos/echo-schema';
+import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { DataType, ProjectionModel, createView } from '@dxos/schema';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { QueryParser, createFilter } from '@dxos/react-ui-components';
+import { type DataType, ProjectionModel, createView, typenameFromQuery } from '@dxos/schema';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { ViewEditor, type ViewEditorProps } from './ViewEditor';
 import { translations } from '../../translations';
 import { TestLayout, TestPanel, VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
+import { ViewEditor, type ViewEditorProps } from './ViewEditor';
+
 // Type definition for debug objects exposed to tests.
 export type ViewEditorDebugObjects = {
   schema: EchoSchema;
@@ -27,7 +29,7 @@ export type ViewEditorDebugObjects = {
   projection: ProjectionModel;
 };
 
-type StoryProps = Pick<ViewEditorProps, 'readonly'>;
+type StoryProps = Pick<ViewEditorProps, 'readonly' | 'kind'>;
 
 const DefaultStory = (props: StoryProps) => {
   const space = useSpace();
@@ -36,16 +38,21 @@ const DefaultStory = (props: StoryProps) => {
   const [projection, setProjection] = useState<ProjectionModel>();
   useAsyncEffect(async () => {
     if (space) {
-      class TestSchema extends TypedObject({ typename: 'example.com/type/Test', version: '0.1.0' })({
+      const TestSchema = Schema.Struct({
         name: Schema.String,
         email: Format.Email,
         salary: Format.Currency(),
-      }) {}
+      }).pipe(
+        Type.Obj({
+          typename: 'example.com/type/Test',
+          version: '0.1.0',
+        }),
+      );
 
       const [schema] = await space.db.schemaRegistry.register([TestSchema]);
       const view = createView({
         name: 'Test',
-        typename: schema.typename,
+        query: Query.select(Filter.type(TestSchema)),
         jsonSchema: toJsonSchema(TestSchema),
         presentation: Obj.make(Type.Expando, {}),
       });
@@ -57,20 +64,32 @@ const DefaultStory = (props: StoryProps) => {
     }
   }, [space]);
 
-  const views = useQuery(space, Filter.type(DataType.View));
-  const currentTypename = useMemo(() => view?.query?.typename, [view]);
-  const updateViewTypename = useCallback(
-    (newTypename: string) => {
-      if (!schema) {
+  const updateViewQuery = useCallback(
+    (newQueryString: string) => {
+      if (!schema || !view) {
         return;
       }
-      const matchingViews = views.filter((view) => view.query.typename === currentTypename);
-      for (const view of matchingViews) {
-        view.query.typename = newTypename;
+
+      if (props.kind === 'advanced') {
+        try {
+          const parser = new QueryParser(newQueryString);
+          // TODO(wittjosiah): When this fails it should show validation errors in the UI.
+          const newQuery = Query.select(createFilter(parser.parse()));
+          view.query = newQuery.ast;
+
+          const typename = typenameFromQuery(newQuery.ast);
+          if (typename) {
+            schema.updateTypename(typename);
+          }
+        } catch {}
+      } else {
+        const typename = newQueryString;
+        const newQuery = Query.select(Filter.typename(typename));
+        view.query = newQuery.ast;
+        schema.updateTypename(typename);
       }
-      schema.updateTypename(newTypename);
     },
-    [views, schema],
+    [view, schema],
   );
 
   const handleDelete = useCallback((property: string) => projection?.deleteFieldProjection(property), [projection]);
@@ -99,8 +118,9 @@ const DefaultStory = (props: StoryProps) => {
           schema={schema}
           view={view}
           registry={space?.db.schemaRegistry}
+          kind={props.kind}
           readonly={props.readonly}
-          onTypenameChanged={updateViewTypename}
+          onQueryChanged={updateViewQuery}
           onDelete={handleDelete}
         />
       </TestPanel>
@@ -108,19 +128,31 @@ const DefaultStory = (props: StoryProps) => {
   );
 };
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'ui/react-ui-form/ViewEditor',
   render: DefaultStory,
-  decorators: [withClientProvider({ createSpace: true }), withLayout({ fullscreen: true }), withTheme],
+  decorators: [
+    withClientProvider({
+      createSpace: true,
+    }),
+    withLayout({
+      fullscreen: true,
+    }),
+    withTheme,
+  ],
   parameters: { translations },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
 export const Readonly: Story = {
   args: { readonly: true },
 };
+
+export const Advanced: Story = {
+  args: { kind: 'advanced' },
+};

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

@@ -3,15 +3,16 @@
 //
 
 import { composeStories } from '@storybook/react';
-import { screen, cleanup, fireEvent, waitFor } from '@testing-library/react';
+import { cleanup, fireEvent, screen, waitFor } from '@testing-library/react';
 import { afterEach, describe, expect, test } from 'vitest';
 
 import { EchoSchema, isInstanceOf } from '@dxos/echo-schema';
 import { DataType, ProjectionModel } from '@dxos/schema';
 
+import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
+
 import * as stories from './ViewEditor.stories';
 import { type ViewEditorDebugObjects } from './ViewEditor.stories';
-import { VIEW_EDITOR_DEBUG_SYMBOL } from '../testing';
 
 const { Default } = composeStories(stories);
 
@@ -41,7 +42,7 @@ describe('ViewEditor', () => {
   test('renders view editor', async () => {
     await Default.run();
     await waitForViewEditor();
-    expect(screen.getByText('Typename')).toBeInTheDocument();
+    expect(screen.getByText('Record type')).toBeInTheDocument();
   });
 
   test('change property name', async () => {
@@ -140,7 +141,7 @@ describe('ViewEditor', () => {
     // Find the delete button for the 'name' property.
     const nameProperty = screen.getByText('name');
     const propertyRow = nameProperty.closest('[role="listitem"]');
-    const deleteButton = propertyRow?.querySelector('button:last-child');
+    const deleteButton = propertyRow?.querySelector('[data-testid="field.delete"]');
 
     if (!deleteButton) {
       throw new Error('Delete button not found');
@@ -188,19 +189,15 @@ describe('ViewEditor', () => {
     // Access the live objects directly from window using symbol.
     const debugObjects = getViewEditorDebugObjects();
 
-    // Check that hiddenFields is non-empty.
-    expect(debugObjects.view.projection.hiddenFields).toBeDefined();
-    expect(debugObjects.view.projection.hiddenFields!.length).toBeGreaterThan(0);
-
     // Click the show button
     fireEvent.click(screen.getByTestId('show-field-button'));
 
     // Wait for the data to update and check that hiddenFields is empty.
     await waitFor(() => {
-      expect(debugObjects.view.projection.hiddenFields!.length).toBe(0);
+      expect(debugObjects.view.projection.fields.filter(({ visible }) => visible === false)!.length).toBe(0);
     });
 
     // Also verify that the field is back in the visible fields list.
-    expect(debugObjects.view.projection.fields.length).toBeGreaterThan(0);
+    expect(debugObjects.view.projection.fields.filter(({ visible }) => visible !== false).length).toBeGreaterThan(0);
   });
 });

package/src/components/ViewEditor/ViewEditor.tsx

@@ -2,40 +2,43 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import { Match, Schema } from 'effect';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { type SchemaRegistry } from '@dxos/echo-db';
 import { EchoSchema, Format, type JsonProp, isMutable, toJsonSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
+import { getSpace } from '@dxos/react-client/echo';
 import { Callout, IconButton, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { QueryEditor, QuerySerializer, createExpression } from '@dxos/react-ui-components';
 import { List } from '@dxos/react-ui-list';
 import { cardSpacing } from '@dxos/react-ui-stack';
-import { ghostHover, inputTextLabel, mx } from '@dxos/react-ui-theme';
-import { FieldSchema, type FieldType, VIEW_FIELD_LIMIT, type DataType, ProjectionModel } from '@dxos/schema';
+import { inputTextLabel, mx, subtleHover } from '@dxos/react-ui-theme';
+import {
+  type DataType,
+  FieldSchema,
+  type FieldType,
+  ProjectionModel,
+  VIEW_FIELD_LIMIT,
+  typenameFromQuery,
+} from '@dxos/schema';
 
 import { translationKey } from '../../translations';
 import { FieldEditor } from '../FieldEditor';
-import { Form, type FormProps } from '../Form';
+import { Form, type FormProps, type InputComponent, type InputProps } from '../Form';
 
-const grid = 'grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]';
-
-const ViewMetaSchema = Schema.Struct({
-  typename: Format.URL.annotations({
-    title: 'Typename',
-  }),
-}).pipe(Schema.mutable);
-
-type ViewMetaType = Schema.Schema.Type<typeof ViewMetaSchema>;
+const listGrid = 'grid grid-cols-[min-content_1fr_min-content_min-content_min-content]';
+const listItemGrid = 'grid grid-cols-subgrid col-span-5';
 
 export type ViewEditorProps = ThemedClassName<
   {
     schema: Schema.Schema.AnyNoContext;
     view: DataType.View;
+    kind?: 'basic' | 'advanced';
     registry?: SchemaRegistry;
     readonly?: boolean;
     showHeading?: boolean;
-    onTypenameChanged?: (typename: string) => void;
+    onQueryChanged?: (query: string) => void;
     onDelete?: (fieldId: string) => void;
   } & Pick<FormProps<any>, 'outerSpacing'>
 >;
@@ -47,37 +50,52 @@ export const ViewEditor = ({
   classNames,
   schema,
   view,
+  kind = 'basic',
   registry,
-  readonly: _readonly,
+  readonly,
   showHeading = false,
-  onTypenameChanged,
+  onQueryChanged,
   onDelete,
   outerSpacing = true,
 }: ViewEditorProps) => {
+  const space = getSpace(view);
+  const schemaReadonly = !isMutable(schema);
   const { t } = useTranslation(translationKey);
-  const projection = useMemo(() => {
+  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, view.projection]);
-  const [field, setField] = useState<FieldType>();
-  const readonly = _readonly || !isMutable(schema);
+  const [expandedField, setExpandedField] = useState<FieldType['id']>();
+
+  const serializedQuery = Match.value(kind).pipe(
+    Match.when('basic', () => typenameFromQuery(view.query)),
+    Match.when('advanced', () => {
+      if (view.query.type !== 'select') {
+        return '';
+      }
+
+      const serializer = new QuerySerializer();
+      return serializer.serialize(createExpression(view.query.filter));
+    }),
+    Match.exhaustive,
+  );
 
-  // TODO(burdon): Should be reactive.
-  const viewValues = useMemo(() => {
-    return {
-      // TODO(burdon): Need to warn user of possible consequences of editing.
-      // TODO(burdon): Settings should have domain name owned by user.
-      typename: view.query.typename,
-    };
-  }, [view.query.typename]);
+  const viewSchema = useMemo(() => {
+    return Schema.Struct({
+      query:
+        kind === 'basic'
+          ? Format.URL.annotations({ title: 'Record type' })
+          : Schema.String.annotations({ title: 'Query' }),
+    }).pipe(Schema.mutable);
+  }, [kind]);
+  // TODO(burdon): Need to warn user of possible consequences of editing.
+  // TODO(burdon): Settings should have domain name owned by user.
+  const viewValues = useMemo(() => ({ query: serializedQuery }), [serializedQuery]);
 
-  const handleSelect = useCallback(
+  const handleToggleField = useCallback(
     (field: FieldType) => {
-      if (readonly) {
-        return;
-      }
-      setField((f) => (f === field ? undefined : field));
+      setExpandedField((prevExpandedFieldId) => (prevExpandedFieldId === field.id ? undefined : field.id));
     },
     [readonly],
   );
@@ -86,32 +104,32 @@ export const ViewEditor = ({
 
   const handleAdd = useCallback(() => {
     invariant(!readonly);
-    const field = projection.createFieldProjection();
-    setField(field);
-  }, [schema, projection, readonly]);
+    const field = projectionModel.createFieldProjection();
+    setExpandedField(field.id);
+  }, [schema, projectionModel, readonly]);
 
   const handleUpdate = useCallback(
-    ({ typename }: ViewMetaType) => {
+    ({ query }: Schema.Schema.Type<typeof viewSchema>) => {
       invariant(!readonly);
       requestAnimationFrame(() => {
-        if (view.query.typename !== typename && !readonly) {
-          onTypenameChanged?.(typename);
+        if (serializedQuery !== query && !readonly) {
+          onQueryChanged?.(query);
         }
       });
     },
-    [view.query.typename, onTypenameChanged, readonly],
+    [serializedQuery, onQueryChanged, readonly],
   );
 
   const handleDelete = useCallback(
     (fieldId: string) => {
       invariant(!readonly);
-      if (fieldId === field?.id) {
-        setField(undefined);
+      if (fieldId === expandedField) {
+        setExpandedField(undefined);
       }
 
       onDelete?.(fieldId);
     },
-    [field, onDelete, readonly],
+    [expandedField, onDelete, readonly],
   );
 
   const handleMove = useCallback(
@@ -126,134 +144,135 @@ export const ViewEditor = ({
     [view.projection.fields, readonly],
   );
 
-  const handleClose = useCallback(() => setField(undefined), []);
-
-  const hiddenProperties = projection.getHiddenProperties();
+  const handleClose = useCallback(() => setExpandedField(undefined), []);
 
   const handleHide = useCallback(
     (fieldId: string) => {
-      setField(undefined);
-      projection.hideFieldProjection(fieldId);
+      setExpandedField(undefined);
+      projectionModel.hideFieldProjection(fieldId);
     },
-    [projection],
+    [projectionModel],
   );
 
   const handleShow = useCallback(
     (property: string) => {
-      setField(undefined);
-      projection.showFieldProjection(property as JsonProp);
+      setExpandedField(undefined);
+      projectionModel.showFieldProjection(property as JsonProp);
     },
-    [projection],
+    [projectionModel],
+  );
+
+  const custom: Partial<Record<string, InputComponent>> = useMemo(
+    () =>
+      kind === 'advanced'
+        ? {
+            ['query' satisfies keyof Schema.Schema.Type<typeof viewSchema>]: (props: InputProps) => {
+              const handleChange = useCallback(
+                (text: string) => props.onValueChange('string', text),
+                [props.onValueChange],
+              );
+
+              // TODO(wittjosiah): Add label & input styles.
+              return <QueryEditor space={space} initialValue={props.getValue()} onChange={handleChange} />;
+            },
+          }
+        : {},
+    [],
   );
 
   return (
     <div role='none' className={mx(classNames)}>
-      {readonly && (
-        <div role='none' className={mx('is-full', outerSpacing && 'plb-cardSpacingBlock pli-cardSpacingInline')}>
-          <Callout.Root valence='info'>
-            <Callout.Title>{t('system schema description')}</Callout.Title>
-          </Callout.Root>
-        </div>
+      {schemaReadonly && (
+        <Callout.Root valence='info' classNames={['mlb-cardSpacingBlock', outerSpacing && 'mli-cardSpacingInline']}>
+          <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<ViewMetaType>
+      <Form<Schema.Schema.Type<typeof viewSchema>>
         autoSave
-        schema={ViewMetaSchema}
+        schema={viewSchema}
         values={viewValues}
-        readonly={readonly}
+        readonly={readonly ? 'disabled-input' : false}
         onSave={handleUpdate}
         outerSpacing={outerSpacing}
+        Custom={custom}
       />
 
       <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
-        <label className={mx(inputTextLabel)}>{t('fields label')}</label>
+        <h2 className={mx(inputTextLabel)}>{t('fields label')}</h2>
 
         <List.Root<FieldType>
           items={view.projection.fields}
           isItem={Schema.is(FieldSchema)}
           getId={(field) => field.id}
-          readonly={readonly}
           onMove={readonly ? undefined : handleMove}
+          readonly={readonly}
         >
           {({ items: fields }) => (
             <>
-              {showHeading && (
-                <div role='heading' className={grid}>
-                  <div />
-                  <div className='flex items-center text-sm'>{t('field path label')}</div>
-                </div>
-              )}
-
-              <div role='list' className='flex flex-col is-full'>
-                {fields?.map((field) => (
-                  <List.Item<FieldType>
-                    key={field.id}
-                    item={field}
-                    classNames={mx(grid, ghostHover, 'overflow-hidden', !readonly && 'cursor-pointer')}
-                  >
-                    <List.ItemDragHandle />
-                    <List.ItemTitle onClick={() => handleSelect(field)}>{field.path}</List.ItemTitle>
-                    <List.ItemButton
-                      data-testid='hide-field-button'
-                      icon='ph--eye-slash--regular'
-                      // TDOO(burdon): Is this the correct test?
-                      disabled={view.projection.fields.length <= 1}
-                      onClick={() => handleHide(field.id)}
-                    />
-                    {/* TODO(burdon): Remove unless implement undo. */}
-                    {!readonly && (
-                      <List.ItemDeleteButton
-                        disabled={view.projection.fields.length <= 1}
-                        onClick={() => handleDelete(field.id)}
-                      />
-                    )}
-                  </List.Item>
-                ))}
+              {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} />
+                        <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))}
+                        />
+                        {/* TODO(burdon): Remove unless implement undo. */}
+                        <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 && (
+                        <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>
-
-        {hiddenProperties.length > 0 && (
-          <>
-            <label className={mx(inputTextLabel)}>{t('hidden fields label')}</label>
-
-            <List.Root<string>
-              items={hiddenProperties}
-              isItem={(item): item is string => typeof item === 'string'}
-              getId={(property) => property}
-            >
-              {({ items: properties }) => (
-                <div role='list' className='flex flex-col is-full'>
-                  {properties?.map((property) => (
-                    <List.Item<string>
-                      key={property}
-                      item={property}
-                      classNames={mx(grid, ghostHover, !readonly && 'cursor-pointer')}
-                    >
-                      <List.ItemDragHandle disabled />
-                      <List.ItemTitle>{property}</List.ItemTitle>
-                      <List.ItemButton
-                        icon='ph--eye--regular'
-                        onClick={() => handleShow(property)}
-                        data-testid='show-field-button'
-                      />
-                    </List.Item>
-                  ))}
-                </div>
-              )}
-            </List.Root>
-          </>
-        )}
       </div>
 
-      {field && (
-        <FieldEditor key={field.id} projection={projection} field={field} registry={registry} onSave={handleClose} />
-      )}
-
-      {!readonly && !field && (
+      {!readonly && !expandedField && (
         <div role='none' className={outerSpacing ? cardSpacing : 'mlb-cardSpacingBlock'}>
           <IconButton
             icon='ph--plus--regular'
@@ -261,7 +280,7 @@ export const ViewEditor = ({
             onClick={readonly ? undefined : handleAdd}
             // TODO(burdon): Show field limit in ux (not tooltip).
             disabled={view.projection.fields.length >= VIEW_FIELD_LIMIT}
-            classNames='flex is-full'
+            classNames='is-full'
           />
         </div>
       )}

package/src/components/index.ts

@@ -2,8 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './deprecated';
-
 export * from './ControlSection';
 export * from './FieldEditor';
 export * from './Form';

package/src/components/testing.tsx

@@ -9,16 +9,22 @@ import { Card } from '@dxos/react-ui-stack';
 import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { mx, textBlockWidth } from '@dxos/react-ui-theme';
 
-export const TestLayout = ({ classNames, json, children }: ThemedClassName<PropsWithChildren<{ json?: any }>>) => (
-  <div className='w-full h-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='w-full text-xs' testId='debug' />
-  </div>
-);
+type TestLayoutProps = ThemedClassName<PropsWithChildren<{ json?: any }>>;
 
-export const TestPanel = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <Card.StaticRoot classNames={[textBlockWidth, classNames]}>{children}</Card.StaticRoot>
-);
+export const TestLayout = ({ classNames, children, json }: TestLayoutProps) => {
+  return (
+    <div className='w-full h-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='w-full text-xs' testId='debug' />
+    </div>
+  );
+};
+
+type TestPanelProps = ThemedClassName<PropsWithChildren>;
+
+export const TestPanel = ({ classNames, children }: TestPanelProps) => {
+  return <Card.StaticRoot classNames={[textBlockWidth, classNames]}>{children}</Card.StaticRoot>;
+};
 
 // Symbol for accessing debug objects in tests.
 export const VIEW_EDITOR_DEBUG_SYMBOL = Symbol('viewEditorDebug');