Display the stories as a grid and have multiple components in the same story and have them interact with eachother

[DragosB88]

Summary

1. Instead of displaying the stories in the sidebar, I would like to have them displayed as a grid. I use both components from both Svelte and StencilJs - the stories for them have been built to static files, and from what I could figure out from the storybook-static folder, they are bundled inside the iframe-hash.js and imported in the iframe.html from the window object.

I am having trouble accessing the properties which store the stories from the window object in order to populate the grid with the stories data. Is there a better way of doing this (without using 3rd parties)?

2. If I wish to have multiple components rendered inside different stories, and have the components from one story interact with eachother, is there a way of achieving this via selection, like when using tags, except for each individual story? (eg: I select a story to include an Input component and a Submit button component, so that they form a Form component, and the Submit button changes its default disabled state when the input text is validated - with communication via post message, let's say), or do I have to create preset stories for this types of situations?

Additional information

No response

Create a reproduction

No response

[DragosB88]

I also shoud mention that, for some reason, because of the project's config, if I use @storybook/react I can no longer build the svelte components, so instead I imported the @storybook/web-components and I am restricted to CSF2 format and usage of StoryFn (instead of StoryObj), and maybe some more limitations.