Add a collection via a button in the toolbar. Let's open the drawer when it's added and auto-focus the collection name. It's in an incomplete state when it's initially added with a placeholder name. Once it's named or the user unfocuses it we commit the `AddCollection`.

We can use `addNodesWithinBounds` to get the position to place it.

z.object(

{    type: z.literal('AddCollection'),    ns: z.string(),    position: z.tuple([z.number(), z.number()]).optional(),    initialSchema: z.custom<MongoDBJSONSchema>  }

)

 

https://github.com/mongodb-js/compass/blob/main/packages/compass-data-modeling/src/components/diagram-editor-toolbar.tsx 

Figma (at the time of writing there aren't designs for this yet):
https://www.figma.com/design/reNpAkCcrtlHEgBoNDiY6P/Ben-s-playground?node-id=1282-31551