@dxos/plugin-debug 0.8.4-main.2e9d522 → 0.8.4-main.3eb6e50203

package/src/components/DebugSettings.tsx

@@ -4,15 +4,16 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { Capabilities, useCapabilities } from '@dxos/app-framework';
-import { type ConfigProto, defs, SaveConfig, Storage } from '@dxos/config';
+import { useCapabilities } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { useTranslation, Button, Toast, Input, useFileDownload, Select, Icon } from '@dxos/react-ui';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { Icon, IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
+import { Settings } from '@dxos/react-ui-form';
 import { setDeep } from '@dxos/util';
 
-import { DEBUG_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type DebugSettingsProps } from '../types';
 
 type Toast = {
@@ -25,14 +26,19 @@ const StorageAdapters = {
   idb: defs.Runtime.Client.Storage.StorageDriver.IDB,
 } as const;
 
-export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) => {
-  const { t } = useTranslation(DEBUG_PLUGIN);
+export type DebugSettingsComponentProps = {
+  settings: DebugSettingsProps;
+  onSettingsChange: (fn: (current: DebugSettingsProps) => DebugSettingsProps) => void;
+};
+
+export const DebugSettings = ({ settings, onSettingsChange }: DebugSettingsComponentProps) => {
+  const { t } = useTranslation(meta.id);
   const [toast, setToast] = useState<Toast>();
   const client = useClient();
   const download = useFileDownload();
   // TODO(mykola): Get updates from other places that change Config.
   const [storageConfig, setStorageConfig] = useState<ConfigProto>({});
-  const [upload] = useCapabilities(Capabilities.FileUploader);
+  const [upload] = useCapabilities(AppCapabilities.FileUploader);
 
   useEffect(() => {
     void Storage().then((config) => setStorageConfig(config));
@@ -46,22 +52,30 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
 
   const handleDownload = async () => {
     const data = await client.diagnostics();
-    const file = new Blob([JSON.stringify(data, undefined, 2)], { type: 'text/plain' });
+    const file = new Blob([JSON.stringify(data, undefined, 2)], {
+      type: 'text/plain',
+    });
     const fileName = `composer-${new Date().toISOString().replace(/\W/g, '-')}.json`;
     download(file, fileName);
 
     if (upload) {
-      const info = await upload(new File([file], fileName), client.spaces.default);
+      const info = await upload(client.spaces.default.db, new File([file], fileName));
       if (!info) {
         log.error('diagnostics failed to upload to IPFS');
         return;
       }
-      handleToast({ title: t('settings uploaded'), description: t('settings uploaded to clipboard') });
+      handleToast({
+        title: t('settings uploaded'),
+        description: t('settings uploaded to clipboard'),
+      });
 
       // TODO(nf): move to IpfsPlugin?
       const url = client.config.values.runtime!.services!.ipfs!.gateway + '/' + info.cid;
       void navigator.clipboard.writeText(url);
-      handleToast({ title: t('settings uploaded'), description: t('settings uploaded to clipboard') });
+      handleToast({
+        title: t('settings uploaded'),
+        description: t('settings uploaded to clipboard'),
+      });
       log.info('diagnostics', { url });
     }
   };
@@ -70,74 +84,94 @@ export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) =>
     try {
       const info = await client.repair();
       setStorageConfig(await Storage());
-      handleToast({ title: t('settings repair success'), description: JSON.stringify(info, undefined, 2) });
+      handleToast({
+        title: t('settings repair success'),
+        description: JSON.stringify(info, undefined, 2),
+      });
     } catch (err: any) {
-      handleToast({ title: t('settings repair failed'), description: err.message });
+      handleToast({
+        title: t('settings repair failed'),
+        description: err.message,
+      });
     }
   };
 
   return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('settings wireframe')}>
-        <Input.Switch checked={settings.wireframe} onCheckedChange={(checked) => (settings.wireframe = !!checked)} />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings download diagnostics')}>
-        <Button onClick={handleDownload}>
-          <Icon icon='ph--download-simple--regular' size={5} />
-        </Button>
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings repair')}>
-        <Button onClick={handleRepair}>
-          <Icon icon='ph--first-aid-kit--regular' size={5} />
-        </Button>
-      </DeprecatedFormInput>
-
-      {/* TODO(burdon): Move to layout? */}
-      {toast && (
-        <Toast.Root>
-          <Toast.Body>
-            <Toast.Title>
-              <Icon icon='ph--gift--duotone' size={5} classNames='inline mr-1' />
-              <span>{toast.title}</span>
-            </Toast.Title>
-            {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
-          </Toast.Body>
-        </Toast.Root>
-      )}
-
-      <DeprecatedFormInput label={t('settings choose storage adaptor')}>
-        <Select.Root
-          value={
-            Object.entries(StorageAdapters).find(
-              ([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
-            )?.[0]
-          }
-          onValueChange={(value) => {
-            if (confirm(t('settings storage adapter changed alert'))) {
-              updateConfig(
-                storageConfig,
-                setStorageConfig,
-                ['runtime', 'client', 'storage', 'dataStore'],
-                StorageAdapters[value as keyof typeof StorageAdapters],
-              );
-            }
-          }}
-        >
-          <Select.TriggerButton placeholder={t('settings data store label')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {Object.keys(StorageAdapters).map((key) => (
-                  <Select.Option key={key} value={key}>
-                    {t(`settings storage adaptor ${key} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-    </DeprecatedFormContainer>
+    <Settings.Root>
+      <Settings.Section title={t('settings title', { ns: meta.id })}>
+        <Settings.Group>
+          <Settings.ItemInput title={t('settings wireframe')}>
+            <Input.Switch
+              checked={settings.wireframe}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, wireframe: !!checked }))}
+            />
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings download diagnostics')}>
+            <IconButton
+              icon='ph--download-simple--regular'
+              iconOnly
+              label={t('settings download diagnostics')}
+              onClick={handleDownload}
+            />
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings repair')}>
+            <IconButton
+              icon='ph--first-aid-kit--regular'
+              iconOnly
+              label={t('settings repair')}
+              onClick={handleRepair}
+            />
+          </Settings.ItemInput>
+
+          {/* TODO(burdon): Move to layout? */}
+          {toast && (
+            <Toast.Root>
+              <Toast.Body>
+                <Toast.Title>
+                  <Icon icon='ph--gift--duotone' size={5} classNames='inline mr-1' />
+                  <span>{toast.title}</span>
+                </Toast.Title>
+                {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+              </Toast.Body>
+            </Toast.Root>
+          )}
+
+          <Settings.ItemInput title={t('settings choose storage adaptor')}>
+            <Select.Root
+              value={
+                Object.entries(StorageAdapters).find(
+                  ([_name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
+                )?.[0]
+              }
+              onValueChange={(value) => {
+                if (confirm(t('settings storage adapter changed alert'))) {
+                  updateConfig(
+                    storageConfig,
+                    setStorageConfig,
+                    ['runtime', 'client', 'storage', 'dataStore'],
+                    StorageAdapters[value as keyof typeof StorageAdapters],
+                  );
+                }
+              }}
+            >
+              <Select.TriggerButton placeholder={t('settings data store label')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {Object.keys(StorageAdapters).map((key) => (
+                      <Select.Option key={key} value={key}>
+                        {t(`settings storage adaptor ${key} label`)}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </Settings.ItemInput>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
   );
 };
 

package/src/components/DebugStatus.tsx

@@ -59,7 +59,7 @@ const _timer = (cb: (err?: Error) => void, options?: { min?: number; max?: numbe
 // TODO(burdon): Integrate with Sentry?
 const ErrorIndicator = () => {
   const [, forceUpdate] = useState({});
-  const errorRef = useRef<Error>();
+  const errorRef = useRef<Error>(null);
   useEffect(() => {
     const errorListener = (event: any) => {
       const error: Error = event.error ?? event.reason;
@@ -83,7 +83,7 @@ const ErrorIndicator = () => {
   }, []);
 
   const handleReset = () => {
-    errorRef.current = undefined;
+    errorRef.current = null;
     forceUpdate({});
   };
 

package/src/components/DevtoolsOverviewContainer.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
 import { StatsPanel, useStats } from '@dxos/devtools';
 
 export const DevtoolsOverviewContainer = () => {
@@ -12,7 +12,7 @@ export const DevtoolsOverviewContainer = () => {
 
   return (
     <StatsPanel stats={stats} onRefresh={refreshStats}>
-      <Surface role='devtools-overview' />
+      <Surface.Surface role='devtools-overview' />
     </StatsPanel>
   );
 };

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -2,47 +2,47 @@
 // Copyright 2024 DXOS.org
 //
 
-import { createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
+import type * as Schema from 'effect/Schema';
+
 import { addressToA1Notation } from '@dxos/compute';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
-import { DXN, Filter, Key, Obj, Ref, Type } from '@dxos/echo';
-import { type TypedObject } from '@dxos/echo-schema';
-import { DocumentType } from '@dxos/plugin-markdown/types';
-import { createSheet } from '@dxos/plugin-sheet/types';
-import { SheetType, type CellValue } from '@dxos/plugin-sheet/types';
-import { CanvasType, DiagramType } from '@dxos/plugin-sketch/types';
-import { SpaceAction } from '@dxos/plugin-space/types';
+import { DXN, Filter, Key, type Type } from '@dxos/echo';
+import { type OperationInvoker } from '@dxos/operation';
+import { Markdown } from '@dxos/plugin-markdown/types';
+import { Sheet } from '@dxos/plugin-sheet/types';
+import { Diagram } from '@dxos/plugin-sketch/types';
+import { SpaceOperation } from '@dxos/plugin-space/types';
 import { faker } from '@dxos/random';
 import { type Client } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
-import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
+import { View, getTypenameFromQuery } from '@dxos/schema';
+import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { range } from '@dxos/util';
 
 const generator: ValueGenerator = faker as any;
 
-export type ObjectGenerator<T extends Obj.Any> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
-
-const findViewByTypename = async (views: DataType.View[], typename: string) => {
-  return views.find((view) => view.query.typename === typename);
+const findViewByTypename = async (views: View.View[], typename: string) => {
+  return views.find((view) => getTypenameFromQuery(view.query.ast) === typename);
 };
 
-export const createGenerator = <T extends Obj.Any>(
+export type ObjectGenerator<T> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
+
+export const createGenerator = <S extends Type.Obj.Any>(
   client: Client,
-  dispatch: PromiseIntentDispatcher,
-  schema: TypedObject<T>,
-): ObjectGenerator<T> => {
-  return async (space: Space, n: number, cb?: (objects: T[]) => void): Promise<T[]> => {
+  invokePromise: OperationInvoker.OperationInvoker['invokePromise'],
+  schema: S,
+): ObjectGenerator<Schema.Schema.Type<S>> => {
+  return async (space: Space, n: number): Promise<Schema.Schema.Type<S>[]> => {
     const typename = schema.typename;
 
     // Find or create table and view.
-    const { objects: views } = await space.db.query(Filter.type(DataType.View)).run();
+    const views = await space.db.query(Filter.type(View.View)).run();
     const view = await findViewByTypename(views, typename);
-    const staticSchema = client?.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
+    const staticSchema = client?.graph.schemaRegistry.query({ typename }).runSync()[0];
     if (!view && !staticSchema) {
-      await dispatch(createIntent(SpaceAction.AddSchema, { space, schema }));
+      await invokePromise(SpaceOperation.AddSchema, { db: space.db, schema, show: false });
     } else if (!view && staticSchema) {
-      await dispatch(createIntent(SpaceAction.UseStaticSchema, { space, typename }));
+      await invokePromise(SpaceOperation.UseStaticSchema, { db: space.db, typename, show: false });
     }
 
     // Create objects.
@@ -53,13 +53,13 @@ export const createGenerator = <T extends Obj.Any>(
 
 export const staticGenerators = new Map<string, ObjectGenerator<any>>([
   [
-    DocumentType.typename,
+    Markdown.Document.typename,
     async (space, n, cb) => {
       const objects = range(n).map(() => {
         return space.db.add(
-          Obj.make(DocumentType, {
+          Markdown.make({
             name: faker.commerce.productName(),
-            content: Ref.make(Obj.make(DataType.Text, { content: faker.lorem.sentences(5) })),
+            content: faker.lorem.sentences(5),
           }),
         );
       });
@@ -69,17 +69,10 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     },
   ],
   [
-    DiagramType.typename,
+    Diagram.Diagram.typename,
     async (space, n, cb) => {
       const objects = range(n).map(() => {
-        // TODO(burdon): Generate diagram.
-        const obj = space.db.add(
-          Obj.make(DiagramType, {
-            name: faker.commerce.productName(),
-            canvas: Ref.make(Obj.make(CanvasType, { content: {} })),
-          }),
-        );
-
+        const obj = space.db.add(Diagram.make({ name: faker.commerce.productName() }));
         return obj;
       });
 
@@ -89,10 +82,10 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
   ],
   // TODO(burdon): Create unit tests.
   [
-    SheetType.typename,
+    Sheet.Sheet.typename,
     async (space, n, cb) => {
       const objects = range(n).map(() => {
-        const cells: Record<string, CellValue> = {};
+        const cells: Record<string, Sheet.CellValue> = {};
         const year = new Date().getFullYear();
         const cols = 4;
         const rows = 16;
@@ -114,7 +107,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
         // TODO(burdon): Set width.
         // TODO(burdon): Set formatting for columns.
         return space.db.add(
-          createSheet({
+          Sheet.make({
             name: faker.commerce.productName(),
             cells,
           }),

package/src/components/SpaceGenerator/SchemaTable.tsx

@@ -19,8 +19,8 @@ export const SchemaTable = ({ types, objects = {}, label, onClick }: SchemaTable
       <h2 className='p-2'>{label}</h2>
       {types.map((type) => (
         <div key={type.typename} className='grid grid-cols-subgrid col-span-3 items-center'>
-          <div className='px-2 text-sm font-mono text-subdued'>{type.typename}</div>
-          <div className='px-2 text-right font-mono'>{objects[type.typename] ?? 0}</div>
+          <div className='pli-2 text-sm font-mono text-subdued'>{type.typename}</div>
+          <div className='pli-2 text-right font-mono'>{objects[type.typename] ?? 0}</div>
           <IconButton
             variant='ghost'
             icon='ph--plus--regular'

package/src/components/SpaceGenerator/SpaceGenerator.stories.tsx

@@ -2,16 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
+import { OperationPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { useSpaces } from '@dxos/react-client/echo';
-import { render, withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { render } from '@dxos/storybook-utils';
 
 import { SpaceGenerator } from './SpaceGenerator';
 
@@ -24,29 +24,31 @@ const DefaultStory = () => {
   return <SpaceGenerator space={space} />;
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-debug/SpaceGenerator',
-  component: SpaceGenerator,
+  component: SpaceGenerator as any,
   render: render(DefaultStory),
   decorators: [
+    withTheme(),
     withPluginManager({
       plugins: [
         ClientPlugin({
-          onClientInitialized: async (_, client) => {
-            await client.halo.createIdentity();
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
         }),
-        IntentPlugin(),
+        OperationPlugin(),
       ],
     }),
-    withLayout(),
-    withTheme,
   ],
   parameters: {
     layout: 'fullscreen',
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -4,62 +4,67 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { ComputeGraph } from '@dxos/conductor';
-import { Filter, type Obj } from '@dxos/echo';
-import { DocumentType } from '@dxos/plugin-markdown/types';
-import { SheetType } from '@dxos/plugin-sheet/types';
-import { DiagramType } from '@dxos/plugin-sketch/types';
+import { Filter, Obj, type Type } from '@dxos/echo';
+import { Markdown } from '@dxos/plugin-markdown/types';
+import { Sheet } from '@dxos/plugin-sheet/types';
+import { Diagram } from '@dxos/plugin-sketch/types';
 import { useClient } from '@dxos/react-client';
-import { getTypename, type Space } from '@dxos/react-client/echo';
-import { IconButton, Input, Toolbar, useAsyncEffect } from '@dxos/react-ui';
+import { type Space } from '@dxos/react-client/echo';
+import { IconButton, Input, Layout, ScrollArea, Toolbar, useAsyncEffect } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { DataType } from '@dxos/schema';
+import { Organization, Person, Task } from '@dxos/types';
 import { jsonKeyReplacer, sortKeys } from '@dxos/util';
 
-import { createGenerator, staticGenerators, type ObjectGenerator } from './ObjectGenerator';
-import { SchemaTable } from './SchemaTable';
+import { type ObjectGenerator, createGenerator, staticGenerators } from './ObjectGenerator';
 import { generator } from './presets';
+import { SchemaTable } from './SchemaTable';
 
 export type SpaceGeneratorProps = {
   space: Space;
-  onCreateObjects?: (objects: Obj.Any[]) => void;
+  onCreateObjects?: (objects: Obj.Unknown[]) => void;
 };
 
 export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const client = useClient();
-  const staticTypes = [DocumentType, DiagramType, SheetType, ComputeGraph]; // TODO(burdon): Make extensible.
-  const recordTypes = [DataType.Organization, DataType.Project, DataType.Person, DataType.Message];
+  const staticTypes = [Markdown.Document, Diagram.Diagram, Sheet.Sheet, ComputeGraph]; // TODO(burdon): Make extensible.
+  const recordTypes: Type.Obj.Any[] = [Organization.Organization, Person.Person, Task.Task];
   const [count, setCount] = useState(1);
   const [info, setInfo] = useState<any>({});
   const presets = useMemo(() => generator(), []);
 
+  // Register types.
+  useAsyncEffect(async () => {
+    await client.addTypes([...staticTypes, ...recordTypes, ...presets.schemas]);
+  }, [client]);
+
   // Create type generators.
   const typeMap = useMemo(() => {
-    client.addTypes([...staticTypes, ...recordTypes, ...presets.schemas]);
     const recordGenerators = new Map<string, ObjectGenerator<any>>(
-      recordTypes.map((type) => [type.typename, createGenerator(client, dispatch, type as any)]),
+      recordTypes.map((type) => [type.typename, createGenerator(client, invokePromise, type)]),
     );
 
     return new Map([...staticGenerators, ...presets.items, ...recordGenerators]);
-  }, [client, recordTypes]);
+  }, [client, recordTypes, invokePromise]);
 
   // Query space to get info.
   const updateInfo = async () => {
     // Create schema map.
     const echoSchema = await space.db.schemaRegistry.query().run();
-    const staticSchema = space.db.graph.schemaRegistry.schemas;
+    const staticSchema = await space.db.graph.schemaRegistry.query().run();
 
     // Create object map.
-    const { objects } = await space.db.query(Filter.everything()).run();
+    const objects = await space.db.query(Filter.everything()).run();
     const objectMap = sortKeys(
       objects.reduce<Record<string, number>>((map, obj) => {
-        const type = getTypename(obj);
+        const type = Obj.getTypename(obj);
         if (type) {
           const count = map[type] ?? 0;
           map[type] = count + 1;
         }
+
         return map;
       }, {}),
     );
@@ -88,35 +93,34 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
   );
 
   return (
-    <div role='none' className='flex flex-col grow overflow-hidden'>
-      <Toolbar.Root classNames='border-be border-subduedSeparator'>
+    <Layout.Main toolbar>
+      <Toolbar.Root>
         <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' onClick={updateInfo} />
         <Toolbar.Separator variant='gap' />
         <Input.Root>
           <Input.TextInput
             type='number'
+            placeholder='Count'
+            classNames='is-[4rem] text-right'
             min={1}
             max={100}
-            placeholder={'Count'}
-            classNames='!w-[4rem] !text-right'
             size={8}
             value={count}
-            onChange={(ev) => setCount(parseInt(ev.target.value))}
+            onChange={(event) => setCount(parseInt(event.target.value))}
           />
         </Input.Root>
       </Toolbar.Root>
 
-      <div className='flex flex-col overflow-y-auto divide-y divide-separator'>
-        <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
-        <SchemaTable types={recordTypes} objects={info.objects} label='Record Types' onClick={handleCreateData} />
-        <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
-
-        <div>
-          <SyntaxHighlighter classNames='flex text-xs' language='json'>
+      <ScrollArea.Root thin orientation='vertical'>
+        <ScrollArea.Viewport classNames='gap-4 divide-y divide-subduedSeparator'>
+          <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
+          <SchemaTable types={recordTypes} objects={info.objects} label='Record Types' onClick={handleCreateData} />
+          <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
+          <SyntaxHighlighter language='json' classNames='text-xs'>
             {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}
           </SyntaxHighlighter>
-        </div>
-      </div>
-    </div>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    </Layout.Main>
   );
 };