@dxos/plugin-space 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/src/cli/plugin.ts

@@ -0,0 +1,88 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { Tag } from '@dxos/echo';
+import { ClientEvents } from '@dxos/plugin-client/types';
+import { Collection, DataTypes } from '@dxos/schema';
+import {
+  AnchoredTo,
+  Employer,
+  Event,
+  HasConnection,
+  HasRelationship,
+  HasSubject,
+  Organization,
+  Person,
+  Pipeline,
+  Task,
+} from '@dxos/types';
+
+import { IdentityCreated } from '../capabilities/identity-created';
+import { OperationResolver } from '../capabilities/operation-resolver';
+import { meta } from '../meta';
+import { SpaceEvents } from '../types';
+import { type CreateObject, type SpacePluginOptions } from '../types';
+
+import { database, queue, space } from './commands';
+
+export const SpacePlugin = Plugin.define<SpacePluginOptions>(meta).pipe(
+  // TODO(wittjosiah): Could some of these commands make use of operations?
+  AppPlugin.addCommandModule({
+    commands: [database, queue, space],
+  }),
+  AppPlugin.addMetadataModule({
+    metadata: {
+      id: Collection.Collection.typename,
+      metadata: {
+        createObject: ((props) => Effect.sync(() => Collection.make(props))) satisfies CreateObject,
+        addToCollectionOnCreate: true,
+      },
+    },
+  }),
+  AppPlugin.addSchemaModule({
+    schema: [
+      ...DataTypes,
+      AnchoredTo.AnchoredTo,
+      Employer.Employer,
+      Event.Event,
+      HasConnection.HasConnection,
+      HasRelationship.HasRelationship,
+      HasSubject.HasSubject,
+      Organization.Organization,
+      Person.Person,
+      Pipeline.Pipeline,
+      Tag.Tag,
+      Task.Task,
+    ],
+  }),
+  Plugin.addModule(
+    ({
+      shareableLinkOrigin = 'http://localhost:5173',
+      invitationPath = '/',
+      invitationProp = 'spaceInvitationCode',
+    }) => {
+      const createInvitationUrl = (invitationCode: string) => {
+        const baseUrl = new URL(invitationPath || '/', shareableLinkOrigin);
+        baseUrl.searchParams.set(invitationProp, invitationCode);
+        return baseUrl.toString();
+      };
+
+      return {
+        id: Capability.getModuleTag(OperationResolver),
+        activatesOn: ActivationEvents.SetupOperationResolver,
+        activate: () => OperationResolver({ createInvitationUrl, observability: false }),
+      };
+    },
+  ),
+  Plugin.addModule({
+    activatesOn: ClientEvents.IdentityCreated,
+    activatesAfter: [SpaceEvents.DefaultSpaceReady],
+    activate: IdentityCreated,
+  }),
+  Plugin.make,
+);

package/src/components/AwaitingObject.tsx

@@ -4,22 +4,24 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher, useLayout } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useLayout } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { useClient } from '@dxos/react-client';
 import { Filter, useQuery } from '@dxos/react-client/echo';
 import { Button, Icon, Toast, useTranslation } from '@dxos/react-ui';
+import { osTranslations } from '@dxos/ui-theme';
 
 import { meta } from '../meta';
-import { SpaceAction } from '../types';
+import { SpaceOperation } from '../types';
 
 const WAIT_FOR_OBJECT_TIMEOUT = 3 * 60 * 1_000;
 const TOAST_TIMEOUT = 4 * 60 * 1_000;
 
 export const AwaitingObject = ({ id }: { id: string }) => {
   const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const [open, setOpen] = useState(true);
   const [waiting, setWaiting] = useState(true);
   const [found, setFound] = useState(false);
@@ -47,14 +49,14 @@ export const AwaitingObject = ({ id }: { id: string }) => {
   }, [id, objects, layout]);
 
   const handleClose = useCallback(
-    async () => dispatch(createIntent(SpaceAction.WaitForObject, { id: undefined })),
-    [dispatch],
+    async () => invokePromise(SpaceOperation.WaitForObject, { id: undefined }),
+    [invokePromise],
   );
 
   const handleNavigate = useCallback(() => {
-    void dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [id] }));
+    void invokePromise(LayoutOperation.Open, { subject: [id] });
     void handleClose();
-  }, [id, handleClose, dispatch]);
+  }, [id, handleClose, invokePromise]);
 
   return (
     <Toast.Root open={open} duration={TOAST_TIMEOUT} onOpenChange={setOpen}>
@@ -96,12 +98,14 @@ export const AwaitingObject = ({ id }: { id: string }) => {
               </Button>
             </Toast.Action>
             <Toast.Close asChild>
-              <Button onClick={handleClose}>{t('close label', { ns: 'appkit' })}</Button>
+              <Button onClick={handleClose}>{t('close label', { ns: osTranslations })}</Button>
             </Toast.Close>
           </>
         ) : (
           <Toast.Close asChild>
-            <Button onClick={handleClose}>{t(waiting ? 'close label' : 'confirm label', { ns: 'appkit' })}</Button>
+            <Button onClick={handleClose}>
+              {t(waiting ? 'close label' : 'confirm label', { ns: osTranslations })}
+            </Button>
           </Toast.Close>
         )}
       </Toast.Actions>

package/src/components/CollectionArticle.tsx

@@ -1,33 +1,156 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
-import { useTranslation } from '@dxos/react-ui';
-import { baseSurface, descriptionMessage, mx } from '@dxos/react-ui-theme';
-import { type Collection } from '@dxos/schema';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
+import { Filter, Obj } from '@dxos/echo';
+import { useClient } from '@dxos/react-client';
+import { getSpace, useQuery } from '@dxos/react-client/echo';
+import { Layout, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card, Mosaic, type StackTileComponent } from '@dxos/react-ui-mosaic';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { Collection } from '@dxos/schema';
+import { getStyles } from '@dxos/ui-theme';
 
 import { meta } from '../meta';
 
-export const CollectionArticle = ({ subject }: SurfaceComponentProps<Collection.Collection>) => {
+/**
+ * Hook to resolve metadata (icon, iconHue, etc.) for objects based on their typename.
+ */
+const useMetadataResolver = () => {
+  const allMetadata = useCapabilities(AppCapabilities.Metadata);
+  return useCallback((typename: string) => allMetadata.find((m) => m.id === typename)?.metadata ?? {}, [allMetadata]);
+};
+
+/**
+ * Article view for collections.
+ */
+export const CollectionArticle = ({ subject }: SurfaceComponentProps<Collection.Collection | Collection.Managed>) => {
   const { t } = useTranslation(meta.id);
+  const resolveMetadata = useMetadataResolver();
+  const { items, handleSearch } = useCollectionItems(subject, resolveMetadata);
 
   return (
-    <div
-      role='none'
-      className={mx(baseSurface, 'min-bs-screen is-full flex items-center justify-center p-8')}
-      data-testid='composer.firstRunMessage'
-    >
-      <p
-        role='alert'
-        className={mx(descriptionMessage, 'rounded-md p-8 font-normal text-lg max-is-[24rem] break-words')}
-      >
-        {subject.name ?? t('unnamed collection label')}
-      </p>
-    </div>
+    <Layout.Main toolbar>
+      <SearchList.Root onSearch={handleSearch}>
+        <Toolbar.Root>
+          <SearchList.Input placeholder={t('search placeholder')} />
+        </Toolbar.Root>
+        <SearchList.Content>
+          <Mosaic.Container asChild>
+            <ScrollArea.Root orientation='vertical'>
+              <ScrollArea.Viewport classNames='p-2'>
+                <Mosaic.Stack items={items} getId={(item) => item.id} Tile={ObjectTile} />
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+          </Mosaic.Container>
+        </SearchList.Content>
+      </SearchList.Root>
+    </Layout.Main>
+  );
+};
+
+type ObjectItem = {
+  id: string;
+  object: Obj.Unknown;
+  icon: string;
+  iconHue?: string;
+};
+
+const ObjectTile: StackTileComponent<ObjectItem> = ({ data: item }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokeSync } = useOperationInvoker();
+
+  const typename = Obj.getTypename(item.object) ?? '';
+  const label =
+    Obj.getLabel(item.object) ??
+    toLocalizedString(['object name placeholder', { ns: typename, defaultValue: item.id }], t);
+  const styles = item.iconHue ? getStyles(item.iconHue) : undefined;
+
+  const handleClick = () => {
+    invokeSync(LayoutOperation.Open, { subject: [item.id] });
+  };
+
+  return (
+    <Card.Root fullWidth>
+      <Card.Toolbar>
+        <Card.ToolbarIconButton variant='ghost' label={label} icon={item.icon} iconOnly iconClassNames={styles?.icon} />
+        <Card.Title onClick={handleClick}>{label}</Card.Title>
+        <Card.Menu />
+      </Card.Toolbar>
+    </Card.Root>
   );
 };
 
 export default CollectionArticle;
+
+/**
+ * Hook to get items from a regular collection.
+ */
+const useRegularCollectionItems = (collection: Collection.Collection): Obj.Unknown[] => {
+  return useMemo(
+    () => (collection.objects ?? []).map((ref) => ref.target).filter((obj): obj is Obj.Unknown => Obj.isObject(obj)),
+    [collection.objects],
+  );
+};
+
+/**
+ * Hook to get items from a managed collection by querying the space.
+ */
+const useManagedCollectionItems = (collection: Collection.Managed): Obj.Unknown[] => {
+  const client = useClient();
+  const space = getSpace(collection);
+
+  const schema = useMemo(
+    () => client.graph.schemaRegistry.query({ typename: collection.key, location: ['runtime'] }).runSync()[0],
+    [client, collection],
+  );
+
+  return useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
+};
+
+type MetadataResolver = (typename: string) => { icon?: string; iconHue?: string };
+
+/**
+ * Combined hook to get collection items with search/filter support.
+ */
+const useCollectionItems = (
+  collection: Collection.Collection | Collection.Managed,
+  resolveMetadata: MetadataResolver,
+) => {
+  const isManaged = Obj.instanceOf(Collection.Managed, collection);
+
+  // Call both hooks unconditionally to satisfy React's rules of hooks.
+  const regularObjects = useRegularCollectionItems(collection as Collection.Collection);
+  const managedObjects = useManagedCollectionItems(collection as Collection.Managed);
+
+  const objects = isManaged ? managedObjects : regularObjects;
+
+  // Convert objects to items with resolved metadata.
+  const items = useMemo(
+    () =>
+      objects.map((obj) => {
+        const typename = Obj.getTypename(obj);
+        const metadata = typename ? resolveMetadata(typename) : {};
+        return {
+          id: Obj.getDXN(obj).toString(),
+          object: obj,
+          icon: metadata.icon ?? 'ph--placeholder--regular',
+          iconHue: metadata.iconHue,
+        } satisfies ObjectItem;
+      }),
+    [objects, resolveMetadata],
+  );
+
+  // Use searchlist results for filtering.
+  const { results, handleSearch } = useSearchListResults({
+    items,
+    extract: (item) => Obj.getLabel(item.object) ?? item.id,
+  });
+
+  return { items: results, handleSearch };
+};

package/src/components/CollectionSection.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { type SurfaceComponentProps } from '@dxos/app-framework/react';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { useTranslation } from '@dxos/react-ui';
 import { type Collection } from '@dxos/schema';
 

package/src/components/CreateDialog/CreateObjectDialog.stories.tsx

@@ -5,10 +5,10 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Filter, Obj } from '@dxos/echo';
-import { useQuery, useSpace } from '@dxos/react-client/echo';
+import { useDatabase, useQuery } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Dialog } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
@@ -19,7 +19,7 @@ import { translations } from '../../translations';
 
 import { CreateObjectDialog, type CreateObjectDialogProps } from './CreateObjectDialog';
 
-const Story = (props: CreateObjectDialogProps) => {
+const DefaultStory = (props: CreateObjectDialogProps) => {
   return (
     <Dialog.Root open>
       <Dialog.Overlay blockAlign='start'>
@@ -33,53 +33,59 @@ const Story = (props: CreateObjectDialogProps) => {
 const meta = {
   title: 'plugins/plugin-space/CreateObjectDialog',
   component: CreateObjectDialog,
-  render: Story,
+  render: DefaultStory,
   decorators: [
-    withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({ plugins: [IntentPlugin()] }),
-    withClientProvider({ createIdentity: true, createSpace: true, types: [Collection.Collection] }),
+    withTheme(), // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+    withPluginManager({
+      plugins: [RuntimePlugin(), OperationPlugin()],
+    }),
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [Collection.Collection],
+    }),
   ],
   parameters: {
     translations: [...translations, ...shellTranslations],
   },
   args: {},
-} satisfies Meta<typeof CreateObjectDialog>;
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default: StoryObj<typeof CreateObjectDialog> = {};
+type Story = StoryObj<typeof meta>;
 
-export const Typename: StoryObj<typeof CreateObjectDialog> = {
+export const Default: Story = {};
+
+export const Typename: Story = {
   args: { typename: Collection.Collection.typename },
 };
 
-export const TargetSpace: StoryObj<typeof CreateObjectDialog> = {
+export const TargetSpace: Story = {
   render: (args) => {
-    const space = useSpace();
+    const db = useDatabase();
 
-    if (!space) {
+    if (!db) {
       return <></>;
     }
 
-    return <Story {...args} target={space} />;
+    return <DefaultStory {...args} target={db} />;
   },
 };
 
-export const TargetCollection: StoryObj<typeof CreateObjectDialog> = {
+export const TargetCollection: Story = {
   render: (args) => {
-    const space = useSpace();
-    const [collection] = useQuery(space, Filter.type(Collection.Collection));
+    const db = useDatabase();
+    const [collection] = useQuery(db, Filter.type(Collection.Collection));
 
     useEffect(() => {
-      if (space) {
-        space.db.add(Obj.make(Collection.Collection, { name: 'My Collection', objects: [] }));
-      }
-    }, [space]);
+      db?.add(Obj.make(Collection.Collection, { name: 'My Collection', objects: [] }));
+    }, [db]);
 
     if (!collection) {
       return <></>;
     }
 
-    return <Story {...args} target={collection} />;
+    return <DefaultStory {...args} target={collection} />;
   },
 };

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -3,23 +3,23 @@
 //
 
 import * as Effect from 'effect/Effect';
-import * as Function from 'effect/Function';
-import * as Option from 'effect/Option';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import { Capabilities, LayoutAction, chain, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher, usePluginManager } from '@dxos/app-framework/react';
-import { Obj, Type } from '@dxos/echo';
-import { EntityKind, SystemTypeAnnotation, getTypeAnnotation } from '@dxos/echo/internal';
+import { Capability } from '@dxos/app-framework';
+import { useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { Database, Obj, Type } from '@dxos/echo';
+import { EntityKind, getTypeAnnotation } from '@dxos/echo/internal';
+import { runAndForwardErrors } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
+import { Operation } from '@dxos/operation';
 import { useClient } from '@dxos/react-client';
-import { type Space, getSpace, isLiveObject, isSpace, useSpaces } from '@dxos/react-client/echo';
-import { Dialog, IconButton, useTranslation } from '@dxos/react-ui';
-import { cardDialogContent, cardDialogHeader } from '@dxos/react-ui-stack';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Dialog, useTranslation } from '@dxos/react-ui';
 import { type Collection } from '@dxos/schema';
 
 import { meta } from '../../meta';
-import { SpaceAction } from '../../types';
+import { SpaceOperation } from '../../types';
 
 import { CreateObjectPanel, type CreateObjectPanelProps, type Metadata } from './CreateObjectPanel';
 
@@ -29,8 +29,8 @@ export type CreateObjectDialogProps = Pick<
   CreateObjectPanelProps,
   'target' | 'views' | 'typename' | 'initialFormValues'
 > & {
-  onCreateObject?: (object: Obj.Any) => void;
-  shouldNavigate?: (object: Obj.Any) => boolean;
+  onCreateObject?: (object: Obj.Unknown) => void;
+  shouldNavigate?: (object: Obj.Unknown) => boolean;
 };
 
 export const CreateObjectDialog = ({
@@ -43,8 +43,8 @@ export const CreateObjectDialog = ({
 }: CreateObjectDialogProps) => {
   const manager = usePluginManager();
   const { t } = useTranslation(meta.id);
-  const { dispatch } = useIntentDispatcher();
-  const [target, setTarget] = useState<Space | Collection.Collection | undefined>(initialTarget);
+  const operationInvoker = useOperationInvoker();
+  const [target, setTarget] = useState<Database.Database | Collection.Collection | undefined>(initialTarget);
   const [typename, setTypename] = useState<string | undefined>(initialTypename);
   const client = useClient();
   const spaces = useSpaces();
@@ -52,23 +52,22 @@ export const CreateObjectDialog = ({
 
   const resolve = useCallback<NonNullable<CreateObjectPanelProps['resolve']>>(
     (typename) => {
-      const metadata = manager.context
-        .getCapabilities(Capabilities.Metadata)
+      const metadata = manager.capabilities
+        .getAll(AppCapabilities.Metadata)
         .find(({ id }) => id === typename)?.metadata;
-      return metadata?.createObjectIntent ? (metadata as Metadata) : undefined;
+      return metadata?.createObject ? (metadata as Metadata) : undefined;
     },
     [manager],
   );
 
-  const space = isSpace(target) ? target : getSpace(target);
+  const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
   // TODO(wittjosiah): Support database schemas.
-  const schemas = space?.db.schemaRegistry.query({ location: ['runtime'] }).runSync();
+  const schemas = db?.schemaRegistry.query({ location: ['runtime'], includeSystem: false }).runSync();
   const userSchemas = useMemo(
     () =>
       schemas
         ?.filter((schema) => getTypeAnnotation(schema)?.kind !== EntityKind.Relation)
-        .filter((schema) => !!resolve(Type.getTypename(schema)))
-        .filter((schema) => !SystemTypeAnnotation.get(schema).pipe(Option.getOrElse(() => false))) ?? [],
+        .filter((schema) => !!resolve(Type.getTypename(schema))) ?? [],
     [schemas],
   );
 
@@ -83,35 +82,39 @@ export const CreateObjectDialog = ({
         // NOTE: Must close before navigating or attention won't follow object.
         closeRef.current?.click();
 
-        const space = isSpace(target) ? target : getSpace(target);
-        invariant(space, 'Missing space');
-        const { object } = yield* dispatch(metadata.createObjectIntent(data, { space }));
-        if (isLiveObject(object) && !Obj.instanceOf(Type.PersistentType, object)) {
+        const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
+        invariant(db, 'Missing database');
+        const object = yield* metadata.createObject(data, { db });
+        if (Obj.isObject(object) && !Obj.instanceOf(Type.PersistentType, object)) {
           // TODO(wittjosiah): Selection in navtree isn't working as expected when hidden typenames evals to true.
           const hidden = !metadata.addToCollectionOnCreate;
-          const addObjectIntent = createIntent(SpaceAction.AddObject, {
+          yield* operationInvoker.invoke(SpaceOperation.AddObject, {
             target,
             object,
             hidden,
           });
           const shouldNavigate = _shouldNavigate ?? (() => true);
           if (shouldNavigate(object)) {
-            yield* dispatch(Function.pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));
-          } else {
-            yield* dispatch(addObjectIntent);
+            yield* Effect.promise(() =>
+              operationInvoker.invokePromise(LayoutOperation.Open, {
+                subject: [Obj.getDXN(object).toString()],
+              }),
+            );
           }
 
           onCreateObject?.(object);
         }
-      }).pipe(Effect.runPromise),
-    [dispatch, target, resolve, _shouldNavigate],
+      }).pipe(
+        Effect.provideService(Capability.Service, manager.capabilities),
+        Effect.provideService(Operation.Service, operationInvoker),
+        runAndForwardErrors,
+      ),
+    [target, _shouldNavigate, onCreateObject, manager.capabilities, operationInvoker],
   );
 
   return (
-    // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
-    //  Consider factoring it out to the tabs package.
-    <Dialog.Content classNames={cardDialogContent}>
-      <div role='none' className={cardDialogHeader}>
+    <Dialog.Content>
+      <Dialog.Header>
         <Dialog.Title>
           {t('create object dialog title', {
             object: t('typename label', {
@@ -121,32 +124,24 @@ export const CreateObjectDialog = ({
           })}
         </Dialog.Title>
         <Dialog.Close asChild>
-          <IconButton
-            ref={closeRef}
-            icon='ph--x--regular'
-            size={4}
-            label='Close'
-            iconOnly
-            density='fine'
-            variant='ghost'
-            autoFocus
-          />
+          <Dialog.CloseIconButton ref={closeRef} />
         </Dialog.Close>
-      </div>
-
-      <CreateObjectPanel
-        schemas={userSchemas}
-        spaces={spaces}
-        target={target}
-        views={views}
-        typename={typename}
-        initialFormValues={initialFormValues}
-        defaultSpaceId={client.spaces.default.id}
-        resolve={resolve}
-        onTargetChange={setTarget}
-        onTypenameChange={setTypename}
-        onCreateObject={handleCreateObject}
-      />
+      </Dialog.Header>
+      <Dialog.Body>
+        <CreateObjectPanel
+          schemas={userSchemas}
+          spaces={spaces}
+          target={target}
+          views={views}
+          typename={typename}
+          initialFormValues={initialFormValues}
+          defaultSpaceId={client.spaces.default.id}
+          resolve={resolve}
+          onTargetChange={setTarget}
+          onTypenameChange={setTypename}
+          onCreateObject={handleCreateObject}
+        />
+      </Dialog.Body>
     </Dialog.Content>
   );
 };