@dxos/plugin-debug 0.7.1 → 0.7.2-staging.6d26b2a

package/dist/types/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW;;GAAsC,CAAC;AAC/D,eAAO,MAAM,UAAU;;;GAAqC,CAAC;AAE7D,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ;;GAAmC,CAAC;AACzD,eAAO,MAAM,UAAU;;;GAAqC,CAAC;AAE7D,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-debug",
-  "version": "0.7.1",
+  "version": "0.7.2-staging.6d26b2a",
   "description": "DXOS Surface plugin for testing.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,37 +36,37 @@
     "lodash.get": "^4.4.2",
     "react-json-tree": "^0.18.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.7.1",
-    "@dxos/async": "0.7.1",
-    "@dxos/automerge": "0.7.1",
-    "@dxos/client-services": "0.7.1",
-    "@dxos/devtools": "0.7.1",
-    "@dxos/config": "0.7.1",
-    "@dxos/echo-generator": "0.7.1",
-    "@dxos/echo-pipeline": "0.7.1",
-    "@dxos/echo-schema": "0.7.1",
-    "@dxos/invariant": "0.7.1",
-    "@dxos/keys": "0.7.1",
-    "@dxos/local-storage": "0.7.1",
-    "@dxos/log": "0.7.1",
-    "@dxos/plugin-client": "0.7.1",
-    "@dxos/plugin-deck": "0.7.1",
-    "@dxos/plugin-graph": "0.7.1",
-    "@dxos/plugin-markdown": "0.7.1",
-    "@dxos/plugin-sketch": "0.7.1",
-    "@dxos/plugin-status-bar": "0.7.1",
-    "@dxos/plugin-space": "0.7.1",
-    "@dxos/protocols": "0.7.1",
-    "@dxos/plugin-table": "0.7.1",
-    "@dxos/react-client": "0.7.1",
-    "@dxos/plugin-theme": "0.7.1",
-    "@dxos/react-hooks": "0.7.1",
-    "@dxos/random": "0.7.1",
-    "@dxos/react-ui-attention": "0.7.1",
-    "@dxos/react-ui-form": "0.7.1",
-    "@dxos/react-ui-syntax-highlighter": "0.7.1",
-    "@dxos/react-ui-table": "0.7.1",
-    "@dxos/util": "0.7.1"
+    "@dxos/async": "0.7.2-staging.6d26b2a",
+    "@dxos/app-framework": "0.7.2-staging.6d26b2a",
+    "@dxos/automerge": "0.7.2-staging.6d26b2a",
+    "@dxos/client-services": "0.7.2-staging.6d26b2a",
+    "@dxos/devtools": "0.7.2-staging.6d26b2a",
+    "@dxos/config": "0.7.2-staging.6d26b2a",
+    "@dxos/echo-generator": "0.7.2-staging.6d26b2a",
+    "@dxos/echo-pipeline": "0.7.2-staging.6d26b2a",
+    "@dxos/invariant": "0.7.2-staging.6d26b2a",
+    "@dxos/keys": "0.7.2-staging.6d26b2a",
+    "@dxos/echo-schema": "0.7.2-staging.6d26b2a",
+    "@dxos/local-storage": "0.7.2-staging.6d26b2a",
+    "@dxos/log": "0.7.2-staging.6d26b2a",
+    "@dxos/plugin-client": "0.7.2-staging.6d26b2a",
+    "@dxos/plugin-graph": "0.7.2-staging.6d26b2a",
+    "@dxos/plugin-deck": "0.7.2-staging.6d26b2a",
+    "@dxos/plugin-markdown": "0.7.2-staging.6d26b2a",
+    "@dxos/plugin-sketch": "0.7.2-staging.6d26b2a",
+    "@dxos/plugin-space": "0.7.2-staging.6d26b2a",
+    "@dxos/plugin-theme": "0.7.2-staging.6d26b2a",
+    "@dxos/plugin-status-bar": "0.7.2-staging.6d26b2a",
+    "@dxos/plugin-table": "0.7.2-staging.6d26b2a",
+    "@dxos/protocols": "0.7.2-staging.6d26b2a",
+    "@dxos/random": "0.7.2-staging.6d26b2a",
+    "@dxos/react-client": "0.7.2-staging.6d26b2a",
+    "@dxos/react-hooks": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui-form": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui-attention": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui-syntax-highlighter": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui-table": "0.7.2-staging.6d26b2a",
+    "@dxos/util": "0.7.2-staging.6d26b2a"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -76,17 +76,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.1",
-    "@dxos/react-ui-theme": "0.7.1",
-    "@dxos/storybook-utils": "0.7.1"
+    "@dxos/storybook-utils": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui-theme": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui": "0.7.2-staging.6d26b2a"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.1",
-    "@dxos/random": "0.7.1",
-    "@dxos/react-ui-theme": "0.7.1"
+    "@dxos/react-ui-theme": "0.7.2-staging.6d26b2a",
+    "@dxos/random": "0.7.2-staging.6d26b2a",
+    "@dxos/react-ui": "0.7.2-staging.6d26b2a"
   },
   "publishConfig": {
     "access": "public"

package/src/DebugPlugin.tsx

@@ -29,7 +29,7 @@ import {
   topbarBlockPaddingStart,
 } from '@dxos/react-ui-theme';
 
-import { DebugGlobal, DebugObjectPanel, DebugSettings, DebugSpace, DebugStatus, Wireframe } from './components';
+import { DebugApp, DebugObjectPanel, DebugSettings, DebugSpace, DebugStatus, Wireframe } from './components';
 import meta, { DEBUG_PLUGIN } from './meta';
 import translations from './translations';
 import {
@@ -207,7 +207,7 @@ export const DebugPlugin = definePlugin<DebugPluginProvides>((context) => {
                 const object = toSignal(
                   (onChange) => {
                     const timeout = setTimeout(async () => {
-                      await space?.db.loadObjectById(objectId);
+                      await space?.db.query({ id: objectId }).first();
                       onChange();
                     });
 
@@ -277,7 +277,7 @@ export const DebugPlugin = definePlugin<DebugPluginProvides>((context) => {
           }
 
           const primary = data.active ?? data.object;
-          let component: ReactNode;
+          let component: ReactNode = null;
           if (role === 'main' || role === 'article') {
             if (primary === 'devtools' && settings.devtools) {
               component = <Devtools />;
@@ -309,9 +309,7 @@ export const DebugPlugin = definePlugin<DebugPluginProvides>((context) => {
                 />
               );
             } else if ('graph' in primary && primary.graph instanceof Graph) {
-              component = <DebugGlobal graph={primary.graph} />;
-            } else {
-              component = null;
+              component = <DebugApp graph={primary.graph} />;
             }
           }
 
@@ -337,11 +335,7 @@ export const DebugPlugin = definePlugin<DebugPluginProvides>((context) => {
 
           switch (role) {
             case 'article':
-              return (
-                <div role='none' className='row-span-2 rounded-t-md overflow-x-auto'>
-                  {component}
-                </div>
-              );
+              return <>{component}</>;
             case 'main':
               return (
                 <Main.Content

package/src/components/Container.tsx

@@ -0,0 +1,15 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type PropsWithChildren, type ReactNode } from 'react';
+
+// TODO(burdon): Convert to grid.
+export const Container = ({ toolbar, children }: PropsWithChildren<{ toolbar: ReactNode }>) => {
+  return (
+    <div role='none' className='flex flex-col grow overflow-hidden divide-y divide-separator'>
+      {toolbar}
+      <div className='flex flex-col grow overflow-auto'>{children}</div>
+    </div>
+  );
+};

package/src/components/{DebugGlobal.tsx → DebugApp/DebugApp.tsx}

@@ -7,13 +7,13 @@ import React, { type FC, useEffect, useState } from 'react';
 
 import { type Graph } from '@dxos/plugin-graph';
 import { useClient, useConfig } from '@dxos/react-client';
-import { Button, ToggleGroup, ToggleGroupItem } from '@dxos/react-ui';
+import { Button, ToggleGroup, ToggleGroupItem, Toolbar } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
-import { DebugPanel } from './DebugPanel';
 import { Json, Tree } from './Tree';
+import { Container } from '../Container';
 
-const DebugGlobal: FC<{ graph: Graph }> = ({ graph }) => {
+export const DebugApp: FC<{ graph: Graph }> = ({ graph }) => {
   const [view, setView] = useState<'config' | 'diagnostics' | 'graph'>('graph');
   const [data, setData] = useState<any>({});
   const client = useClient();
@@ -44,9 +44,9 @@ const DebugGlobal: FC<{ graph: Graph }> = ({ graph }) => {
   };
 
   return (
-    <DebugPanel
-      menu={
-        <>
+    <Container
+      toolbar={
+        <Toolbar.Root classNames='p-1'>
           <ToggleGroup type='single' value={view}>
             <ToggleGroupItem value={'graph'} onClick={() => setView('graph')} title={'Plugin graph'}>
               <GraphIcon className={getSize(5)} />
@@ -59,21 +59,19 @@ const DebugGlobal: FC<{ graph: Graph }> = ({ graph }) => {
             </ToggleGroupItem>
           </ToggleGroup>
 
-          <div className='grow' />
+          <Toolbar.Expander />
           <Button onClick={(event) => handleResetClient(event.shiftKey)} title='Reset client'>
             <Warning className={mx(getSize(5), 'text-red-700')} />
           </Button>
           <Button onClick={handleOpenDevtools} title='Open Devtools'>
             <Toolbox weight='duotone' className={mx(getSize(5), 'text-700')} />
           </Button>
-        </>
+        </Toolbar.Root>
       }
     >
       {view === 'graph' && <Tree data={graph.toJSON()} />}
       {view === 'config' && <Json data={data.diagnostics?.config} />}
       {view === 'diagnostics' && <Json data={data} />}
-    </DebugPanel>
+    </Container>
   );
 };
-
-export default DebugGlobal;

package/src/components/{Tree.tsx → DebugApp/Tree.tsx}

@@ -34,7 +34,7 @@ export const Json: FC<{ data?: object }> = ({ data }) => {
 
 export const Tree: FC<{ data?: object }> = ({ data }) => {
   return (
-    <div className='flex overflow-auto ml-2 border-l-2 border-blue-500'>
+    <div className='p-2'>
       <Node data={data} root />
     </div>
   );

package/src/components/DebugApp/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DebugApp } from './DebugApp';
+
+export default DebugApp;

package/src/components/DebugObjectPanel.tsx

@@ -4,11 +4,11 @@
 
 import React from 'react';
 
-import { type EchoReactiveObject } from '@dxos/client/echo';
+import { type ReactiveEchoObject } from '@dxos/client/echo';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 
 export type DebugObjectPanelProps = {
-  object: EchoReactiveObject<any>;
+  object: ReactiveEchoObject<any>;
 };
 
 export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {

package/src/components/{DebugSpace.stories.tsx → DebugSpace/DebugSpace.stories.tsx}

@@ -9,11 +9,12 @@ import React, { useEffect } from 'react';
 
 import { createSpaceObjectGenerator } from '@dxos/echo-generator';
 import { useSpaces } from '@dxos/react-client/echo';
-import { ClientRepeater } from '@dxos/react-client/testing';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { render, withLayout, withTheme } from '@dxos/storybook-utils';
 
-import DebugSpace from './DebugSpace';
+import { DebugSpace } from './DebugSpace';
 
-const Story = () => {
+const DefaultStory = () => {
   const [space] = useSpaces();
   useEffect(() => {
     if (space) {
@@ -29,15 +30,16 @@ const Story = () => {
   return <DebugSpace space={space} />;
 };
 
-export const Default = {};
-
 const meta: Meta = {
   title: 'plugins/plugin-debug/DebugSpace',
   component: DebugSpace,
-  render: () => <ClientRepeater component={Story} createSpace />,
+  render: render(DefaultStory),
+  decorators: [withClientProvider({ createSpace: true }), withLayout({ tooltips: true }), withTheme],
   parameters: {
     layout: 'fullscreen',
   },
 };
 
 export default meta;
+
+export const Default = {};

package/src/components/{DebugSpace.tsx → DebugSpace/DebugSpace.tsx}

@@ -2,19 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import {
-  ArrowClockwise,
-  DownloadSimple,
-  Flag,
-  FlagPennant,
-  HandPalm,
-  Play,
-  PlusMinus,
-  Timer,
-  UserCirclePlus,
-} from '@phosphor-icons/react';
 import React, { type FC, useContext, useMemo, useState } from 'react';
 
+import { createSpaceObjectGenerator } from '@dxos/echo-generator';
 import { type ReactiveObject } from '@dxos/echo-schema';
 import { DocumentType } from '@dxos/plugin-markdown/types';
 import { Invitation } from '@dxos/protocols/proto/dxos/client/services';
@@ -23,26 +13,34 @@ import { useClient } from '@dxos/react-client';
 import { Filter, type Space, useSpaceInvitation } from '@dxos/react-client/echo';
 import { InvitationEncoder } from '@dxos/react-client/invitations';
 import { useAsyncEffect } from '@dxos/react-hooks';
-import { Button, Input, useFileDownload } from '@dxos/react-ui';
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { Icon, IconButton, Input, type IconProps, type TextInputProps, Toolbar, useFileDownload } from '@dxos/react-ui';
 import { safeParseInt } from '@dxos/util';
 
-import { DebugPanel } from './DebugPanel';
 import { ObjectCreator } from './ObjectCreator';
-import { createSpaceObjectGenerator } from '../scaffolding';
-import { DebugContext } from '../types';
+import { DebugContext } from '../../types';
+import { Container } from '../Container';
 
 const DEFAULT_COUNT = 100;
 const DEFAULT_PERIOD = 500;
 const DEFAULT_JITTER = 50;
 
-// TODO(burdon): Factor out.
 const useRefresh = (): [any, () => void] => {
   const [update, setUpdate] = useState({});
   return [update, () => setUpdate({})];
 };
 
-const DebugSpace: FC<{
+const CustomInput = ({ icon, ...props }: Pick<IconProps, 'icon'> & TextInputProps) => {
+  return (
+    <div role='none' className='relative'>
+      <Input.Root>
+        <Input.TextInput classNames='w-[100px] text-right pie-[22px]' size={5} {...props} />
+      </Input.Root>
+      <Icon icon={icon} size={3} classNames='absolute inline-end-1 block-start-1 mt-[6px]' />
+    </div>
+  );
+};
+
+export const DebugSpace: FC<{
   space: Space;
   onAddObjects?: (objects: ReactiveObject<any>[]) => void;
 }> = ({ space, onAddObjects }) => {
@@ -66,7 +64,7 @@ const DebugSpace: FC<{
   );
 
   const download = useFileDownload();
-  const handleCopy = async () => {
+  const handleDownload = async () => {
     download(
       new Blob([JSON.stringify(data, undefined, 2)], { type: 'text/plain' }),
       `${new Date().toISOString().replace(/\W/g, '-')}.json`,
@@ -125,71 +123,61 @@ const DebugSpace: FC<{
   };
 
   return (
-    <DebugPanel
-      menu={
-        <>
-          <div className='relative' title='mutation count'>
-            <Input.Root>
-              <Input.TextInput
-                autoComplete='off'
-                size={5}
-                classNames='w-[100px] text-right pie-[22px]'
-                placeholder='Count'
-                value={mutationCount}
-                onChange={({ target: { value } }) => setMutationCount(value)}
-              />
-            </Input.Root>
-            <Flag className={mx('absolute inline-end-1 block-start-1 mt-[6px]', getSize(3))} />
-          </div>
-          <div className='relative' title='mutation period'>
-            <Input.Root>
-              <Input.TextInput
-                autoComplete='off'
-                size={5}
-                classNames='w-[100px] text-right pie-[22px]'
-                placeholder='Interval'
-                value={mutationInterval}
-                onChange={({ target: { value } }) => setMutationInterval(value)}
-              />
-            </Input.Root>
-            <Timer className={mx('absolute inline-end-1 block-start-1 mt-[6px]', getSize(3))} />
-          </div>
-          <div className='relative' title='mutation jitter'>
-            <Input.Root>
-              <Input.TextInput
-                autoComplete='off'
-                size={5}
-                classNames='w-[100px] text-right pie-[22px]'
-                placeholder='Jitter'
-                value={mutationJitter}
-                onChange={({ target: { value } }) => setMutationJitter(value)}
-              />
-            </Input.Root>
-            <PlusMinus className={mx('absolute inline-end-1 block-start-1 mt-[6px]', getSize(3))} />
-          </div>
-          <Button onClick={handleToggleRunning}>
-            {running ? <HandPalm className={getSize(5)} /> : <Play className={getSize(5)} />}
-          </Button>
-          <Button onClick={handleUpdate}>
-            <ArrowClockwise className={getSize(5)} />
-          </Button>
-          <Button onClick={handleCopy}>
-            <DownloadSimple className={getSize(5)} />
-          </Button>
-
-          <div className='grow' />
-          <Button onClick={handleCreateEpoch} title='Create epoch'>
-            <FlagPennant className={mx(getSize(5))} />
-          </Button>
-          <Button onClick={handleCreateInvitation} title='Create Space invitation'>
-            <UserCirclePlus className={mx(getSize(5), 'text-blue-500')} />
-          </Button>
-        </>
+    <Container
+      toolbar={
+        <Toolbar.Root classNames='p-1'>
+          <CustomInput
+            icon='ph--flag--regular'
+            autoComplete='off'
+            placeholder='Count'
+            value={mutationCount}
+            onChange={({ target: { value } }) => setMutationCount(value)}
+          />
+          <CustomInput
+            icon='ph--timer--regular'
+            autoComplete='off'
+            placeholder='Interval'
+            value={mutationInterval}
+            onChange={({ target: { value } }) => setMutationInterval(value)}
+          />
+          <CustomInput
+            icon='ph--plus-minus--regular'
+            autoComplete='off'
+            placeholder='Jitter'
+            value={mutationJitter}
+            onChange={({ target: { value } }) => setMutationJitter(value)}
+          />
+
+          <IconButton
+            icon={running ? 'ph--hand-palm--regular' : 'ph--play--regular'}
+            iconOnly
+            label='Start/stop'
+            size={5}
+            onClick={handleToggleRunning}
+          />
+          <IconButton icon='ph--arrow-clockwise--regular' iconOnly label='Refresh' size={5} onClick={handleUpdate} />
+          <IconButton icon='ph--download-simple--regular' iconOnly label='Download' size={5} onClick={handleDownload} />
+
+          <Toolbar.Expander />
+          <IconButton
+            icon='ph--flag-pennant--regular'
+            iconOnly
+            label='Create epoch'
+            size={5}
+            onClick={handleCreateEpoch}
+          />
+          <IconButton
+            icon='ph--user-circle-plus--regular'
+            iconOnly
+            iconClassNames='text-blue-500'
+            label='Create Invitation'
+            size={5}
+            onClick={handleCreateInvitation}
+          />
+        </Toolbar.Root>
       }
     >
       <ObjectCreator space={space} onAddObjects={onAddObjects} />
-    </DebugPanel>
+    </Container>
   );
 };
-
-export default DebugSpace;

package/src/components/{ObjectCreator.stories.tsx → DebugSpace/ObjectCreator.stories.tsx}

@@ -8,12 +8,14 @@ import { type Meta } from '@storybook/react';
 import React, { useEffect } from 'react';
 
 import { createSpaceObjectGenerator } from '@dxos/echo-generator';
-import { type ReactiveObject, useSpaces } from '@dxos/react-client/echo';
-import { ClientRepeater } from '@dxos/react-client/testing';
+import { log } from '@dxos/log';
+import { useSpaces } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { render, withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { ObjectCreator, type ObjectCreatorProps } from './ObjectCreator';
 
-const Story = () => {
+const DefaultStory = () => {
   const [space] = useSpaces();
   useEffect(() => {
     if (space) {
@@ -22,26 +24,27 @@ const Story = () => {
     }
   }, [space]);
 
+  const handleCreate: ObjectCreatorProps['onAddObjects'] = (objects) => {
+    log.info('created', { objects });
+  };
+
   if (!space) {
     return null;
   }
 
-  const handleCreate: ObjectCreatorProps['onAddObjects'] = (objects: ReactiveObject<any>[]) => {
-    console.log('Created:', objects);
-  };
-
   return <ObjectCreator space={space} onAddObjects={handleCreate} />;
 };
 
-export const Default = {};
-
 const meta: Meta = {
-  title: 'plugins/plugin-debug/SchemaList',
+  title: 'plugins/plugin-debug/ObjectCreator',
   component: ObjectCreator,
-  render: () => <ClientRepeater component={Story} createSpace />,
+  render: render(DefaultStory),
+  decorators: [withClientProvider({ createSpace: true }), withLayout({ tooltips: true }), withTheme],
   parameters: {
     layout: 'fullscreen',
   },
 };
 
 export default meta;
+
+export const Default = {};

package/src/components/DebugSpace/ObjectCreator.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useMemo, useState } from 'react';
+
+import { type MutationsProviderParams, TestSchemaType, createSpaceObjectGenerator } from '@dxos/echo-generator';
+import { type ReactiveEchoObject, type ReactiveObject, type Space } from '@dxos/react-client/echo';
+import { IconButton, Toolbar } from '@dxos/react-ui';
+import { createColumnBuilder, type TableColumnDef, Table } from '@dxos/react-ui-table/deprecated';
+
+const BATCH_SIZE = 10;
+
+export type CreateObjectsParams = {
+  schema: string;
+  enabled: boolean;
+  objects: number;
+  mutations: Pick<MutationsProviderParams, 'count' | 'mutationSize' | 'maxContentLength'>;
+};
+
+export type ObjectCreatorProps = {
+  space: Space;
+  onAddObjects?: (objects: ReactiveObject<any>[]) => void;
+};
+
+export const ObjectCreator = ({ space, onAddObjects }: ObjectCreatorProps) => {
+  const generator = useMemo(() => createSpaceObjectGenerator(space), [space]);
+
+  const [objects, setObjects] = useState<CreateObjectsParams[]>(
+    Object.values(TestSchemaType).map((schema) => ({
+      schema,
+      enabled: true,
+      objects: 10,
+      mutations: {
+        count: 10,
+        mutationSize: 10,
+        maxContentLength: 1000,
+      },
+    })),
+  );
+
+  const handleCreate = async () => {
+    for (const params of objects) {
+      if (!params.enabled) {
+        continue;
+      }
+
+      let objectsCreated = 0;
+      while (objectsCreated < params.objects) {
+        const objects = (await generator.createObjects({
+          [params.schema]: Math.min(BATCH_SIZE, params.objects - objectsCreated),
+        })) as ReactiveEchoObject<any>[];
+
+        await generator.mutateObjects(objects, params.mutations);
+        objectsCreated += objects.length;
+        onAddObjects?.(objects);
+      }
+    }
+
+    await space.db.flush();
+  };
+
+  const handleUpdate = (row: CreateObjectsParams, key: string, value: any) => {
+    const newObjects = [...objects];
+    Object.assign(newObjects.find((object) => object.schema === row.schema)!, { [key]: value });
+    setObjects(newObjects);
+  };
+
+  const { helper, builder } = createColumnBuilder<CreateObjectsParams>();
+  const columns: TableColumnDef<CreateObjectsParams>[] = [
+    helper.accessor('enabled', builder.switch({ label: 'Live', onUpdate: handleUpdate })),
+    helper.accessor('schema', builder.string({ label: 'Schema', classNames: 'font-mono' })),
+    helper.accessor('objects', builder.number({ label: 'Objects', onUpdate: handleUpdate })),
+    helper.accessor((obj) => obj.mutations.count, {
+      id: 'mutations',
+      ...builder.number({ label: 'Mutations', onUpdate: handleUpdate }),
+    }),
+    helper.accessor((obj) => obj.mutations.mutationSize, {
+      id: 'mutationSize',
+      ...builder.number({ label: 'Mut. Size', onUpdate: handleUpdate }),
+    }),
+    helper.accessor((obj) => obj.mutations.maxContentLength, {
+      id: 'mutationMaxContentLength',
+      ...builder.number({ label: 'Length', onUpdate: handleUpdate }),
+    }),
+  ];
+
+  return (
+    <>
+      <Table.Root>
+        <Table.Viewport>
+          <Table.Main<CreateObjectsParams> columns={columns} data={objects} />
+        </Table.Viewport>
+      </Table.Root>
+      <Toolbar.Root classNames='p-2'>
+        <IconButton icon='ph--plus--regular' label='Create' onClick={handleCreate} />
+      </Toolbar.Root>
+    </>
+  );
+};

package/src/components/DebugSpace/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DebugSpace } from './DebugSpace';
+
+export default DebugSpace;