From efb719b530d68463466ba6b9bcef927a30be641e Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Mon, 15 Apr 2024 16:57:40 +0200
Subject: [PATCH] refactor: render stories/grid in iframe only, related to #339

---
 docs/examples/vue3/single-stories.md          |  12 +-
 docs/guide/svelte3/stories.md                 |   7 +-
 docs/guide/vue2/stories.md                    |   7 +-
 docs/guide/vue3/stories.md                    |   7 +-
 docs/reference/svelte3/story.md               |   2 -
 docs/reference/vue3/story.md                  |   2 -
 .../nuxt3/components/BaseButtonLink.story.vue |   1 -
 examples/nuxt3/cypress/e2e/render-story.cy.js |   2 +-
 .../svelte4/cypress/e2e/render-story.cy.js    |  11 +-
 examples/svelte4/cypress/e2e/state-sync.cy.js |   9 -
 examples/svelte4/src/NoIframe.story.svelte    |  36 ----
 .../vue3/cypress/e2e/toolbar-background.cy.js |  15 +-
 examples/vue3/src/LongFile1.story.md          |   5 +-
 .../src/components/ComplexParameter.story.vue |   2 +-
 .../vue3/src/components/Responsive.story.vue  |   1 -
 .../app/components/story/StoryVariantGrid.vue | 171 ++++++++---------
 .../story/StoryVariantGridIframe.vue          | 174 ++++++++++++++++++
 .../components/story/StoryVariantGridItem.vue |  66 +++----
 ...emote.vue => StoryVariantSingleIframe.vue} |   0
 .../story/StoryVariantSinglePreviewNative.vue |  66 -------
 .../story/StoryVariantSingleView.vue          |  11 +-
 .../src/app/components/story/StoryView.vue    |   8 +-
 .../src/app/components/story/StoryViewer.vue  |   4 +-
 packages/histoire-app/src/app/sandbox.ts      | 108 ++++++++---
 packages/histoire-app/src/app/stores/story.ts |   7 +-
 packages/histoire-app/src/app/style/main.pcss |   5 -
 .../histoire-app/src/app/style/sandbox.css    |   5 -
 packages/histoire-app/src/app/util/const.ts   |   2 +
 packages/histoire-app/src/app/util/events.ts  |   4 +
 packages/histoire-app/src/app/util/sandbox.ts |   9 +-
 .../src/components/button/HstButton.story.vue |   2 +-
 .../button/HstButtonGroup.story.vue           |   1 -
 .../components/checkbox/HstCheckbox.story.vue |   1 -
 .../checkbox/HstCheckboxList.story.vue        |   1 -
 .../checkbox/HstSimpleCheckbox.story.vue      |   1 -
 .../colorselect/HstColorSelect.story.vue      |   1 -
 .../src/components/json/HstJson.story.vue     |   1 -
 .../src/components/radio/HstRadio.story.vue   |   1 -
 .../src/components/slider/HstSlider.story.vue |   1 -
 packages/histoire-shared/src/types/story.ts   |   1 -
 .../node/builtin-plugins/pinceau-tokens.ts    |   2 +-
 .../node/builtin-plugins/tailwind-tokens.ts   |   2 +-
 .../vanilla-support/collect.ts                |   2 +-
 packages/histoire/src/node/collect/index.ts   |   2 +-
 44 files changed, 417 insertions(+), 361 deletions(-)
 delete mode 100644 examples/svelte4/src/NoIframe.story.svelte
 create mode 100644 packages/histoire-app/src/app/components/story/StoryVariantGridIframe.vue
 rename packages/histoire-app/src/app/components/story/{StoryVariantSinglePreviewRemote.vue => StoryVariantSingleIframe.vue} (100%)
 delete mode 100644 packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue

diff --git a/docs/examples/vue3/single-stories.md b/docs/examples/vue3/single-stories.md
index 6e481ce1..9a731611 100644
--- a/docs/examples/vue3/single-stories.md
+++ b/docs/examples/vue3/single-stories.md
@@ -1,10 +1,6 @@
 # Single stories
 
-Here are some pattern examples to test your component without any variant. This is the simplest way to get you started.
-
-## Within an iframe
-
-This will display your component inside an iframe to be able to test the responsiveness correctly. The iframe is needed for CSS media queries to work properly.
+The default way to display stories and variants is inside an iframe that renders a single variant. The iframe is needed for CSS media queries to work properly and to isolate your application's styles.
 
 ```vue
 <script lang="ts" setup>
@@ -18,9 +14,7 @@ import MyComponent from './MyComponent.vue'
 </template>
 ```
 
-## Integrated
-
-This will integrate your component directly in the app. The advantage being that you can pass complex arguments (such as functions or recursive object), but responsiveness won't work for CSS media queries.
+This example is equivalent to:
 
 ```vue
 <script lang="ts" setup>
@@ -30,7 +24,7 @@ import MyComponent from './MyComponent.vue'
 <template>
   <Story
     title="MyStory"
-    :layout="{ type: 'single', iframe: false }"
+    :layout="{ type: 'single' }"
   >
     <MyComponent />
   </Story>
diff --git a/docs/guide/svelte3/stories.md b/docs/guide/svelte3/stories.md
index e6e5654a..61ae891d 100644
--- a/docs/guide/svelte3/stories.md
+++ b/docs/guide/svelte3/stories.md
@@ -87,10 +87,7 @@ You can change the layout of the variant by using the `layout` prop with an obje
 
 ### Single layout
 
-This is the default layout, displaying one variant at a time. The default behavior is to isolate the story with an iframe.
-
-Additional `layout` properties:
-- `iframe`: (default: `true`) enables the iframe, useful when your CSS has media queries for responsive design.
+This is the default layout, displaying one variant at a time. The story is isolated with an iframe.
 
 ```svelte{7}
 <script>
@@ -99,7 +96,7 @@ Additional `layout` properties:
 
 <Hst.Story
   title="Cars"
-  layout={{ type: 'single', iframe: true }}
+  layout={{ type: 'single' }}
 >
   <Hst.Variant title="default">
     🚗
diff --git a/docs/guide/vue2/stories.md b/docs/guide/vue2/stories.md
index 237575bc..dd9d84f2 100644
--- a/docs/guide/vue2/stories.md
+++ b/docs/guide/vue2/stories.md
@@ -64,16 +64,13 @@ You can change the layout of the variant by using the `layout` prop with an obje
 
 ### Single layout
 
-This is the default layout, displaying one variant at a time. The default behavior is to isolate the story with an iframe.
-
-Additional `layout` properties:
-- `iframe`: (default: `true`) enables the iframe, useful when your CSS has media queries for responsive design.
+This is the default layout, displaying one variant at a time. The story is isolated with an iframe.
 
 ```vue{4}
 <template>
   <Story
     title="Cars"
-    :layout="{ type: 'single', iframe: true }"
+    :layout="{ type: 'single' }"
   >
     <Variant title="default">
       🚗
diff --git a/docs/guide/vue3/stories.md b/docs/guide/vue3/stories.md
index 237575bc..dd9d84f2 100644
--- a/docs/guide/vue3/stories.md
+++ b/docs/guide/vue3/stories.md
@@ -64,16 +64,13 @@ You can change the layout of the variant by using the `layout` prop with an obje
 
 ### Single layout
 
-This is the default layout, displaying one variant at a time. The default behavior is to isolate the story with an iframe.
-
-Additional `layout` properties:
-- `iframe`: (default: `true`) enables the iframe, useful when your CSS has media queries for responsive design.
+This is the default layout, displaying one variant at a time. The story is isolated with an iframe.
 
 ```vue{4}
 <template>
   <Story
     title="Cars"
-    :layout="{ type: 'single', iframe: true }"
+    :layout="{ type: 'single' }"
   >
     <Variant title="default">
       🚗
diff --git a/docs/reference/svelte3/story.md b/docs/reference/svelte3/story.md
index 974dc84a..f6b01f33 100644
--- a/docs/reference/svelte3/story.md
+++ b/docs/reference/svelte3/story.md
@@ -26,8 +26,6 @@ Id of the story used in the URL. By default, the id is automatically generated f
 
 Layout of the story. Object with the following properties:
   - `type`: `'single'` or `'grid'`
-  - with `type: 'single'` you can specify:
-    - `iframe`: Whether to isolate the story in an iframe. You might want to disable it if you want to pass complexe parameters that can't be serialized.
   - with `type: 'grid'` you can specify:
     - `width`: Column size. Can be number (pixels) or string (like `'100%'`).
 
diff --git a/docs/reference/vue3/story.md b/docs/reference/vue3/story.md
index 6f3fb27b..67281f50 100644
--- a/docs/reference/vue3/story.md
+++ b/docs/reference/vue3/story.md
@@ -30,8 +30,6 @@ Id of the story used in the URL. By default, the id is automatically generated f
 
 Layout of the story. Object with the following properties:
   - `type`: `'single'` or `'grid'`
-  - with `type: 'single'` you can specify:
-    - `iframe`: Whether to isolate the story in an iframe. You might want to disable it if you want to pass complexe parameters that can't be serialized.
   - with `type: 'grid'` you can specify:
     - `width`: Column size. Can be number (pixels) or string (like `'100%'`).
 
diff --git a/examples/nuxt3/components/BaseButtonLink.story.vue b/examples/nuxt3/components/BaseButtonLink.story.vue
index cfeaedf7..e3a262ad 100644
--- a/examples/nuxt3/components/BaseButtonLink.story.vue
+++ b/examples/nuxt3/components/BaseButtonLink.story.vue
@@ -3,7 +3,6 @@
     title="BaseButton with NuxtLink"
     :layout="{
       type: 'single',
-      iframe: false,
     }"
   >
     <Variant>
diff --git a/examples/nuxt3/cypress/e2e/render-story.cy.js b/examples/nuxt3/cypress/e2e/render-story.cy.js
index f1460f64..e471d27e 100644
--- a/examples/nuxt3/cypress/e2e/render-story.cy.js
+++ b/examples/nuxt3/cypress/e2e/render-story.cy.js
@@ -22,7 +22,7 @@ describe('Story render', () => {
 
   it('should render NuxtLink', () => {
     cy.visit('/story/components-basebuttonlink-story-vue?variantId=_default')
-    cy.get('.histoire-generic-render-story a').contains('Hello world')
+    getIframeBody().find('.histoire-generic-render-story a').contains('Hello world')
   })
 
   it('should render the public config populated from Nuxt', () => {
diff --git a/examples/svelte4/cypress/e2e/render-story.cy.js b/examples/svelte4/cypress/e2e/render-story.cy.js
index c12a0667..a3f40677 100644
--- a/examples/svelte4/cypress/e2e/render-story.cy.js
+++ b/examples/svelte4/cypress/e2e/render-story.cy.js
@@ -10,16 +10,11 @@ describe('Story render', () => {
     getIframeBody().contains('😺')
   })
 
-  it('should display the story content (no iframe)', () => {
-    cy.visit('/story/src-noiframe-story-svelte?variantId=_default')
-    cy.get('[data-test-id="story-variant-single-view"]').contains('No iframe story content')
-  })
-
   it('should display the story content (grid)', () => {
     cy.visit('/story/src-cars-story-svelte')
-    cy.get('[data-test-id="sandbox-render"]').contains('🚗')
-    cy.get('[data-test-id="sandbox-render"]').contains('🏎️')
-    cy.get('[data-test-id="sandbox-render"]').contains('🚜')
+    getIframeBody().find('[data-test-id="sandbox-render"]').contains('🚗')
+    getIframeBody().find('[data-test-id="sandbox-render"]').contains('🏎️')
+    getIframeBody().find('[data-test-id="sandbox-render"]').contains('🚜')
   })
 })
 
diff --git a/examples/svelte4/cypress/e2e/state-sync.cy.js b/examples/svelte4/cypress/e2e/state-sync.cy.js
index 4b3247fe..acc2f735 100644
--- a/examples/svelte4/cypress/e2e/state-sync.cy.js
+++ b/examples/svelte4/cypress/e2e/state-sync.cy.js
@@ -14,13 +14,4 @@ describe('State sync', () => {
     getIframeBody().find('input[type="checkbox"]').click()
     cy.get('[data-test-id="story-controls"] pre').contains('"disabled": false')
   })
-
-  it('should display the story content (no iframe)', () => {
-    cy.visit('/story/src-noiframe-story-svelte?variantId=_default')
-    cy.get('[data-test-id="sandbox-render"]').find('div').contains('Some content')
-    cy.get('[data-test-id="story-controls"]').get('input').clear().type('42')
-    cy.get('[data-test-id="sandbox-render"]').find('div').contains('42')
-    cy.get('[data-test-id="sandbox-render"]').find('input').clear().type('Meow')
-    cy.get('[data-test-id="story-controls"]').get('input').should('have.value', 'Meow')
-  })
 })
diff --git a/examples/svelte4/src/NoIframe.story.svelte b/examples/svelte4/src/NoIframe.story.svelte
deleted file mode 100644
index 217a234b..00000000
--- a/examples/svelte4/src/NoIframe.story.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  export let Hst
-
-  let content = 'Some content'
-</script>
-
-<Hst.Story
-  layout={{ type: 'single', iframe: false }}
->
-  No iframe story content
-
-  <div>{content}</div>
-  <div>
-    <input bind:value={content} />
-  </div>
-
-  <svelte:fragment slot="controls">
-    <Hst.Text
-      bind:value={content}
-      title="Content"
-    />
-  </svelte:fragment>
-</Hst.Story>
-
-<style>
-  div {
-    margin-top: 8px;
-  }
-
-  input {
-    margin-top: 8px;
-    padding: 6px;
-    border: #f97316 1px solid;
-    border-radius: 4px;
-  }
-</style>
diff --git a/examples/vue3/cypress/e2e/toolbar-background.cy.js b/examples/vue3/cypress/e2e/toolbar-background.cy.js
index 91502fb7..2e5179b7 100644
--- a/examples/vue3/cypress/e2e/toolbar-background.cy.js
+++ b/examples/vue3/cypress/e2e/toolbar-background.cy.js
@@ -23,17 +23,6 @@ describe('background color', () => {
     'rgb(0, 81, 66)',
   ]
 
-  it('should provide background and contrast color (no iframe)', () => {
-    cy.visit('/story/src-components-complexparameter-story-vue?variantId=_default')
-    cy.get('[data-test-id="toolbar-background"]').click()
-    cy.get('[data-test-id="background-popper"]').should('be.visible').find('button').should('have.length', 6).each(($el, index) => {
-      cy.wrap($el).click()
-      cy.get('[data-test-id="responsive-preview-bg"]').should('have.css', 'background-color', backgroundColorShouldBe[index])
-      cy.get('[data-test-id="story-variant-single-view"] .native-story').should('have.css', 'color', contrastColorShouldBe[index])
-      cy.get('[data-test-id="toolbar-background"]').click()
-    })
-  })
-
   it('should provide background and contrast color (with iframe)', () => {
     cy.visit('story/src-components-contrastcolor-story-vue?variantId=_default')
     cy.get('[data-test-id="toolbar-background"]').click()
@@ -49,8 +38,8 @@ describe('background color', () => {
     cy.get('[data-test-id="toolbar-background"]').click()
     cy.get('[data-test-id="background-popper"]').should('be.visible').find('button').should('have.length', 6).each(($el, index) => {
       cy.wrap($el).click()
-      cy.get('[data-test-id="responsive-preview-bg"]').should('have.css', 'background-color', backgroundColorShouldBe[index])
-      cy.get('.histoire-generic-render-story .text').should('have.css', 'color', contrastColorShouldBe[index])
+      getIframeBody().find('[data-test-id="responsive-preview-bg"]').should('have.css', 'background-color', backgroundColorShouldBe[index])
+      getIframeBody().find('.histoire-generic-render-story .text').should('have.css', 'color', contrastColorShouldBe[index])
       cy.get('[data-test-id="toolbar-background"]').click()
     })
   })
diff --git a/examples/vue3/src/LongFile1.story.md b/examples/vue3/src/LongFile1.story.md
index 237575bc..67d411c6 100644
--- a/examples/vue3/src/LongFile1.story.md
+++ b/examples/vue3/src/LongFile1.story.md
@@ -66,14 +66,11 @@ You can change the layout of the variant by using the `layout` prop with an obje
 
 This is the default layout, displaying one variant at a time. The default behavior is to isolate the story with an iframe.
 
-Additional `layout` properties:
-- `iframe`: (default: `true`) enables the iframe, useful when your CSS has media queries for responsive design.
-
 ```vue{4}
 <template>
   <Story
     title="Cars"
-    :layout="{ type: 'single', iframe: true }"
+    :layout="{ type: 'single' }"
   >
     <Variant title="default">
       🚗
diff --git a/examples/vue3/src/components/ComplexParameter.story.vue b/examples/vue3/src/components/ComplexParameter.story.vue
index 60770560..dfc7b97a 100644
--- a/examples/vue3/src/components/ComplexParameter.story.vue
+++ b/examples/vue3/src/components/ComplexParameter.story.vue
@@ -15,7 +15,7 @@ const myParameter = [
 <template>
   <Story
     title="ComplexParameter"
-    :layout="{ type: 'single', iframe: false }"
+    :layout="{ type: 'single' }"
   >
     <ComplexParameter
       :complex-parameter="myParameter"
diff --git a/examples/vue3/src/components/Responsive.story.vue b/examples/vue3/src/components/Responsive.story.vue
index 3236f535..2bdda3e0 100644
--- a/examples/vue3/src/components/Responsive.story.vue
+++ b/examples/vue3/src/components/Responsive.story.vue
@@ -6,7 +6,6 @@ import Responsive from './Responsive.vue'
   <Story title="Responsive">
     <Variant
       title="default"
-      iframe
     >
       <Responsive />
     </Variant>
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
index 3312c1f3..4d53cd77 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantGrid.vue
@@ -1,21 +1,31 @@
 <script lang="ts" setup>
 import { useResizeObserver } from '@vueuse/core'
-import { computed, onMounted, ref, watch } from 'vue'
-import { useStoryStore } from '../../stores/story'
-import { isMobile } from '../../util/responsive'
-import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
-import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
-import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
+import { computed, onMounted, ref } from 'vue'
+import type { Story, Variant } from '../../types.js'
 import StoryVariantGridItem from './StoryVariantGridItem.vue'
 
-const storyStore = useStoryStore()
+const props = defineProps<{
+  story: Story
+  variant?: Variant
+}>()
+
+const emit = defineEmits<{
+  select: [variantId: string]
+  ready: [variantId: string]
+}>()
+
+const gap = 16
+
+const el = ref<HTMLDivElement>(null)
+
+// Grid size
 
 const gridTemplateWidth = computed(() => {
-  if (storyStore.currentStory.layout.type !== 'grid') {
+  if (props.story.layout.type !== 'grid') {
     return
   }
 
-  const layoutWidth = storyStore.currentStory.layout.width
+  const layoutWidth = props.story.layout.width
 
   if (!layoutWidth) {
     return '200px'
@@ -28,17 +38,41 @@ const gridTemplateWidth = computed(() => {
   return layoutWidth
 })
 
-const margin = 16
-const gap = 16
+const gridEl = ref<HTMLDivElement>(null)
+const gridColumnWidth = ref(1)
+const viewWidth = ref(1)
+
+const columnCount = computed(() => Math.min(props.story.variants.length, Math.floor((viewWidth.value + gap) / (gridColumnWidth.value + gap * 2))))
+
+function updateSize() {
+  if (!el.value) return
+  viewWidth.value = el.value.clientWidth
+
+  if (!gridEl.value) return
+
+  if (gridTemplateWidth.value.endsWith('%')) {
+    gridColumnWidth.value = viewWidth.value * Number.parseInt(gridTemplateWidth.value) / 100 - gap
+  }
+  else {
+    gridColumnWidth.value = Number.parseInt(gridTemplateWidth.value)
+  }
+}
+
+onMounted(() => {
+  updateSize()
+})
+
+useResizeObserver(gridEl, () => {
+  updateSize()
+})
+
+// Visible items
 
 const itemWidth = ref(16)
 const maxItemHeight = ref(0)
 const maxCount = ref(10)
-const countPerRow = ref(0)
 const visibleRows = ref(0)
 
-const el = ref<HTMLDivElement>(null)
-
 useResizeObserver(el, () => {
   updateMaxCount()
   updateSize()
@@ -47,27 +81,24 @@ useResizeObserver(el, () => {
 function updateMaxCount() {
   if (!maxItemHeight.value) return
 
-  const width = el.value!.clientWidth - margin * 2
   const height = el.value!.clientHeight
   const scrollTop = el.value!.scrollTop
 
   // width = (countPerRow - 1) * gap + countPerRow * itemWidth.value
-
   // W = (C - 1) * G + C * I
   // W = C * G - G + C * I
   // W + G = C * G + C * I
   // W + G = C * (G + I)
   // (W + G) / (G + I) = C
 
-  countPerRow.value = Math.floor((width + gap) / (itemWidth.value + gap))
   visibleRows.value = Math.ceil((height + scrollTop + gap) / (maxItemHeight.value + gap))
-  const newMaxCount = countPerRow.value * visibleRows.value
+  const newMaxCount = columnCount.value * visibleRows.value
   if (maxCount.value < newMaxCount) {
     maxCount.value = newMaxCount
   }
 
-  if (storyStore.currentVariant) {
-    const index = storyStore.currentStory.variants.indexOf(storyStore.currentVariant)
+  if (props.variant) {
+    const index = props.story.variants.indexOf(props.variant)
     if (index + 1 > maxCount.value) {
       maxCount.value = index + 1
     }
@@ -81,87 +112,39 @@ function onItemResize(w: number, h: number) {
     updateMaxCount()
   }
 }
-
-watch(() => storyStore.currentVariant, () => {
-  maxItemHeight.value = 0 // Reset max height
-  updateMaxCount()
-})
-
-// Grid size
-
-const gridEl = ref<HTMLDivElement>(null)
-const gridColumnWidth = ref(1)
-const viewWidth = ref(1)
-
-function updateSize() {
-  if (!el.value) return
-  viewWidth.value = el.value.clientWidth
-
-  if (!gridEl.value) return
-
-  if (gridTemplateWidth.value.endsWith('%')) {
-    gridColumnWidth.value = viewWidth.value * Number.parseInt(gridTemplateWidth.value) / 100 - gap
-  }
-  else {
-    gridColumnWidth.value = Number.parseInt(gridTemplateWidth.value)
-  }
-}
-
-onMounted(() => {
-  updateSize()
-})
-
-useResizeObserver(gridEl, () => {
-  updateSize()
-})
-
-const columnCount = computed(() => Math.min(storyStore.currentStory.variants.length, Math.floor((viewWidth.value + gap) / (gridColumnWidth.value + gap))))
 </script>
 
 <template>
-  <div class="histoire-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right">
-    <!-- Toolbar -->
-    <div
-      v-if="!isMobile"
-      class="htw-flex-none htw-flex htw-items-center htw-justify-end htw-h-8 htw-mx-2 htw-mt-1"
-    >
-      <ToolbarBackground />
-      <ToolbarTextDirection />
-
-      <DevOnlyToolbarOpenInEditor
-        v-if="__HISTOIRE_DEV__"
-        :file="storyStore.currentStory.file?.filePath"
-        tooltip="Edit story in editor"
-      />
-    </div>
-
-    <div
-      ref="el"
-      class="htw-overflow-y-auto htw-flex htw-flex-1"
-      @scroll="updateMaxCount()"
-    >
-      <div class="htw-flex htw-w-0 htw-flex-1 htw-mx-4">
+  <div
+    ref="el"
+    class="htw-overflow-y-auto htw-flex htw-h-full"
+    @scroll="updateMaxCount()"
+  >
+    <div class="htw-flex htw-w-0 htw-flex-1 htw-mx-4">
+      <div
+        class="htw-m-auto"
+        :style="{
+          minHeight: `${(props.story.variants.length / columnCount) * (maxItemHeight + gap) - gap}px`,
+        }"
+      >
         <div
-          class="htw-m-auto"
+          ref="gridEl"
+          class="htw-grid htw-gap-4 htw-my-4"
           :style="{
-            minHeight: `${(storyStore.currentStory.variants.length / countPerRow) * (maxItemHeight + gap) - gap}px`,
+            gridTemplateColumns: `repeat(${columnCount}, ${gridColumnWidth}px)`,
           }"
         >
-          <div
-            ref="gridEl"
-            class="htw-grid htw-gap-4 htw-my-4"
-            :style="{
-              gridTemplateColumns: `repeat(${columnCount}, ${gridColumnWidth}px)`,
-            }"
-          >
-            <StoryVariantGridItem
-              v-for="(variant, index) of storyStore.currentStory.variants.slice(0, maxCount)"
-              :key="index"
-              :variant="variant"
-              :story="storyStore.currentStory"
-              @resize="onItemResize"
-            />
-          </div>
+          <StoryVariantGridItem
+            v-for="(v, index) of props.story.variants.slice(0, maxCount)"
+            :key="index"
+            :variant="v"
+            :story="props.story"
+            :estimated-height="maxItemHeight"
+            :selected="v === variant"
+            @resize="onItemResize"
+            @select="emit('select', v.id)"
+            @ready="emit('ready', v.id)"
+          />
         </div>
       </div>
     </div>
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGridIframe.vue b/packages/histoire-app/src/app/components/story/StoryVariantGridIframe.vue
new file mode 100644
index 00000000..f7523d25
--- /dev/null
+++ b/packages/histoire-app/src/app/components/story/StoryVariantGridIframe.vue
@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import { computed, ref, toRaw, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useEventListener } from '@vueuse/core'
+import { applyState } from '@histoire/shared'
+import { EVENT_SEND, PREVIEW_SETTINGS_SYNC, SANDBOX_READY, SELECT_VARIANT, STATE_SYNC, VARIANT_READY } from '../../util/const'
+import { getSandboxUrl } from '../../util/sandbox'
+import { isMobile } from '../../util/responsive'
+import { useStoryStore } from '../../stores/story'
+import { usePreviewSettingsStore } from '../../stores/preview-settings'
+import type { HstEvent } from '../../stores/events'
+import { useEventsStore } from '../../stores/events'
+import { toRawDeep } from '../../util/state'
+import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
+import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
+import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
+
+const storyStore = useStoryStore()
+
+const router = useRouter()
+const route = useRoute()
+
+// Iframe
+
+const iframe = ref<HTMLIFrameElement>()
+
+function syncState() {
+  if (iframe.value && storyStore.currentVariant?.previewReady) {
+    iframe.value.contentWindow?.postMessage({
+      type: STATE_SYNC,
+      variantId: storyStore.currentVariant.id,
+      state: toRawDeep(storyStore.currentVariant?.state, true),
+    })
+  }
+}
+
+let synced = false
+
+watch(() => storyStore.currentVariant?.state, () => {
+  if (synced) {
+    synced = false
+    return
+  }
+  syncState()
+}, {
+  deep: true,
+  immediate: true,
+})
+
+useEventListener(window, 'message', (event) => {
+  if (event.data.__histoire) {
+    // console.log(`[main] received message:`, event.data)
+    switch (event.data.type) {
+      case STATE_SYNC:
+        updateVariantState(event.data.variantId, event.data.state)
+        break
+      case EVENT_SEND:
+        logEvent(event.data.event)
+        break
+      case SANDBOX_READY:
+        if (route.query.variantId) {
+          iframe.value?.contentWindow?.postMessage({
+            type: SELECT_VARIANT,
+            variantId: route.query.variantId,
+          })
+        }
+        break
+      case VARIANT_READY:
+        setPreviewReady(event.data.variantId)
+        break
+      case SELECT_VARIANT:
+        router.push({
+          query: {
+            variantId: event.data.variantId,
+          },
+        })
+        break
+    }
+  }
+})
+
+function updateVariantState(variantId: string, state: any) {
+  if (storyStore.currentVariant?.id === variantId) {
+    synced = true
+  }
+  const variant = storyStore.getCurrentStoryVariantById(variantId)
+  if (variant) {
+    applyState(variant.state, state)
+  }
+}
+
+function logEvent(event: HstEvent) {
+  const eventsStore = useEventsStore()
+  eventsStore.addEvent(event)
+}
+
+function setPreviewReady(variantId: string) {
+  const variant = storyStore.getCurrentStoryVariantById(variantId)
+  if (variant) {
+    Object.assign(variant, {
+      previewReady: true,
+    })
+  }
+}
+
+const sandboxUrl = computed(() => {
+  return getSandboxUrl(storyStore.currentStory)
+})
+
+const isIframeLoaded = ref(false)
+
+watch(sandboxUrl, () => {
+  isIframeLoaded.value = false
+})
+
+// Settings
+
+const settings = usePreviewSettingsStore().currentSettings
+
+function syncSettings() {
+  if (iframe.value) {
+    iframe.value.contentWindow?.postMessage({
+      type: PREVIEW_SETTINGS_SYNC,
+      settings: toRaw(settings),
+    })
+  }
+}
+
+watch(() => settings, () => {
+  syncSettings()
+}, {
+  deep: true,
+  immediate: true,
+})
+
+// Iframe load
+
+function onIframeLoad() {
+  isIframeLoaded.value = true
+  syncState()
+  syncSettings()
+}
+</script>
+
+<template>
+  <div class="histoire-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right">
+    <!-- Toolbar -->
+    <div
+      v-if="!isMobile"
+      class="htw-flex-none htw-flex htw-items-center htw-justify-end htw-h-8 htw-mx-2 htw-mt-1"
+    >
+      <ToolbarBackground />
+      <ToolbarTextDirection />
+
+      <DevOnlyToolbarOpenInEditor
+        v-if="__HISTOIRE_DEV__"
+        :file="storyStore.currentStory.file?.filePath"
+        tooltip="Edit story in editor"
+      />
+    </div>
+
+    <iframe
+      ref="iframe"
+      :src="sandboxUrl"
+      loading="lazy"
+      class="htw-w-full htw-h-full htw-relative"
+      :class="{
+        'htw-invisible': !isIframeLoaded,
+      }"
+      data-test-id="preview-iframe"
+      @load="onIframeLoad()"
+    />
+  </div>
+</template>
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue b/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue
index 70e32879..acec24d0 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantGridItem.vue
@@ -1,11 +1,8 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue'
 import { computed, ref, toRefs } from 'vue'
 import { Icon } from '@iconify/vue'
-import { useRouter } from 'vue-router'
 import { useResizeObserver } from '@vueuse/core'
 import { HstCopyIcon } from '@histoire/controls'
-import { useCurrentVariantRoute } from '../../util/variant'
 import type { Story, Variant } from '../../types'
 import { useScrollOnActive } from '../../util/scroll'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
@@ -17,24 +14,21 @@ import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
 import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
 import GenericRenderStory from './GenericRenderStory.vue'
 
-const props = defineProps({
-  variant: {
-    type: Object as PropType<Variant>,
-    required: true,
-  },
+const props = defineProps<{
+  story: Story
+  variant: Variant
+  selected: boolean
+}>()
 
-  story: {
-    type: Object as PropType<Story>,
-    required: true,
-  },
-})
+const emit = defineEmits<{
+  select: []
+  resize: [width: number, height: number]
+  ready: []
+}>()
 
-const emit = defineEmits({
-  resize: (_width: number, _height: number) => true,
-})
+const { selected } = toRefs(props)
 
 const { variant } = toRefs(props)
-const { isActive, targetRoute } = useCurrentVariantRoute(variant)
 
 Object.assign(props.variant, {
   previewReady: false,
@@ -43,30 +37,29 @@ function onReady() {
   Object.assign(props.variant, {
     previewReady: true,
   })
+  emit('ready')
 }
 
-const router = useRouter()
-
 function selectVariant() {
-  router.push(targetRoute.value)
+  emit('select')
 }
 
 const el = ref<HTMLDivElement>()
 
-const { autoScroll } = useScrollOnActive(isActive, el)
+const { autoScroll } = useScrollOnActive(selected, el)
 
 useResizeObserver(el, () => {
   if (props.variant.previewReady) {
     emit('resize', el.value!.clientWidth, el.value!.clientHeight)
-    if (isActive.value) {
+    if (selected.value) {
       autoScroll()
     }
   }
 })
 
-const settings = usePreviewSettingsStore().currentSettings
+const settingsStore = usePreviewSettingsStore()
 
-const contrastColor = computed(() => getContrastColor(settings))
+const contrastColor = computed(() => getContrastColor(settingsStore.currentSettings))
 const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor)
 </script>
 
@@ -77,25 +70,24 @@ const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrast
   >
     <!-- Header -->
     <div class="htw-flex-none htw-flex htw-items-center">
-      <RouterLink
+      <button
         v-tooltip="variant.title"
-        :to="targetRoute"
-        class="htw-rounded htw-w-max htw-px-2 htw-py-0.5 htw-min-w-16 htw-cursor-pointer htw-flex htw-items-center htw-gap-1 htw-flex-shrink"
+        class="htw-rounded htw-w-max htw-px-2 htw-py-0.5 htw-min-w-16 htw-cursor-pointer htw-flex htw-items-center htw-gap-1 htw-flex-shrink htw-bg-transparent"
         :class="{
-          'hover:htw-bg-gray-200 htw-text-gray-500 dark:hover:htw-bg-gray-800': !isActive,
-          'htw-bg-primary-200 hover:htw-bg-primary-300 htw-text-primary-800 dark:htw-bg-primary-700 dark:hover:htw-bg-primary-800 dark:htw-text-primary-200': isActive,
+          'hover:htw-bg-gray-200 htw-text-gray-500 dark:hover:htw-bg-gray-800': !selected,
+          'htw-bg-primary-200 hover:htw-bg-primary-300 htw-text-primary-800 dark:htw-bg-primary-700 dark:hover:htw-bg-primary-800 dark:htw-text-primary-200': selected,
         }"
       >
         <Icon
           :icon="variant.icon ?? 'carbon:cube'"
           class="htw-w-4 htw-h-4 htw-opacity-50"
           :class="{
-            'htw-text-gray-500': !isActive && !variant.iconColor,
-            'bind-icon-color': !isActive && variant.iconColor,
+            'htw-text-gray-500': !selected && !variant.iconColor,
+            'bind-icon-color': !selected && variant.iconColor,
           }"
         />
         <span class="htw-truncate htw-flex-1">{{ variant.title }}</span>
-      </RouterLink>
+      </button>
 
       <!-- Toolbar -->
       <div class="htw-flex-none htw-ml-auto htw-hidden group-hover:htw-flex htw-items-center">
@@ -113,8 +105,8 @@ const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrast
     <div
       class="htw-border htw-bg-white dark:htw-bg-gray-700 htw-rounded htw-flex-1 htw-p-4 htw-relative"
       :class="{
-        'htw-border-gray-100 dark:htw-border-gray-800': !isActive,
-        'htw-border-primary-200 dark:htw-border-primary-900': isActive,
+        'htw-border-gray-100 dark:htw-border-gray-800': !selected,
+        'htw-border-primary-200 dark:htw-border-primary-900': selected,
       }"
       data-test-id="sandbox-render"
       @click.stop="selectVariant()"
@@ -126,7 +118,7 @@ const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrast
       />
 
       <CheckerboardPattern
-        v-if="settings.checkerboard"
+        v-if="settingsStore.currentSettings.checkerboard"
         class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-text-gray-500/20"
       />
 
@@ -141,7 +133,7 @@ const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrast
           :key="`${story.id}-${variant.id}`"
           :variant="variant"
           :story="story"
-          :dir="settings.textDirection"
+          :dir="settingsStore.currentSettings.textDirection"
           :class="{
             [histoireConfig.theme.darkClass]: isDark,
           }"
@@ -158,6 +150,6 @@ const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrast
 }
 
 .bind-preview-bg {
-  background-color: v-bind('settings.backgroundColor');
+  background-color: v-bind('settingsStore.currentSettings.backgroundColor');
 }
 </style>
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewRemote.vue b/packages/histoire-app/src/app/components/story/StoryVariantSingleIframe.vue
similarity index 100%
rename from packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewRemote.vue
rename to packages/histoire-app/src/app/components/story/StoryVariantSingleIframe.vue
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue b/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue
deleted file mode 100644
index 8d4c425c..00000000
--- a/packages/histoire-app/src/app/components/story/StoryVariantSinglePreviewNative.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue'
-import type { Story, Variant } from '../../types'
-import { isDark } from '../../util/dark'
-import { histoireConfig } from '../../util/config'
-import { usePreviewSettingsStore } from '../../stores/preview-settings'
-import { getContrastColor } from '../../util/preview-settings'
-import GenericRenderStory from './GenericRenderStory.vue'
-import StoryResponsivePreview from './StoryResponsivePreview.vue'
-
-const props = defineProps<{
-  story: Story
-  variant: Variant
-}>()
-
-Object.assign(props.variant, {
-  previewReady: false,
-})
-
-function onReady() {
-  Object.assign(props.variant, {
-    previewReady: true,
-  })
-}
-
-const settings = usePreviewSettingsStore().currentSettings
-
-const contrastColor = computed(() => getContrastColor(settings))
-const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor)
-</script>
-
-<template>
-  <StoryResponsivePreview
-    v-slot="{ isResponsiveEnabled, finalWidth, finalHeight }"
-    class="histoire-story-variant-single-preview-native"
-    :variant="variant"
-  >
-    <div
-      :style="[
-        isResponsiveEnabled ? {
-          width: finalWidth ? `${finalWidth}px` : '100%',
-          height: finalHeight ? `${finalHeight}px` : '100%',
-        } : { width: '100%', height: '100%' },
-        {
-          '--histoire-contrast-color': contrastColor,
-          'color': autoApplyContrastColor ? contrastColor : undefined,
-        },
-      ]"
-      class="htw-relative"
-      data-test-id="sandbox-render"
-    >
-      <GenericRenderStory
-        :key="`${story.id}-${variant.id}`"
-        :variant="variant"
-        :story="story"
-        class="htw-h-full"
-        :class="{
-          [histoireConfig.sandboxDarkClass]: isDark, // @TODO remove
-          [histoireConfig.theme.darkClass]: isDark,
-        }"
-        :dir="settings.textDirection"
-        @ready="onReady"
-      />
-    </div>
-  </StoryResponsivePreview>
-</template>
diff --git a/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue b/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue
index fde04c6f..36c46831 100644
--- a/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue
+++ b/packages/histoire-app/src/app/components/story/StoryVariantSingleView.vue
@@ -7,8 +7,7 @@ import ToolbarBackground from '../toolbar/ToolbarBackground.vue'
 import ToolbarTextDirection from '../toolbar/ToolbarTextDirection.vue'
 import ToolbarNewTab from '../toolbar/ToolbarNewTab.vue'
 import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
-import StoryVariantSinglePreviewNative from './StoryVariantSinglePreviewNative.vue'
-import StoryVariantSinglePreviewRemote from './StoryVariantSinglePreviewRemote.vue'
+import StoryVariantSingleIframe from './StoryVariantSingleIframe.vue'
 
 defineProps<{
   variant: Variant
@@ -47,13 +46,7 @@ defineProps<{
     </div>
 
     <!-- Preview -->
-    <StoryVariantSinglePreviewNative
-      v-if="story.layout?.iframe === false"
-      :story="story"
-      :variant="variant"
-    />
-    <StoryVariantSinglePreviewRemote
-      v-else
+    <StoryVariantSingleIframe
       :story="story"
       :variant="variant"
     />
diff --git a/packages/histoire-app/src/app/components/story/StoryView.vue b/packages/histoire-app/src/app/components/story/StoryView.vue
index ad3ed315..cd6509b8 100644
--- a/packages/histoire-app/src/app/components/story/StoryView.vue
+++ b/packages/histoire-app/src/app/components/story/StoryView.vue
@@ -88,7 +88,9 @@ function scrollDocsToTop() {
       />
     </div>
     <template v-else-if="isMobile">
-      <StoryViewer />
+      <StoryViewer
+        :key="storyStore.currentStory.id"
+      />
     </template>
     <BaseSplitPane
       v-else
@@ -99,7 +101,9 @@ function scrollDocsToTop() {
       class="htw-h-full"
     >
       <template #first>
-        <StoryViewer />
+        <StoryViewer
+          :key="storyStore.currentStory.id"
+        />
       </template>
 
       <template #last>
diff --git a/packages/histoire-app/src/app/components/story/StoryViewer.vue b/packages/histoire-app/src/app/components/story/StoryViewer.vue
index c969525e..5b924bf5 100644
--- a/packages/histoire-app/src/app/components/story/StoryViewer.vue
+++ b/packages/histoire-app/src/app/components/story/StoryViewer.vue
@@ -3,7 +3,7 @@ import { computed, ref, watch } from 'vue'
 import { useStoryStore } from '../../stores/story'
 import MobileOverlay from '../app/MobileOverlay.vue'
 import StoryVariantListItem from './StoryVariantListItem.vue'
-import StoryVariantGrid from './StoryVariantGrid.vue'
+import StoryVariantGridIframe from './StoryVariantGridIframe.vue'
 import StoryVariantSingle from './StoryVariantSingle.vue'
 
 const storyStore = useStoryStore()
@@ -23,7 +23,7 @@ watch(variant, () => {
 
 <template>
   <div class="histoire-story-viewer htw-bg-gray-50 htw-h-full dark:htw-bg-gray-750">
-    <StoryVariantGrid
+    <StoryVariantGridIframe
       v-if="storyStore.currentStory.layout.type === 'grid'"
     />
     <StoryVariantSingle
diff --git a/packages/histoire-app/src/app/sandbox.ts b/packages/histoire-app/src/app/sandbox.ts
index 2c8e1752..3ce8ac84 100644
--- a/packages/histoire-app/src/app/sandbox.ts
+++ b/packages/histoire-app/src/app/sandbox.ts
@@ -1,18 +1,22 @@
+import 'virtual:$histoire-theme'
 import { parseQuery } from 'vue-router'
 import { computed, createApp, h, onMounted, ref, watch } from 'vue'
 import { createPinia } from 'pinia'
+import FloatingVue from 'floating-vue'
 import { applyState } from '@histoire/shared'
 import { files } from 'virtual:$histoire-stories'
 import GenericMountStory from './components/story/GenericMountStory.vue'
 import GenericRenderStory from './components/story/GenericRenderStory.vue'
+import StoryVariantGrid from './components/story/StoryVariantGrid.vue'
 import type { StoryFile } from './types'
 import { mapFile } from './util/mapping'
-import { PREVIEW_SETTINGS_SYNC, SANDBOX_READY, STATE_SYNC } from './util/const.js'
+import { PREVIEW_SETTINGS_SYNC, SANDBOX_READY, SELECT_VARIANT, STATE_SYNC, VARIANT_READY } from './util/const.js'
 import { applyPreviewSettings } from './util/preview-settings.js'
 import { isDark } from './util/dark.js'
 import { histoireConfig } from './util/config.js'
 import { toRawDeep } from './util/state.js'
 import { setupPluginApi } from './plugin.js'
+import { usePreviewSettingsStore } from './stores/preview-settings.js'
 
 const query = parseQuery(window.location.search)
 const file = ref<StoryFile>(mapFile(files.find(f => f.id === query.storyId)))
@@ -22,69 +26,129 @@ const app = createApp({
 
   setup() {
     const story = computed(() => file.value.story)
-    const variant = computed(() => story.value?.variants.find(v => v.id === query.variantId))
+    const grid = computed(() => query.grid === 'true')
+    const gridSelectedVariantId = ref<string | null>(null)
+    const variant = computed(() => story.value?.variants.find(v => v.id === query.variantId || v.id === gridSelectedVariantId.value))
 
     let synced = false
     let mounted = false
 
+    const previewSettingsStore = usePreviewSettingsStore()
+
     window.addEventListener('message', (event) => {
       // console.log('[sandbox] received message', event.data)
       if (event.data?.type === STATE_SYNC) {
         if (!mounted) return
         synced = true
-        applyState(variant.value.state, event.data.state)
+        if (!grid.value || variant.value?.id === event.data.variantId) {
+          applyState(variant.value.state, event.data.state)
+        }
       }
       else if (event.data?.type === PREVIEW_SETTINGS_SYNC) {
-        applyPreviewSettings(event.data.settings)
+        if (grid.value) {
+          Object.assign(previewSettingsStore.currentSettings, event.data.settings)
+        }
+        else {
+          applyPreviewSettings(event.data.settings)
+        }
+      }
+      else if (event.data?.type === SELECT_VARIANT) {
+        gridSelectedVariantId.value = event.data.variantId
       }
     })
 
-    watch(() => variant.value.state, (value) => {
+    watch(() => variant.value?.state, (value) => {
       if (synced && mounted) {
         synced = false
         return
       }
+      if (!variant.value) return
       window.parent?.postMessage({
+        __histoire: true,
         type: STATE_SYNC,
+        variantId: variant.value.id,
         state: toRawDeep(value, true),
       })
     }, {
       deep: true,
+      flush: 'sync',
     })
 
+    function sendReady() {
+      window.parent?.postMessage({
+        __histoire: true,
+        type: SANDBOX_READY,
+        variantId: variant.value?.id,
+      })
+    }
+
     onMounted(() => {
       mounted = true
-    })
 
-    return {
-      story,
-      variant,
-    }
-  },
+      if (grid.value) {
+        sendReady()
+      }
+    })
 
-  render() {
-    return [
+    return () => [
       h('div', { class: 'htw-sandbox-hidden' }, [
         h(GenericMountStory, {
           key: file.value.story.id,
           story: file.value.story,
         }),
       ]),
-      this.story && this.variant
-        ? h(GenericRenderStory, {
-          story: this.story,
-          variant: this.variant,
-          onReady: () => {
-            window.parent?.postMessage({
-              type: SANDBOX_READY,
+      story.value
+        ? grid.value
+          ? h(StoryVariantGrid, {
+            story: story.value,
+            variant: variant.value,
+            onSelect: (variantId) => {
+              synced = false
+
+              gridSelectedVariantId.value = variantId
+
+              window.parent?.postMessage({
+                __histoire: true,
+                type: SELECT_VARIANT,
+                variantId,
+              })
+            },
+            onReady: (variantId) => {
+              window.parent?.postMessage({
+                __histoire: true,
+                type: VARIANT_READY,
+                variantId,
+              })
+            },
+          })
+          : variant.value
+            ? h(GenericRenderStory, {
+              // ref: renderStory,
+              story: story.value,
+              variant: variant.value,
+              onReady: () => {
+                sendReady()
+              },
             })
-          },
-        })
+            : null
         : null,
     ]
   },
 })
 app.use(createPinia())
+app.use(FloatingVue, {
+  overflowPadding: 4,
+  arrowPadding: 8,
+  themes: {
+    tooltip: {
+      distance: 8,
+    },
+    dropdown: {
+      computeTransformOrigin: true,
+      distance: 8,
+    },
+  },
+})
 app.mount('#app')
 
 watch(isDark, (value) => {
diff --git a/packages/histoire-app/src/app/stores/story.ts b/packages/histoire-app/src/app/stores/story.ts
index e4e9d484..8d0f2034 100644
--- a/packages/histoire-app/src/app/stores/story.ts
+++ b/packages/histoire-app/src/app/stores/story.ts
@@ -11,7 +11,7 @@ export const useStoryStore = defineStore('story', () => {
 
   const currentStory = computed(() => stories.value.find(s => s.id === router.currentRoute.value.params.storyId))
 
-  const currentVariant = computed(() => currentStory.value?.variants.find(v => v.id === router.currentRoute.value.query.variantId))
+  const currentVariant = computed(() => getCurrentStoryVariantById(String(router.currentRoute.value.query.variantId)))
 
   const maps = computed(() => {
     const storyMap = new Map<string, Story>()
@@ -36,6 +36,10 @@ export const useStoryStore = defineStore('story', () => {
     return maps.value.variants.get(idWithStoryId)
   }
 
+  function getCurrentStoryVariantById(variantId: string) {
+    return currentStory.value?.variants.find(v => v.id === variantId)
+  }
+
   return {
     stories,
     setStories,
@@ -43,5 +47,6 @@ export const useStoryStore = defineStore('story', () => {
     currentVariant,
     getStoryById,
     getVariantById,
+    getCurrentStoryVariantById,
   }
 })
diff --git a/packages/histoire-app/src/app/style/main.pcss b/packages/histoire-app/src/app/style/main.pcss
index e4ae21ec..9bc4c57c 100644
--- a/packages/histoire-app/src/app/style/main.pcss
+++ b/packages/histoire-app/src/app/style/main.pcss
@@ -64,11 +64,6 @@ button {
     }
   }
 
-  .__histoire-render-story:not(.__histoire-render-custom-controls) {
-    overflow: auto;
-    min-height: 100%;
-  }
-
   .__histoire-code .shiki {
     background: transparent !important;
   }
diff --git a/packages/histoire-app/src/app/style/sandbox.css b/packages/histoire-app/src/app/style/sandbox.css
index 8877f168..6732dae1 100644
--- a/packages/histoire-app/src/app/style/sandbox.css
+++ b/packages/histoire-app/src/app/style/sandbox.css
@@ -17,8 +17,3 @@ html {
 .htw-sandbox-hidden {
   display: none;
 }
-
-.__histoire-render-story:not(.__histoire-render-custom-controls) {
-  overflow: auto;
-  min-height: 100%;
-}
diff --git a/packages/histoire-app/src/app/util/const.ts b/packages/histoire-app/src/app/util/const.ts
index 6be13175..8eb485d1 100644
--- a/packages/histoire-app/src/app/util/const.ts
+++ b/packages/histoire-app/src/app/util/const.ts
@@ -2,3 +2,5 @@ export const STATE_SYNC = '__histoire:state-sync'
 export const SANDBOX_READY = '__histoire:sandbox-ready'
 export const EVENT_SEND = '__histoire:event'
 export const PREVIEW_SETTINGS_SYNC = '__histoire:preview-settings-sync'
+export const SELECT_VARIANT = '__histoire:select-variant'
+export const VARIANT_READY = '__histoire:variant-ready'
diff --git a/packages/histoire-app/src/app/util/events.ts b/packages/histoire-app/src/app/util/events.ts
index c63d726f..abcbcf03 100644
--- a/packages/histoire-app/src/app/util/events.ts
+++ b/packages/histoire-app/src/app/util/events.ts
@@ -1,3 +1,4 @@
+import { parseQuery } from 'vue-router'
 import { EVENT_SEND } from './const'
 
 export async function logEvent(name: string, argument) {
@@ -7,9 +8,12 @@ export async function logEvent(name: string, argument) {
     argument: JSON.parse(stringifyEvent(argument)), // Needed for HTMLEvent that can't be cloned
   }
   if (location.href.includes('__sandbox')) {
+    const query = parseQuery(window.location.search)
     window.parent?.postMessage({
+      __histoire: true,
       type: EVENT_SEND,
       event,
+      variantId: query.variantId,
     })
   }
   else {
diff --git a/packages/histoire-app/src/app/util/sandbox.ts b/packages/histoire-app/src/app/util/sandbox.ts
index 572ed271..dd99bae3 100644
--- a/packages/histoire-app/src/app/util/sandbox.ts
+++ b/packages/histoire-app/src/app/util/sandbox.ts
@@ -1,9 +1,14 @@
 import { base } from '../router'
 import type { Story, Variant } from '../types'
 
-export function getSandboxUrl(story: Story, variant: Variant) {
+export function getSandboxUrl(story: Story, variant?: Variant) {
   const url = new URLSearchParams()
   url.append('storyId', story.id)
-  url.append('variantId', variant.id)
+  if (variant) {
+    url.append('variantId', variant.id)
+  }
+  else {
+    url.append('grid', 'true')
+  }
   return `${base}__sandbox.html?${url.toString()}`
 }
diff --git a/packages/histoire-controls/src/components/button/HstButton.story.vue b/packages/histoire-controls/src/components/button/HstButton.story.vue
index 4f2885fe..cd8916a2 100644
--- a/packages/histoire-controls/src/components/button/HstButton.story.vue
+++ b/packages/histoire-controls/src/components/button/HstButton.story.vue
@@ -12,7 +12,7 @@ const variants: Array<{ name: string, bind?: unknown }> = [
   <Story
     title="HstButton"
     group="controls"
-    :layout="{ type: 'grid', width: '200px', iframe: false }"
+    :layout="{ type: 'grid', width: '200px' }"
   >
     <Variant
       v-for="(variant, key) of variants"
diff --git a/packages/histoire-controls/src/components/button/HstButtonGroup.story.vue b/packages/histoire-controls/src/components/button/HstButtonGroup.story.vue
index 1f7d1104..64a4d83d 100644
--- a/packages/histoire-controls/src/components/button/HstButtonGroup.story.vue
+++ b/packages/histoire-controls/src/components/button/HstButtonGroup.story.vue
@@ -28,7 +28,6 @@ const count = ref('0')
   <Story
     title="HstButtonGroup"
     group="controls"
-    :layout="{ type: 'single', iframe: false }"
   >
     <Variant
       title="playground"
diff --git a/packages/histoire-controls/src/components/checkbox/HstCheckbox.story.vue b/packages/histoire-controls/src/components/checkbox/HstCheckbox.story.vue
index f4352e1b..63c84444 100644
--- a/packages/histoire-controls/src/components/checkbox/HstCheckbox.story.vue
+++ b/packages/histoire-controls/src/components/checkbox/HstCheckbox.story.vue
@@ -13,7 +13,6 @@ function initState() {
   <Story
     title="HstCheckbox"
     group="controls"
-    :layout="{ type: 'single', iframe: false }"
   >
     <Variant
       title="playground"
diff --git a/packages/histoire-controls/src/components/checkbox/HstCheckboxList.story.vue b/packages/histoire-controls/src/components/checkbox/HstCheckboxList.story.vue
index fcb49f9d..4dc33382 100644
--- a/packages/histoire-controls/src/components/checkbox/HstCheckboxList.story.vue
+++ b/packages/histoire-controls/src/components/checkbox/HstCheckboxList.story.vue
@@ -23,7 +23,6 @@ function initState() {
   <Story
     title="HstCheckboxList"
     group="controls"
-    :layout="{ type: 'single', iframe: false }"
   >
     <Variant
       title="playground"
diff --git a/packages/histoire-controls/src/components/checkbox/HstSimpleCheckbox.story.vue b/packages/histoire-controls/src/components/checkbox/HstSimpleCheckbox.story.vue
index 91888e57..c18ac192 100644
--- a/packages/histoire-controls/src/components/checkbox/HstSimpleCheckbox.story.vue
+++ b/packages/histoire-controls/src/components/checkbox/HstSimpleCheckbox.story.vue
@@ -11,7 +11,6 @@ function initState() {
 <template>
   <Story
     title="internals/HstSimpleCheckbox"
-    :layout="{ type: 'single', iframe: false }"
   >
     <Variant
       title="playground"
diff --git a/packages/histoire-controls/src/components/colorselect/HstColorSelect.story.vue b/packages/histoire-controls/src/components/colorselect/HstColorSelect.story.vue
index 82f90775..7ac88fca 100644
--- a/packages/histoire-controls/src/components/colorselect/HstColorSelect.story.vue
+++ b/packages/histoire-controls/src/components/colorselect/HstColorSelect.story.vue
@@ -11,7 +11,6 @@ const state = reactive({
   <Story
     title="HstColorSelect"
     group="controls"
-    :layout="{ type: 'single', iframe: false }"
   >
     <HstColorSelect
       v-model="state.value"
diff --git a/packages/histoire-controls/src/components/json/HstJson.story.vue b/packages/histoire-controls/src/components/json/HstJson.story.vue
index 109eae3a..e9c9b8f4 100644
--- a/packages/histoire-controls/src/components/json/HstJson.story.vue
+++ b/packages/histoire-controls/src/components/json/HstJson.story.vue
@@ -16,7 +16,6 @@ function initState() {
   <Story
     title="HstJson"
     group="controls"
-    :layout="{ type: 'single', iframe: false }"
   >
     <Variant
       title="default"
diff --git a/packages/histoire-controls/src/components/radio/HstRadio.story.vue b/packages/histoire-controls/src/components/radio/HstRadio.story.vue
index 66f1e18e..df97dcb5 100644
--- a/packages/histoire-controls/src/components/radio/HstRadio.story.vue
+++ b/packages/histoire-controls/src/components/radio/HstRadio.story.vue
@@ -25,7 +25,6 @@ function initState() {
   <Story
     title="HstRadio"
     group="controls"
-    :layout="{ type: 'single', iframe: false }"
   >
     <Variant
       title="playground"
diff --git a/packages/histoire-controls/src/components/slider/HstSlider.story.vue b/packages/histoire-controls/src/components/slider/HstSlider.story.vue
index 1245dd6e..65ff3285 100644
--- a/packages/histoire-controls/src/components/slider/HstSlider.story.vue
+++ b/packages/histoire-controls/src/components/slider/HstSlider.story.vue
@@ -14,7 +14,6 @@ const state = reactive({
   <Story
     title="HstSlider"
     group="controls"
-    :layout="{ type: 'single', iframe: false }"
   >
     <HstSlider
       v-model="state.value"
diff --git a/packages/histoire-shared/src/types/story.ts b/packages/histoire-shared/src/types/story.ts
index 43622288..6f55165a 100644
--- a/packages/histoire-shared/src/types/story.ts
+++ b/packages/histoire-shared/src/types/story.ts
@@ -11,7 +11,6 @@ export interface StoryFile {
 
 export type StoryLayout = {
   type: 'single'
-  iframe?: boolean
 } | {
   type: 'grid'
   width?: number | string
diff --git a/packages/histoire/src/node/builtin-plugins/pinceau-tokens.ts b/packages/histoire/src/node/builtin-plugins/pinceau-tokens.ts
index 82f1ec7f..f60d04ee 100644
--- a/packages/histoire/src/node/builtin-plugins/pinceau-tokens.ts
+++ b/packages/histoire/src/node/builtin-plugins/pinceau-tokens.ts
@@ -154,7 +154,7 @@ export default {
   group: 'design-system',
   icon: 'noto:paintbrush',
   responsiveDisabled: true,
-  layout: { type: 'single', iframe: false },
+  layout: { type: 'single' },
   variants: [
     {
       id: 'media-queries',
diff --git a/packages/histoire/src/node/builtin-plugins/tailwind-tokens.ts b/packages/histoire/src/node/builtin-plugins/tailwind-tokens.ts
index 08fdb0ae..b299f506 100644
--- a/packages/histoire/src/node/builtin-plugins/tailwind-tokens.ts
+++ b/packages/histoire/src/node/builtin-plugins/tailwind-tokens.ts
@@ -124,7 +124,7 @@ export default {
   group: 'design-system',
   icon: 'mdi:tailwind',
   responsiveDisabled: true,
-  layout: { type: 'single', iframe: false },
+  layout: { type: 'single' },
   variants: [
     {
       id: 'background-color',
diff --git a/packages/histoire/src/node/builtin-plugins/vanilla-support/collect.ts b/packages/histoire/src/node/builtin-plugins/vanilla-support/collect.ts
index 532dbfd9..98d50f8f 100644
--- a/packages/histoire/src/node/builtin-plugins/vanilla-support/collect.ts
+++ b/packages/histoire/src/node/builtin-plugins/vanilla-support/collect.ts
@@ -23,7 +23,7 @@ export async function run({ file, storyData }: ServerRunPayload) {
     id: options.id ?? file.id,
     title: options.title ?? file.fileName,
     group: options.group,
-    layout: options.layout ?? { type: 'single', iframe: true },
+    layout: options.layout ?? { type: 'single' },
     icon: options.icon,
     iconColor: options.iconColor,
     docsOnly: options.docsOnly ?? false,
diff --git a/packages/histoire/src/node/collect/index.ts b/packages/histoire/src/node/collect/index.ts
index 772d614d..03b6cd5b 100644
--- a/packages/histoire/src/node/collect/index.ts
+++ b/packages/histoire/src/node/collect/index.ts
@@ -126,7 +126,7 @@ export function useCollectStories(options: UseCollectStoriesOptions, ctx: Contex
       }
 
       if (!finalData.layout) {
-        finalData.layout = { type: 'single', iframe: true }
+        finalData.layout = { type: 'single' }
       }
 
       storyFile.id = finalData.id