@dxos/plugin-debug 0.7.1 → 0.7.2-main.f1adc9f

package/src/DebugPlugin.tsx

@@ -17,10 +17,19 @@ import { Devtools } from '@dxos/devtools';
 import { invariant } from '@dxos/invariant';
 import { type ClientPluginProvides, parseClientPlugin } from '@dxos/plugin-client';
 import { createExtension, Graph, type Node, toSignal } from '@dxos/plugin-graph';
-import { SpaceAction } from '@dxos/plugin-space';
+import { memoizeQuery, SpaceAction } from '@dxos/plugin-space';
 import { CollectionType } from '@dxos/plugin-space/types';
 import { type Client } from '@dxos/react-client';
-import { create, getTypename, isEchoObject, isSpace, parseId, type Space, SpaceState } from '@dxos/react-client/echo';
+import {
+  create,
+  getTypename,
+  isEchoObject,
+  isSpace,
+  parseId,
+  type ReactiveObject,
+  type Space,
+  SpaceState,
+} from '@dxos/react-client/echo';
 import { Main } from '@dxos/react-ui';
 import {
   baseSurface,
@@ -29,7 +38,15 @@ import {
   topbarBlockPaddingStart,
 } from '@dxos/react-ui-theme';
 
-import { DebugGlobal, DebugObjectPanel, DebugSettings, DebugSpace, DebugStatus, Wireframe } from './components';
+import {
+  DebugApp,
+  DebugObjectPanel,
+  DebugSettings,
+  DebugSpace,
+  DebugStatus,
+  SpaceGenerator,
+  Wireframe,
+} from './components';
 import meta, { DEBUG_PLUGIN } from './meta';
 import translations from './translations';
 import {
@@ -157,7 +174,7 @@ export const DebugPlugin = definePlugin<DebugPluginProvides>((context) => {
                   {
                     id: `${space.id}-debug`, // TODO(burdon): Change to slashes consistently.
                     type: 'dxos.org/plugin/debug/space',
-                    data: { space },
+                    data: { space, type: 'dxos.org/plugin/debug/space' },
                     properties: {
                       label: ['debug label', { ns: DEBUG_PLUGIN }],
                       icon: 'ph--bug--regular',
@@ -181,7 +198,13 @@ export const DebugPlugin = definePlugin<DebugPluginProvides>((context) => {
 
                 const [subjectId] = id.split('~');
                 const { spaceId, objectId } = parseId(subjectId);
-                const space = client.spaces.get().find((space) => space.id === spaceId);
+                const spaces = toSignal(
+                  (onChange) => client.spaces.subscribe(() => onChange()).unsubscribe,
+                  () => client.spaces.get(),
+                );
+                const space = spaces?.find(
+                  (space) => space.state.get() === SpaceState.SPACE_READY && space.id === spaceId,
+                );
                 if (!objectId) {
                   // TODO(burdon): Ref SPACE_PLUGIN ns.
                   const label = space
@@ -204,18 +227,7 @@ export const DebugPlugin = definePlugin<DebugPluginProvides>((context) => {
                   };
                 }
 
-                const object = toSignal(
-                  (onChange) => {
-                    const timeout = setTimeout(async () => {
-                      await space?.db.loadObjectById(objectId);
-                      onChange();
-                    });
-
-                    return () => clearTimeout(timeout);
-                  },
-                  () => space?.db.getObjectById(objectId),
-                  subjectId,
-                );
+                const [object] = memoizeQuery(space, { id: objectId });
                 if (!object || !subjectId) {
                   return;
                 }
@@ -277,41 +289,46 @@ 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 />;
             } else if (!primary || typeof primary !== 'object' || !settings.debug) {
               component = null;
-            } else if ('space' in primary && isSpace(primary.space)) {
-              component = (
-                <DebugSpace
-                  space={primary.space}
-                  onAddObjects={(objects) => {
-                    if (!isSpace(primary.space)) {
-                      return;
-                    }
+            } else if (
+              'type' in primary &&
+              primary.type === 'dxos.org/plugin/debug/space' &&
+              'space' in primary &&
+              isSpace(primary.space)
+            ) {
+              const handleAddObject = (objects: ReactiveObject<any>[]) => {
+                if (!isSpace(primary.space)) {
+                  return;
+                }
 
-                    const collection =
-                      primary.space.state.get() === SpaceState.SPACE_READY &&
-                      primary.space.properties[CollectionType.typename];
-                    if (!(collection instanceof CollectionType)) {
-                      return;
-                    }
+                const collection =
+                  primary.space.state.get() === SpaceState.SPACE_READY &&
+                  primary.space.properties[CollectionType.typename];
+                if (!(collection instanceof CollectionType)) {
+                  return;
+                }
+
+                void context.resolvePlugin(parseIntentPlugin).provides.intent.dispatch(
+                  objects.map((object) => ({
+                    action: SpaceAction.ADD_OBJECT,
+                    data: { target: collection, object },
+                  })),
+                );
+              };
 
-                    void context.resolvePlugin(parseIntentPlugin).provides.intent.dispatch(
-                      objects.map((object) => ({
-                        action: SpaceAction.ADD_OBJECT,
-                        data: { target: collection, object },
-                      })),
-                    );
-                  }}
-                />
+              const deprecated = false;
+              component = deprecated ? (
+                <DebugSpace space={primary.space} onAddObjects={handleAddObject} />
+              ) : (
+                <SpaceGenerator space={primary.space} onAddObjects={handleAddObject} />
               );
             } else if ('graph' in primary && primary.graph instanceof Graph) {
-              component = <DebugGlobal graph={primary.graph} />;
-            } else {
-              component = null;
+              component = <DebugApp graph={primary.graph} />;
             }
           }
 
@@ -337,11 +354,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,16 +4,17 @@
 
 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>;
 };
 
+// TODO(burdon): Get schema and traverse references.
 export const DebugObjectPanel = ({ object }: DebugObjectPanelProps) => {
   return (
-    <div role='form' className='flex flex-col'>
+    <div className='flex flex-col'>
       <SyntaxHighlighter classNames='flex text-xs' language='json'>
         {JSON.stringify(object, null, 2)}
       </SyntaxHighlighter>

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--pause-circle--regular' : 'ph--play-circle--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-1'>
+        <IconButton icon='ph--plus--regular' label='Create' onClick={handleCreate} />
+      </Toolbar.Root>
+    </>
+  );
+};