From 974c7eb035e455c0c46379373dae2f828475a054 Mon Sep 17 00:00:00 2001
From: Axel Bocciarelli <axelboc@gmail.com>
Date: Wed, 29 Apr 2026 12:15:26 +0200
Subject: [PATCH] Continue CSF Next migration and use fullscreen layout as
 default

---
 apps/storybook/.storybook/preview.ts          |  2 +
 apps/storybook/src/Annotation.stories.tsx     |  4 -
 .../src/AxialSelectToZoom.stories.tsx         |  1 -
 .../src/AxialSelectionTool.stories.tsx        |  1 -
 apps/storybook/src/ColorBar.stories.tsx       |  3 -
 apps/storybook/src/DataCurve.stories.tsx      |  4 -
 .../src/DefaultInteractions.stories.tsx       |  1 -
 .../storybook/src/DimensionMapper.stories.tsx |  1 -
 apps/storybook/src/DomainControls.stories.tsx |  3 +
 .../src/DomainSlider.stories.module.css       |  6 +-
 apps/storybook/src/DomainSlider.stories.tsx   |  4 +-
 apps/storybook/src/DomainWidget.stories.tsx   |  4 +-
 apps/storybook/src/ErrorBars.stories.tsx      |  4 -
 .../storybook/src/FloatingControl.stories.tsx |  1 -
 apps/storybook/src/Glyphs.stories.tsx         |  4 -
 apps/storybook/src/Guides.stories.tsx         |  1 -
 apps/storybook/src/HeatmapMesh.stories.tsx    |  1 -
 apps/storybook/src/HeatmapVis.stories.tsx     |  4 -
 apps/storybook/src/Histogram.stories.tsx      | 22 ++++--
 apps/storybook/src/Html.stories.tsx           |  1 -
 apps/storybook/src/Line.stories.tsx           |  4 -
 apps/storybook/src/LineVis.stories.tsx        |  4 -
 apps/storybook/src/MatrixVis.stories.tsx      |  1 -
 apps/storybook/src/Menu.stories.tsx           |  2 +
 apps/storybook/src/Overlay.stories.tsx        |  1 -
 apps/storybook/src/Pan.stories.tsx            |  1 -
 .../src/PreventDefaultContextMenu.stories.tsx |  1 -
 apps/storybook/src/RgbVis.stories.tsx         | 76 +++++++++----------
 apps/storybook/src/ScatterVis.stories.tsx     | 59 +++++---------
 apps/storybook/src/SelectToZoom.stories.tsx   | 50 +++++-------
 apps/storybook/src/SelectionTool.stories.tsx  | 46 +++++------
 apps/storybook/src/Stacking.stories.tsx       | 13 ++--
 apps/storybook/src/SurfaceVis.stories.tsx     | 18 ++---
 apps/storybook/src/SvgElement.stories.tsx     | 14 ++--
 .../TiledHeatmapMesh.stories.tsx              |  4 -
 apps/storybook/src/Toolbar.stories.tsx        | 32 ++++----
 apps/storybook/src/Tooltip.stories.tsx        | 20 ++---
 apps/storybook/src/TooltipMesh.stories.tsx    | 36 ++++-----
 apps/storybook/src/VisCanvas.stories.tsx      | 66 ++++++++--------
 apps/storybook/src/XAxisZoom.stories.tsx      | 40 ++++------
 apps/storybook/src/YAxisZoom.stories.tsx      | 40 ++++------
 apps/storybook/src/Zoom.stories.tsx           | 33 +++-----
 ...omainWidgetDecorator.tsx => CenterTop.tsx} |  6 +-
 apps/storybook/src/useDrag.stories.tsx        | 14 ++--
 44 files changed, 261 insertions(+), 392 deletions(-)
 rename apps/storybook/src/decorators/{DomainWidgetDecorator.tsx => CenterTop.tsx} (66%)

diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts
index 8c3eccefa..3e683cc21 100644
--- a/apps/storybook/.storybook/preview.ts
+++ b/apps/storybook/.storybook/preview.ts
@@ -9,6 +9,8 @@ export default definePreview({
   addons: [addonDocs(), addonLinks()],
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: { sort: 'requiredFirst', disableSaveFromUI: true },
+    layout: 'fullscreen',
     options: {
       storySort: {
         order: [
diff --git a/apps/storybook/src/Annotation.stories.tsx b/apps/storybook/src/Annotation.stories.tsx
index 6172f5500..376c2fe31 100644
--- a/apps/storybook/src/Annotation.stories.tsx
+++ b/apps/storybook/src/Annotation.stories.tsx
@@ -15,10 +15,6 @@ import { formatCoord } from './utils';
 const meta = preview.meta({
   title: 'Building Blocks/Annotation',
   component: Annotation,
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   decorators: [
     (Story) => (
       <VisCanvas
diff --git a/apps/storybook/src/AxialSelectToZoom.stories.tsx b/apps/storybook/src/AxialSelectToZoom.stories.tsx
index 926f76314..7f594243f 100644
--- a/apps/storybook/src/AxialSelectToZoom.stories.tsx
+++ b/apps/storybook/src/AxialSelectToZoom.stories.tsx
@@ -24,7 +24,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Interactions/AxialSelectToZoom',
   component: AxialSelectToZoom,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     axis: {
       control: { type: 'inline-radio' },
diff --git a/apps/storybook/src/AxialSelectionTool.stories.tsx b/apps/storybook/src/AxialSelectionTool.stories.tsx
index 5b4f39df1..2c33a2c94 100644
--- a/apps/storybook/src/AxialSelectionTool.stories.tsx
+++ b/apps/storybook/src/AxialSelectionTool.stories.tsx
@@ -19,7 +19,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Interactions/AxialSelectionTool',
   component: AxialSelectionTool,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     axis: {
       control: { type: 'inline-radio' },
diff --git a/apps/storybook/src/ColorBar.stories.tsx b/apps/storybook/src/ColorBar.stories.tsx
index 88af27c4a..8f737fd5f 100644
--- a/apps/storybook/src/ColorBar.stories.tsx
+++ b/apps/storybook/src/ColorBar.stories.tsx
@@ -20,9 +20,6 @@ const meta = {
     ),
     FillHeight,
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
   argTypes: {
     domain: { control: false },
     domainMin: {
diff --git a/apps/storybook/src/DataCurve.stories.tsx b/apps/storybook/src/DataCurve.stories.tsx
index 2410b5516..28b7424ca 100644
--- a/apps/storybook/src/DataCurve.stories.tsx
+++ b/apps/storybook/src/DataCurve.stories.tsx
@@ -22,10 +22,6 @@ const meta = preview.meta({
   title: 'Building Blocks/DataCurve',
   component: DataCurve,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   argTypes: {
     abscissas: { control: false },
     ordinates: { control: false },
diff --git a/apps/storybook/src/DefaultInteractions.stories.tsx b/apps/storybook/src/DefaultInteractions.stories.tsx
index a0a46bf3d..e6b55007e 100644
--- a/apps/storybook/src/DefaultInteractions.stories.tsx
+++ b/apps/storybook/src/DefaultInteractions.stories.tsx
@@ -19,7 +19,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Interactions/DefaultInteractions',
   component: DefaultInteractions,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   args: {
     pan: {},
     zoom: {},
diff --git a/apps/storybook/src/DimensionMapper.stories.tsx b/apps/storybook/src/DimensionMapper.stories.tsx
index 96008668e..ce864c7ab 100644
--- a/apps/storybook/src/DimensionMapper.stories.tsx
+++ b/apps/storybook/src/DimensionMapper.stories.tsx
@@ -8,7 +8,6 @@ const meta = preview.meta({
   title: 'Building Blocks/DimensionMapper',
   component: DimensionMapper,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     dimMapping: { control: false },
   },
diff --git a/apps/storybook/src/DomainControls.stories.tsx b/apps/storybook/src/DomainControls.stories.tsx
index 313068ead..bfae4dc9f 100644
--- a/apps/storybook/src/DomainControls.stories.tsx
+++ b/apps/storybook/src/DomainControls.stories.tsx
@@ -4,9 +4,12 @@ import { useToggle } from '@react-hookz/web';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
 
+import CenterTop from './decorators/CenterTop';
+
 const meta = {
   title: 'Toolbar/DomainControls',
   component: DomainControls,
+  decorators: [CenterTop],
   argTypes: {
     sliderDomain: { control: false },
     errors: { control: false },
diff --git a/apps/storybook/src/DomainSlider.stories.module.css b/apps/storybook/src/DomainSlider.stories.module.css
index ded2c450a..84916945a 100644
--- a/apps/storybook/src/DomainSlider.stories.module.css
+++ b/apps/storybook/src/DomainSlider.stories.module.css
@@ -1,7 +1,6 @@
 .root {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
 }
 
 .sliderWrapper {
@@ -10,6 +9,11 @@
   --h5w-domainSlider-track--width: 12rem;
 }
 
+.info {
+  min-width: 25em;
+  padding-left: 0;
+}
+
 .resetBtn {
   margin-left: 0.75rem;
 }
diff --git a/apps/storybook/src/DomainSlider.stories.tsx b/apps/storybook/src/DomainSlider.stories.tsx
index 98b09c150..5a8baa63a 100644
--- a/apps/storybook/src/DomainSlider.stories.tsx
+++ b/apps/storybook/src/DomainSlider.stories.tsx
@@ -10,12 +10,14 @@ import { COLOR_SCALE_TYPES } from '@h5web/shared/vis-utils';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
 
+import CenterTop from './decorators/CenterTop';
 import styles from './DomainSlider.stories.module.css';
 import { formatDomain } from './utils';
 
 const meta = {
   title: 'Toolbar/DomainSlider',
   component: DomainSlider,
+  decorators: [CenterTop],
   argTypes: {
     value: { control: false },
     safeVisDomain: { control: false },
@@ -77,7 +79,7 @@ export const Default = {
             }}
           />
         </div>
-        <ul>
+        <ul className={styles.info}>
           <li>
             Data domain: <code>{formatDomain(dataDomain)}</code>
           </li>
diff --git a/apps/storybook/src/DomainWidget.stories.tsx b/apps/storybook/src/DomainWidget.stories.tsx
index 3da9a247d..f56c9b431 100644
--- a/apps/storybook/src/DomainWidget.stories.tsx
+++ b/apps/storybook/src/DomainWidget.stories.tsx
@@ -3,12 +3,12 @@ import { COLOR_SCALE_TYPES } from '@h5web/shared/vis-utils';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
-import DomainWidgetDecorator from './decorators/DomainWidgetDecorator';
+import CenterTop from './decorators/CenterTop';
 
 const meta = {
   title: 'Toolbar/DomainWidget',
   component: DomainWidget,
-  decorators: [DomainWidgetDecorator],
+  decorators: [CenterTop],
   args: {
     customDomain: [null, null],
     onCustomDomainChange: () => {},
diff --git a/apps/storybook/src/ErrorBars.stories.tsx b/apps/storybook/src/ErrorBars.stories.tsx
index ae45c8935..e115ceac3 100644
--- a/apps/storybook/src/ErrorBars.stories.tsx
+++ b/apps/storybook/src/ErrorBars.stories.tsx
@@ -18,10 +18,6 @@ const meta = preview.meta({
   title: 'Building Blocks/ErrorBars',
   component: ErrorBars,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   argTypes: {
     abscissas: { control: false },
     ordinates: { control: false },
diff --git a/apps/storybook/src/FloatingControl.stories.tsx b/apps/storybook/src/FloatingControl.stories.tsx
index 889c35d67..984452346 100644
--- a/apps/storybook/src/FloatingControl.stories.tsx
+++ b/apps/storybook/src/FloatingControl.stories.tsx
@@ -8,7 +8,6 @@ const meta = preview.meta({
   title: 'Toolbar/FloatingControl',
   component: FloatingControl,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
 });
 
 export const Default = meta.story({
diff --git a/apps/storybook/src/Glyphs.stories.tsx b/apps/storybook/src/Glyphs.stories.tsx
index a5c17f61b..0220bf011 100644
--- a/apps/storybook/src/Glyphs.stories.tsx
+++ b/apps/storybook/src/Glyphs.stories.tsx
@@ -18,10 +18,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Glyphs',
   component: Glyphs,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   argTypes: {
     abscissas: { control: false },
     ordinates: { control: false },
diff --git a/apps/storybook/src/Guides.stories.tsx b/apps/storybook/src/Guides.stories.tsx
index 92dfce616..fd3778c5a 100644
--- a/apps/storybook/src/Guides.stories.tsx
+++ b/apps/storybook/src/Guides.stories.tsx
@@ -13,7 +13,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Guides',
   component: Guides,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
 });
 
 export const Default = meta.story({
diff --git a/apps/storybook/src/HeatmapMesh.stories.tsx b/apps/storybook/src/HeatmapMesh.stories.tsx
index 4210d4e13..2871713a4 100644
--- a/apps/storybook/src/HeatmapMesh.stories.tsx
+++ b/apps/storybook/src/HeatmapMesh.stories.tsx
@@ -36,7 +36,6 @@ const meta = preview.meta({
   title: 'Building Blocks/HeatmapMesh',
   component: HeatmapMesh,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen', controls: { sort: 'requiredFirst' } },
   argTypes: {
     scaleType: {
       control: { type: 'inline-radio' },
diff --git a/apps/storybook/src/HeatmapVis.stories.tsx b/apps/storybook/src/HeatmapVis.stories.tsx
index 28644470f..d54208d59 100644
--- a/apps/storybook/src/HeatmapVis.stories.tsx
+++ b/apps/storybook/src/HeatmapVis.stories.tsx
@@ -27,10 +27,6 @@ const meta = {
   title: 'Visualizations/HeatmapVis',
   component: HeatmapVis,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   args: {
     dataArray: twoD,
     domain,
diff --git a/apps/storybook/src/Histogram.stories.tsx b/apps/storybook/src/Histogram.stories.tsx
index 40d7af4ce..6dadf548a 100644
--- a/apps/storybook/src/Histogram.stories.tsx
+++ b/apps/storybook/src/Histogram.stories.tsx
@@ -3,10 +3,12 @@ import { COLOR_SCALE_TYPES } from '@h5web/shared/vis-utils';
 import { useState } from 'react';
 
 import preview from '../.storybook/preview';
+import CenterTop from './decorators/CenterTop';
 
 const meta = preview.meta({
   title: 'Toolbar/Histogram',
   component: Histogram,
+  decorators: [CenterTop],
   argTypes: {
     scaleType: {
       control: { type: 'inline-radio' },
@@ -24,17 +26,27 @@ export const Default = meta.story({
     const [max, setMax] = useState(value[1]);
 
     return (
-      <>
-        <p style={{ marginTop: 0 }}>
-          Domain: [{min.toFixed(2)}, {max.toFixed(2)}]
-        </p>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '1rem',
+        }}
+      >
         <Histogram
           {...otherArgs}
           value={[min, max]}
           onChangeMin={setMin}
           onChangeMax={setMax}
         />
-      </>
+        <p>
+          Domain:{' '}
+          <code>
+            [{min.toFixed(2)}, {max.toFixed(2)}]
+          </code>
+        </p>
+      </div>
     );
   },
   args: {
diff --git a/apps/storybook/src/Html.stories.tsx b/apps/storybook/src/Html.stories.tsx
index 5d3ca143f..b49870a2c 100644
--- a/apps/storybook/src/Html.stories.tsx
+++ b/apps/storybook/src/Html.stories.tsx
@@ -15,7 +15,6 @@ import FillHeight from './decorators/FillHeight';
 const meta = preview.meta({
   title: 'Building Blocks/Html',
   component: Html,
-  parameters: { layout: 'fullscreen' },
   decorators: [
     (Story) => (
       <VisCanvas
diff --git a/apps/storybook/src/Line.stories.tsx b/apps/storybook/src/Line.stories.tsx
index 2edebf95b..ce3150d14 100644
--- a/apps/storybook/src/Line.stories.tsx
+++ b/apps/storybook/src/Line.stories.tsx
@@ -18,10 +18,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Line',
   component: Line,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   argTypes: {
     abscissas: { control: false },
     ordinates: { control: false },
diff --git a/apps/storybook/src/LineVis.stories.tsx b/apps/storybook/src/LineVis.stories.tsx
index eb17211a4..5dd9965ab 100644
--- a/apps/storybook/src/LineVis.stories.tsx
+++ b/apps/storybook/src/LineVis.stories.tsx
@@ -32,10 +32,6 @@ const meta = {
   title: 'Visualizations/LineVis',
   component: LineVis,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   args: {
     dataArray: oneD,
     domain: undefined, // compute dynamically in each story based on scale type, errors and auxiliaries
diff --git a/apps/storybook/src/MatrixVis.stories.tsx b/apps/storybook/src/MatrixVis.stories.tsx
index b789382cc..19ca79c03 100644
--- a/apps/storybook/src/MatrixVis.stories.tsx
+++ b/apps/storybook/src/MatrixVis.stories.tsx
@@ -19,7 +19,6 @@ const meta = preview.meta({
   title: 'Visualizations/MatrixVis',
   component: MatrixVis,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
 });
 
 export const Default = meta.story({
diff --git a/apps/storybook/src/Menu.stories.tsx b/apps/storybook/src/Menu.stories.tsx
index 77f4ae43a..bc9dd09a8 100644
--- a/apps/storybook/src/Menu.stories.tsx
+++ b/apps/storybook/src/Menu.stories.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { MdIcecream } from 'react-icons/md';
 
 import preview from '../.storybook/preview';
+import CenterTop from './decorators/CenterTop';
 
 type Option = 'Bar' | 'Baz';
 const OPTIONS: Option[] = ['Bar', 'Baz'];
@@ -10,6 +11,7 @@ const OPTIONS: Option[] = ['Bar', 'Baz'];
 const meta = preview.meta({
   title: 'Toolbar/Menu',
   component: Menu,
+  decorators: [CenterTop],
 });
 
 export const Default = meta.story({
diff --git a/apps/storybook/src/Overlay.stories.tsx b/apps/storybook/src/Overlay.stories.tsx
index 7b2add50c..9d97e52ef 100644
--- a/apps/storybook/src/Overlay.stories.tsx
+++ b/apps/storybook/src/Overlay.stories.tsx
@@ -7,7 +7,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Overlay',
   component: Overlay,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     className: { control: false },
     style: { control: false },
diff --git a/apps/storybook/src/Pan.stories.tsx b/apps/storybook/src/Pan.stories.tsx
index f21f777fe..5d9f940ec 100644
--- a/apps/storybook/src/Pan.stories.tsx
+++ b/apps/storybook/src/Pan.stories.tsx
@@ -14,7 +14,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Interactions/Pan',
   component: Pan,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     id: { control: false },
     button: {
diff --git a/apps/storybook/src/PreventDefaultContextMenu.stories.tsx b/apps/storybook/src/PreventDefaultContextMenu.stories.tsx
index 1b7cc25f6..a6f9c6657 100644
--- a/apps/storybook/src/PreventDefaultContextMenu.stories.tsx
+++ b/apps/storybook/src/PreventDefaultContextMenu.stories.tsx
@@ -15,7 +15,6 @@ const meta = preview.meta({
   title: 'Building Blocks/Interactions/PreventDefaultContextMenu',
   component: PreventDefaultContextMenu,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     when: {
       control: { type: 'inline-check' },
diff --git a/apps/storybook/src/RgbVis.stories.tsx b/apps/storybook/src/RgbVis.stories.tsx
index 9fd9b7b91..23121b08f 100644
--- a/apps/storybook/src/RgbVis.stories.tsx
+++ b/apps/storybook/src/RgbVis.stories.tsx
@@ -1,44 +1,41 @@
 import { ImageType, mockValues, RgbVis } from '@h5web/lib';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 
 const rgbThreeD = mockValues.threeD_rgb();
 
-const meta = {
+const meta = preview.meta({
   title: 'Visualizations/RgbVis',
   component: RgbVis,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
-  args: {
-    dataArray: rgbThreeD,
-    aspect: 'equal',
-    showGrid: true,
-  },
   argTypes: {
     dataArray: { control: false },
     aspect: {
       control: { type: 'inline-radio' },
-      options: ['auto', 'equal', 0.25],
+      options: ['auto', 'equal', 0.25, undefined],
+    },
+    imageType: {
+      control: { type: 'inline-radio' },
+      options: ['RGB', 'BGR', undefined],
     },
   },
-} satisfies Meta<typeof RgbVis>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+});
 
-export const Default = {} satisfies Story;
+export const Default = meta.story({
+  args: {
+    dataArray: rgbThreeD,
+    showGrid: true,
+  },
+});
 
-export const BGR = {
+export const BGR = Default.extend({
   args: {
     imageType: ImageType.BGR,
   },
-} satisfies Story;
+});
 
-export const AxisValues = {
+export const AxisValues = Default.extend({
   args: {
     abscissaParams: {
       value: Array.from(
@@ -53,9 +50,9 @@ export const AxisValues = {
       ),
     },
   },
-} satisfies Story;
+});
 
-export const DescendingAxisValues = {
+export const DescendingAxisValues = Default.extend({
   args: {
     abscissaParams: {
       value: Array.from(
@@ -70,57 +67,56 @@ export const DescendingAxisValues = {
       ),
     },
   },
-} satisfies Story;
+});
 
-export const TypedArray = {
+export const TypedArray = Default.extend({
   args: {
     dataArray: mockValues.int8_rgb(),
   },
-} satisfies Story;
+});
 
-export const ChangeInteractionKeys = {
+export const ChangeInteractionKeys = Default.extend({
   args: {
     interactions: {
       pan: { modifierKey: 'Shift' },
-      selectToZoom: { modifierKey: 'Control' },
     },
   },
-} satisfies Story;
+});
 
-export const AutoAspectRatio = {
+export const AutoAspectRatio = Default.extend({
   args: {
     aspect: 'auto',
   },
-} satisfies Story;
+});
 
-export const CustomAspectRatio = {
+export const CustomAspectRatio = Default.extend({
   args: {
     aspect: 0.25,
   },
-} satisfies Story;
+});
 
-export const FlipXAxis = {
+export const FlipXAxis = Default.extend({
   args: {
     dataArray: rgbThreeD,
     flipXAxis: true,
   },
-} satisfies Story;
+});
 
-export const FlipYAxis = {
+export const FlipYAxis = Default.extend({
   args: {
     dataArray: rgbThreeD,
     flipYAxis: true,
   },
-} satisfies Story;
+});
 
-export const NoGrid = {
+export const NoGrid = Default.extend({
   args: {
     showGrid: false,
   },
-} satisfies Story;
+});
 
-export const WithTitle = {
+export const WithTitle = Default.extend({
   args: {
     title: 'RGB image',
   },
-} satisfies Story;
+});
diff --git a/apps/storybook/src/ScatterVis.stories.tsx b/apps/storybook/src/ScatterVis.stories.tsx
index adfc14ac1..273511189 100644
--- a/apps/storybook/src/ScatterVis.stories.tsx
+++ b/apps/storybook/src/ScatterVis.stories.tsx
@@ -2,10 +2,10 @@ import { getDomain, INTERPOLATORS, ScatterVis } from '@h5web/lib';
 import { assertDefined } from '@h5web/shared/guards';
 import { ScaleType } from '@h5web/shared/vis-models';
 import { COLOR_SCALE_TYPES } from '@h5web/shared/vis-utils';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
 import ndarray from 'ndarray';
 import { useState } from 'react';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 
 const abscissas = [
@@ -47,18 +47,10 @@ const dataArray = ndarray(data);
 const domain = getDomain(data);
 assertDefined(domain);
 
-const meta = {
+const meta = preview.meta({
   title: 'Visualizations/ScatterVis',
   component: ScatterVis,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
-  args: {
-    colorMap: 'Viridis',
-    showGrid: true,
-  },
   argTypes: {
     colorMap: {
       control: { type: 'select' },
@@ -66,70 +58,61 @@ const meta = {
     },
     scaleType: {
       control: { type: 'inline-radio' },
-      options: COLOR_SCALE_TYPES,
+      options: [...COLOR_SCALE_TYPES, undefined],
     },
   },
-} satisfies Meta<typeof ScatterVis>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+});
 
-export const Default = {
+export const Default = meta.story({
   args: {
     abscissaParams: { value: abscissas },
     ordinateParams: { value: ordinates },
     dataArray,
     domain,
+    showGrid: true,
   },
-} satisfies Story;
+});
 
-export const TypedArray = {
+export const TypedArray = Default.extend({
   args: {
-    ...Default.args,
     dataArray: ndarray(Float32Array.from(data)),
   },
-} satisfies Story;
+});
 
-export const MarkerSize = {
+export const MarkerSize = Default.extend({
   args: {
-    ...Default.args,
     size: 20,
   },
-} satisfies Story;
+});
 
-export const ColorMap = {
+export const ColorMap = Default.extend({
   args: {
-    ...Default.args,
     colorMap: 'Rainbow',
   },
-} satisfies Story;
+});
 
-export const ColorScaleType = {
+export const ColorScaleType = Default.extend({
   args: {
-    ...Default.args,
     scaleType: ScaleType.SymLog,
   },
-} satisfies Story;
+});
 
-export const Labels = {
+export const Labels = Default.extend({
   args: {
-    ...Default.args,
     abscissaParams: { value: abscissas, label: 'Latitude' },
     ordinateParams: { value: ordinates, label: 'Longitude' },
     title: 'A Scatter vis',
   },
-} satisfies Story;
+});
 
-export const AxisScaleTypes = {
+export const AxisScaleTypes = Default.extend({
   args: {
-    ...Default.args,
     abscissaParams: { value: abscissas, scaleType: ScaleType.SymLog },
     ordinateParams: { value: ordinates, scaleType: ScaleType.Log },
   },
-} satisfies Story;
+});
 
-export const Click = {
-  ...Default,
+export const Click = Default.extend({
   render: (args) => {
     const [index, setIndex] = useState<number>();
 
@@ -145,4 +128,4 @@ export const Click = {
       />
     );
   },
-} satisfies Story;
+});
diff --git a/apps/storybook/src/SelectToZoom.stories.tsx b/apps/storybook/src/SelectToZoom.stories.tsx
index 5c59b22b1..cd16507d4 100644
--- a/apps/storybook/src/SelectToZoom.stories.tsx
+++ b/apps/storybook/src/SelectToZoom.stories.tsx
@@ -11,35 +11,27 @@ import {
   Zoom,
 } from '@h5web/lib';
 import { ScaleType } from '@h5web/shared/vis-models';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 
 const typedTwoD = toTypedNdArray(mockValues.twoD(), Float32Array);
 
-const meta = {
+const meta = preview.meta({
   title: 'Building Blocks/Interactions/SelectToZoom',
   component: SelectToZoom,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
-  args: {
-    modifierKey: [],
-    disabled: false,
-  },
   argTypes: {
     modifierKey: {
       control: { type: 'inline-check' },
       options: ['Alt', 'Control', 'Shift'],
     },
   },
-} satisfies Meta<typeof SelectToZoom>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+});
 
-export const InsideAutoAspectCanvas = {
+export const InsideAutoAspectCanvas = meta.story({
   render: (args) => {
-    const { modifierKey } = args;
+    const { modifierKey = [] } = args;
     const [rows, cols] = typedTwoD.shape;
 
     const domain = useDomain(typedTwoD);
@@ -50,7 +42,7 @@ export const InsideAutoAspectCanvas = {
         abscissaConfig={{ visDomain: [0, cols], showGrid: true }}
         ordinateConfig={{ visDomain: [0, rows], showGrid: true }}
       >
-        <Pan modifierKey={modifierKey?.length === 0 ? 'Control' : undefined} />
+        <Pan modifierKey={modifierKey.length === 0 ? 'Control' : undefined} />
         <Zoom />
         <SelectToZoom {...args} />
         <ResetZoomButton />
@@ -64,11 +56,11 @@ export const InsideAutoAspectCanvas = {
       </VisCanvas>
     );
   },
-} satisfies Story;
+});
 
-export const InsideEqualAspectCanvas = {
+export const InsideEqualAspectCanvas = meta.story({
   render: (args) => {
-    const { modifierKey } = args;
+    const { modifierKey = [] } = args;
     const [rows, cols] = typedTwoD.shape;
 
     const domain = useDomain(typedTwoD);
@@ -80,7 +72,7 @@ export const InsideEqualAspectCanvas = {
         ordinateConfig={{ visDomain: [0, rows], showGrid: true }}
         aspect="equal"
       >
-        <Pan modifierKey={modifierKey?.length === 0 ? 'Control' : undefined} />
+        <Pan modifierKey={modifierKey.length === 0 ? 'Control' : undefined} />
         <Zoom />
         <SelectToZoom {...args} />
         <ResetZoomButton />
@@ -94,32 +86,28 @@ export const InsideEqualAspectCanvas = {
       </VisCanvas>
     );
   },
-} satisfies Story;
+});
 
-export const ModifierKey = {
-  ...InsideAutoAspectCanvas,
+export const ModifierKey = InsideAutoAspectCanvas.extend({
   args: {
     modifierKey: ['Control'],
   },
-} satisfies Story;
+});
 
-export const MultipleModifierKeys = {
-  ...InsideAutoAspectCanvas,
+export const MultipleModifierKeys = InsideAutoAspectCanvas.extend({
   args: {
     modifierKey: ['Control', 'Shift'],
   },
-} satisfies Story;
+});
 
-export const MinZoom = {
-  ...InsideAutoAspectCanvas,
+export const MinZoom = InsideAutoAspectCanvas.extend({
   args: {
     minZoom: 200,
   },
-} satisfies Story;
+});
 
-export const Disabled = {
-  ...InsideAutoAspectCanvas,
+export const Disabled = InsideAutoAspectCanvas.extend({
   args: {
     disabled: true,
   },
-} satisfies Story;
+});
diff --git a/apps/storybook/src/SelectionTool.stories.tsx b/apps/storybook/src/SelectionTool.stories.tsx
index 0a1b5d252..0e5c2cd7e 100644
--- a/apps/storybook/src/SelectionTool.stories.tsx
+++ b/apps/storybook/src/SelectionTool.stories.tsx
@@ -13,35 +13,27 @@ import {
   Zoom,
 } from '@h5web/lib';
 import { useThrottledState } from '@react-hookz/web';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 import { getTitleForSelection } from './utils';
 
-const meta = {
+const meta = preview.meta({
   title: 'Building Blocks/Interactions/SelectionTool',
   component: SelectionTool,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
-  args: {
-    modifierKey: [],
-    children: undefined,
-  },
   argTypes: {
     modifierKey: {
       control: { type: 'inline-check' },
       options: ['Alt', 'Control', 'Shift'],
     },
   },
-} satisfies Meta<typeof SelectionTool>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+});
 
-export const Rectangle = {
+export const Rectangle = meta.story({
   render: (args) => {
-    const { modifierKey } = args;
+    const { modifierKey = [] } = args;
 
     const [activeSelection, setActiveSelection] = useThrottledState<
       Selection | undefined
@@ -53,7 +45,7 @@ export const Rectangle = {
         abscissaConfig={{ visDomain: [-10, 0], showGrid: true }}
         ordinateConfig={{ visDomain: [50, 100], showGrid: true }}
       >
-        <Pan modifierKey={modifierKey?.length === 0 ? 'Control' : undefined} />
+        <Pan modifierKey={modifierKey.length === 0 ? 'Control' : undefined} />
         <Zoom />
         <ResetZoomButton />
 
@@ -78,23 +70,21 @@ export const Rectangle = {
       </VisCanvas>
     );
   },
-} satisfies Story;
+});
 
-export const ModifierKey = {
-  ...Rectangle,
+export const ModifierKey = Rectangle.extend({
   args: {
-    modifierKey: 'Control',
+    modifierKey: ['Control'],
   },
-} satisfies Story;
+});
 
-export const Validation = {
-  ...Rectangle,
+export const Validation = Rectangle.extend({
   args: {
     validate: ({ html }) => Box.fromPoints(...html).hasMinSize(100),
   },
-} satisfies Story;
+});
 
-export const PersistedDataSelection = {
+export const PersistedDataSelection = meta.story({
   render: () => {
     const [persistedDataSelection, setPersistedDataSelection] =
       useState<Rect>();
@@ -137,9 +127,9 @@ export const PersistedDataSelection = {
       </VisCanvas>
     );
   },
-} satisfies Story;
+});
 
-export const LineWithLengthValidation = {
+export const LineWithLengthValidation = meta.story({
   render: () => {
     const [isValid, setValid] = useThrottledState<boolean | undefined>(
       undefined,
@@ -181,9 +171,9 @@ export const LineWithLengthValidation = {
       </VisCanvas>
     );
   },
-} satisfies Story;
+});
 
-export const RectWithTransform = {
+export const RectWithTransform = meta.story({
   render: () => (
     <VisCanvas
       abscissaConfig={{ visDomain: [-10, 0], showGrid: true }}
@@ -220,4 +210,4 @@ export const RectWithTransform = {
       </SelectionTool>
     </VisCanvas>
   ),
-} satisfies Story;
+});
diff --git a/apps/storybook/src/Stacking.stories.tsx b/apps/storybook/src/Stacking.stories.tsx
index cbdfbc23c..95abd732a 100644
--- a/apps/storybook/src/Stacking.stories.tsx
+++ b/apps/storybook/src/Stacking.stories.tsx
@@ -8,20 +8,17 @@ import {
   TooltipMesh,
   VisCanvas,
 } from '@h5web/lib';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Vector3 } from 'three';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 
-const meta = {
+const meta = preview.meta({
   decorators: [FillHeight],
   tags: ['!dev'], // hide from sidebar (use in `Stacking.mdx` doc page only)
-} satisfies Meta;
+});
 
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default = {
+export const Default = meta.story({
   render: () => (
     <VisCanvas
       abscissaConfig={{ visDomain: [0, 41], showGrid: true }}
@@ -50,4 +47,4 @@ export const Default = {
       <TooltipMesh guides="both" renderTooltip={() => <>Tooltip</>} />
     </VisCanvas>
   ),
-} satisfies Story;
+});
diff --git a/apps/storybook/src/SurfaceVis.stories.tsx b/apps/storybook/src/SurfaceVis.stories.tsx
index d1f19d4d9..2af8394b0 100644
--- a/apps/storybook/src/SurfaceVis.stories.tsx
+++ b/apps/storybook/src/SurfaceVis.stories.tsx
@@ -1,16 +1,16 @@
 import { getDomain, mockValues, SurfaceVis } from '@h5web/lib';
 import { assertDefined } from '@h5web/shared/guards';
 import { createArrayFromView } from '@h5web/shared/vis-utils';
-import { extend, type Node, useThree } from '@react-three/fiber';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { extend, type Object3DNode, useThree } from '@react-three/fiber';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 
 extend({ OrbitControls });
 declare module '@react-three/fiber' {
   interface ThreeElements {
-    orbitControls: Node<OrbitControls, typeof OrbitControls>;
+    orbitControls: Object3DNode<OrbitControls, typeof OrbitControls>;
   }
 }
 
@@ -18,20 +18,16 @@ const dataArray = createArrayFromView(mockValues.fourD().pick(0, 0));
 const domain = getDomain(dataArray.data);
 assertDefined(domain);
 
-const meta = {
+const meta = preview.meta({
   title: 'Experimental/SurfaceVis',
   component: SurfaceVis,
-  parameters: { layout: 'fullscreen' },
   decorators: [FillHeight],
   argTypes: {
     dataArray: { control: false },
   },
-} satisfies Meta<typeof SurfaceVis>;
+});
 
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default = {
+export const Default = meta.story({
   render: (args) => (
     <SurfaceVis {...args}>
       <Controls />
@@ -41,7 +37,7 @@ export const Default = {
     dataArray,
     domain,
   },
-} satisfies Story;
+});
 
 function Controls() {
   const camera = useThree((state) => state.camera);
diff --git a/apps/storybook/src/SvgElement.stories.tsx b/apps/storybook/src/SvgElement.stories.tsx
index d2f48ba01..a9e327233 100644
--- a/apps/storybook/src/SvgElement.stories.tsx
+++ b/apps/storybook/src/SvgElement.stories.tsx
@@ -8,23 +8,19 @@ import {
   SvgRect,
   VisCanvas,
 } from '@h5web/lib';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Vector3 } from 'three';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 import styles from './SvgElement.stories.module.css';
 
-const meta = {
+const meta = preview.meta({
   title: 'Building Blocks/SvgElement',
   component: SvgElement,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
-} satisfies Meta<typeof SvgElement>;
+});
 
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default = {
+export const Default = meta.story({
   render: (args) => (
     <VisCanvas
       abscissaConfig={{ visDomain: [0, 10], showGrid: true }}
@@ -65,4 +61,4 @@ export const Default = {
       </DataToHtml>
     </VisCanvas>
   ),
-} satisfies Story;
+});
diff --git a/apps/storybook/src/TiledHeatmapMesh/TiledHeatmapMesh.stories.tsx b/apps/storybook/src/TiledHeatmapMesh/TiledHeatmapMesh.stories.tsx
index 3110d4a14..8791893e9 100644
--- a/apps/storybook/src/TiledHeatmapMesh/TiledHeatmapMesh.stories.tsx
+++ b/apps/storybook/src/TiledHeatmapMesh/TiledHeatmapMesh.stories.tsx
@@ -43,10 +43,6 @@ const meta = {
   title: 'Experimental/TiledHeatmapMesh',
   component: TiledHeatmapMesh,
   decorators: [FillHeight],
-  parameters: {
-    layout: 'fullscreen',
-    controls: { sort: 'requiredFirst' },
-  },
   args: {
     invertColorMap: false,
     colorMap: 'Viridis',
diff --git a/apps/storybook/src/Toolbar.stories.tsx b/apps/storybook/src/Toolbar.stories.tsx
index dd3f41576..34fad83b0 100644
--- a/apps/storybook/src/Toolbar.stories.tsx
+++ b/apps/storybook/src/Toolbar.stories.tsx
@@ -14,21 +14,18 @@ import {
 import { type AxisScaleType } from '@h5web/shared/vis-models';
 import { AXIS_SCALE_TYPES } from '@h5web/shared/vis-utils';
 import { useToggle } from '@react-hookz/web';
-import { type Meta, type StoryFn, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { FiTarget } from 'react-icons/fi';
 import { MdGridOn } from 'react-icons/md';
 
-const meta = {
+import preview from '../.storybook/preview';
+
+const meta = preview.meta({
   title: 'Toolbar/Toolbar',
   component: Toolbar,
-  parameters: { layout: 'fullscreen' },
-} satisfies Meta<typeof Toolbar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+});
 
-export const Default = {
+export const Default = meta.story({
   render: (args) => {
     const [customDomain, setCustomDomain] = useState<CustomDomain>([
       null,
@@ -110,12 +107,11 @@ export const Default = {
       </>
     );
   },
-} satisfies Story;
+});
 
-export const Responsive = {
-  ...Default,
+export const Responsive = Default.extend({
   decorators: [
-    (Story: StoryFn) => (
+    (Story) => (
       <div
         style={{ maxWidth: '30rem', marginLeft: 'auto', marginRight: 'auto' }}
       >
@@ -123,10 +119,9 @@ export const Responsive = {
       </div>
     ),
   ],
-} satisfies Story;
+});
 
-export const DocumentInteractions = {
-  ...Default,
+export const WithInteractionsHelp = Default.extend({
   args: {
     interactions: [
       { shortcut: 'Wheel', description: 'Turn' },
@@ -134,11 +129,10 @@ export const DocumentInteractions = {
       { shortcut: 'Ctrl+Alt', description: 'Do a backflip' },
     ],
   },
-} satisfies Story;
+});
 
-export const OverflowChildren = {
-  ...Default,
+export const OverflowChildren = Default.extend({
   args: {
     overflowChildren: <Btn label="Some button" onClick={() => {}} />,
   },
-} satisfies Story;
+});
diff --git a/apps/storybook/src/Tooltip.stories.tsx b/apps/storybook/src/Tooltip.stories.tsx
index 8dab7948e..94ea5e5f9 100644
--- a/apps/storybook/src/Tooltip.stories.tsx
+++ b/apps/storybook/src/Tooltip.stories.tsx
@@ -5,21 +5,17 @@ import {
   VisCanvas,
 } from '@h5web/lib';
 import { useToggle } from '@react-hookz/web';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 
-const meta = {
+const meta = preview.meta({
   title: 'Building Blocks/Tooltip',
   component: Tooltip,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
-} satisfies Meta<typeof Tooltip>;
+});
 
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default = {
+export const Default = meta.story({
   render: (args) => {
     const [show, toggle] = useToggle(true);
 
@@ -45,16 +41,14 @@ export const Default = {
     top: 50,
     left: 60,
   },
-} satisfies Story;
+});
 
-export const CustomStyle = {
-  ...Default,
+export const CustomStyle = Default.extend({
   args: {
-    ...Default.args,
     style: {
       fontSize: '120%',
       padding: '0.5rem 1rem',
       backgroundColor: 'lightblue',
     },
   },
-} satisfies Story;
+});
diff --git a/apps/storybook/src/TooltipMesh.stories.tsx b/apps/storybook/src/TooltipMesh.stories.tsx
index 615b3fdce..cfca491b4 100644
--- a/apps/storybook/src/TooltipMesh.stories.tsx
+++ b/apps/storybook/src/TooltipMesh.stories.tsx
@@ -1,24 +1,20 @@
 import { DefaultInteractions, TooltipMesh, VisCanvas } from '@h5web/lib';
 import { formatTooltipVal } from '@h5web/shared/vis-utils';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 
-const meta = {
+const meta = preview.meta({
   title: 'Building Blocks/TooltipMesh',
   component: TooltipMesh,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
   argTypes: {
     guides: {
       control: { type: 'inline-radio' },
-      options: ['horizontal', 'vertical', 'both'],
+      options: ['horizontal', 'vertical', 'both', undefined],
     },
   },
-} satisfies Meta<typeof TooltipMesh>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+});
 
 interface TooltipContentProps {
   x: number;
@@ -40,7 +36,7 @@ function TooltipContent(props: TooltipContentProps) {
   );
 }
 
-export const Default = {
+export const Default = meta.story({
   render: (args) => (
     <VisCanvas
       abscissaConfig={{ visDomain: [-10, 0], showGrid: true }}
@@ -53,42 +49,38 @@ export const Default = {
   args: {
     renderTooltip: (x, y) => <TooltipContent x={x} y={y} />,
   },
-} satisfies Story;
+});
 
-export const HorizontalGuide = {
-  ...Default,
+export const HorizontalGuide = Default.extend({
   args: {
     guides: 'horizontal',
     renderTooltip: (x, y) => (
       <TooltipContent text='guides="horizontal"' x={x} y={y} />
     ),
   },
-} satisfies Story;
+});
 
-export const VerticalGuide = {
-  ...Default,
+export const VerticalGuide = Default.extend({
   args: {
     guides: 'vertical',
     renderTooltip: (x, y) => (
       <TooltipContent text='guides="vertical"' x={x} y={y} />
     ),
   },
-} satisfies Story;
+});
 
-export const BothGuides = {
-  ...Default,
+export const BothGuides = Default.extend({
   args: {
     guides: 'both',
     renderTooltip: (x, y) => (
       <TooltipContent text='guides="both"' x={x} y={y} />
     ),
   },
-} satisfies Story;
+});
 
-export const GuidesOnly = {
-  ...Default,
+export const GuidesOnly = Default.extend({
   args: {
     guides: 'both',
     renderTooltip: () => undefined,
   },
-} satisfies Story;
+});
diff --git a/apps/storybook/src/VisCanvas.stories.tsx b/apps/storybook/src/VisCanvas.stories.tsx
index a0b9e6c94..dbad68e9a 100644
--- a/apps/storybook/src/VisCanvas.stories.tsx
+++ b/apps/storybook/src/VisCanvas.stories.tsx
@@ -1,41 +1,37 @@
 import { ScaleType, VisCanvas } from '@h5web/lib';
-import { type Meta, type StoryFn, type StoryObj } from '@storybook/react-vite';
 import { format } from 'd3-format';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 
-const meta = {
+const meta = preview.meta({
   title: 'Building Blocks/VisCanvas',
   component: VisCanvas,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
-} satisfies Meta<typeof VisCanvas>;
+});
 
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const IndexDomains = {
+export const IndexDomains = meta.story({
   args: {
     abscissaConfig: { visDomain: [0, 3], showGrid: true, isIndexAxis: true },
     ordinateConfig: { visDomain: [50, 100], showGrid: true, isIndexAxis: true },
   },
-} satisfies Story;
+});
 
-export const ArbitraryDomains = {
+export const ArbitraryDomains = meta.story({
   args: {
     abscissaConfig: { visDomain: [0, 3], showGrid: true },
     ordinateConfig: { visDomain: [50, 100], showGrid: true },
   },
-} satisfies Story;
+});
 
-export const NiceDomains = {
+export const NiceDomains = meta.story({
   args: {
     abscissaConfig: { visDomain: [-1.2, 2.8], showGrid: true, nice: true },
     ordinateConfig: { visDomain: [-1.2, 2.8], showGrid: true, nice: false },
   },
-} satisfies Story;
+});
 
-export const TickFormatters = {
+export const TickFormatters = meta.story({
   args: {
     abscissaConfig: {
       visDomain: [-1.2, 2.8],
@@ -50,9 +46,9 @@ export const TickFormatters = {
       formatTick: format('.2e'),
     },
   },
-} satisfies Story;
+});
 
-export const LogScales = {
+export const LogScales = meta.story({
   args: {
     abscissaConfig: {
       visDomain: [1, 10],
@@ -65,40 +61,40 @@ export const LogScales = {
       scaleType: ScaleType.SymLog,
     },
   },
-} satisfies Story;
+});
 
-export const EqualAspectRatio = {
+export const EqualAspectRatio = meta.story({
   args: {
     abscissaConfig: { visDomain: [0, 20], showGrid: true, isIndexAxis: true },
     ordinateConfig: { visDomain: [0, 10], showGrid: true, isIndexAxis: true },
     aspect: 'equal',
   },
-} satisfies Story;
+});
 
-export const CustomAspectRatio = {
+export const CustomAspectRatio = meta.story({
   args: {
     abscissaConfig: { visDomain: [0, 20], showGrid: true, isIndexAxis: true },
     ordinateConfig: { visDomain: [0, 10], showGrid: true, isIndexAxis: true },
     aspect: 2,
   },
-} satisfies Story;
+});
 
-export const NoGrid = {
+export const NoGrid = meta.story({
   args: {
     abscissaConfig: { visDomain: [-5, 20], showGrid: false, isIndexAxis: true },
     ordinateConfig: { visDomain: [0, 2], showGrid: false },
   },
-} satisfies Story;
+});
 
-export const Title = {
+export const Title = meta.story({
   args: {
     abscissaConfig: { visDomain: [0, 3], showGrid: true, isIndexAxis: true },
     ordinateConfig: { visDomain: [50, 100], showGrid: true, isIndexAxis: true },
     title: 'This is a graph',
   },
-} satisfies Story;
+});
 
-export const AxisLabels = {
+export const AxisLabels = meta.story({
   args: {
     abscissaConfig: { visDomain: [0, 3], showGrid: true, label: 'Abscissas' },
     ordinateConfig: {
@@ -107,24 +103,24 @@ export const AxisLabels = {
       label: 'Ordinates',
     },
   },
-} satisfies Story;
+});
 
-export const FlippedAxes = {
+export const FlippedAxes = meta.story({
   args: {
     abscissaConfig: { visDomain: [0, 3], showGrid: true, flip: true },
     ordinateConfig: { visDomain: [50, 100], showGrid: true, flip: true },
   },
-} satisfies Story;
+});
 
-export const NoAxes = {
+export const NoAxes = meta.story({
   args: {
     abscissaConfig: { visDomain: [-5, 20], showGrid: true },
     ordinateConfig: { visDomain: [0, 2], showGrid: true },
     showAxes: false,
   },
-} satisfies Story;
+});
 
-export const InheritedStyles = {
+export const InheritedStyles = meta.story({
   args: {
     abscissaConfig: {
       visDomain: [0, 50],
@@ -141,7 +137,7 @@ export const InheritedStyles = {
     title: 'The title',
   },
   decorators: [
-    (VisCanvasStory: StoryFn) => (
+    (Story) => (
       <div
         style={{
           flex: '1 1 0%',
@@ -151,8 +147,8 @@ export const InheritedStyles = {
           fontSize: '1.125rem',
         }}
       >
-        <VisCanvasStory />
+        <Story />
       </div>
     ),
   ],
-} satisfies Story;
+});
diff --git a/apps/storybook/src/XAxisZoom.stories.tsx b/apps/storybook/src/XAxisZoom.stories.tsx
index 9abf48111..aa7f2e5eb 100644
--- a/apps/storybook/src/XAxisZoom.stories.tsx
+++ b/apps/storybook/src/XAxisZoom.stories.tsx
@@ -1,29 +1,21 @@
 import { Pan, ResetZoomButton, VisCanvas, XAxisZoom } from '@h5web/lib';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 
-const meta = {
+const meta = preview.meta({
   title: 'Building Blocks/Interactions/XAxisZoom',
   component: XAxisZoom,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
-  args: {
-    modifierKey: [],
-    disabled: false,
-  },
   argTypes: {
     modifierKey: {
       control: { type: 'inline-check' },
       options: ['Alt', 'Control', 'Shift'],
     },
   },
-} satisfies Meta<typeof XAxisZoom>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+});
 
-export const Default = {
+export const Default = meta.story({
   render: (args) => (
     <VisCanvas
       abscissaConfig={{ visDomain: [0, 10], showGrid: true }}
@@ -34,30 +26,27 @@ export const Default = {
       <ResetZoomButton />
     </VisCanvas>
   ),
-} satisfies Story;
+});
 
-export const ModifierKey = {
-  ...Default,
+export const ModifierKey = Default.extend({
   args: {
     modifierKey: ['Alt'],
   },
-} satisfies Story;
+});
 
-export const MultipleModifierKeys = {
-  ...Default,
+export const MultipleModifierKeys = Default.extend({
   args: {
     modifierKey: ['Control', 'Alt'],
   },
-} satisfies Story;
+});
 
-export const Disabled = {
-  ...Default,
+export const Disabled = Default.extend({
   args: {
     disabled: true,
   },
-} satisfies Story;
+});
 
-export const DisabledInsideEqualAspectCanvas = {
+export const AutoDisabledInsideEqualAspectCanvas = meta.story({
   render: (args) => (
     <VisCanvas
       abscissaConfig={{ visDomain: [0, 10], showGrid: true }}
@@ -69,4 +58,7 @@ export const DisabledInsideEqualAspectCanvas = {
       <ResetZoomButton />
     </VisCanvas>
   ),
-} satisfies Story;
+  args: {
+    disabled: true,
+  },
+});
diff --git a/apps/storybook/src/YAxisZoom.stories.tsx b/apps/storybook/src/YAxisZoom.stories.tsx
index cdf340482..e99219224 100644
--- a/apps/storybook/src/YAxisZoom.stories.tsx
+++ b/apps/storybook/src/YAxisZoom.stories.tsx
@@ -1,29 +1,21 @@
 import { Pan, ResetZoomButton, VisCanvas, YAxisZoom } from '@h5web/lib';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 
-const meta = {
+const meta = preview.meta({
   title: 'Building Blocks/Interactions/YAxisZoom',
   component: YAxisZoom,
   decorators: [FillHeight],
-  parameters: { layout: 'fullscreen' },
-  args: {
-    modifierKey: [],
-    disabled: false,
-  },
   argTypes: {
     modifierKey: {
       control: { type: 'inline-check' },
       options: ['Alt', 'Control', 'Shift'],
     },
   },
-} satisfies Meta<typeof YAxisZoom>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+});
 
-export const Default = {
+export const Default = meta.story({
   render: (args) => (
     <VisCanvas
       abscissaConfig={{ visDomain: [0, 10], showGrid: true }}
@@ -34,30 +26,27 @@ export const Default = {
       <ResetZoomButton />
     </VisCanvas>
   ),
-} satisfies Story;
+});
 
-export const ModifierKey = {
-  ...Default,
+export const ModifierKey = Default.extend({
   args: {
     modifierKey: ['Shift'],
   },
-} satisfies Story;
+});
 
-export const MultipleModifierKeys = {
-  ...Default,
+export const MultipleModifierKeys = Default.extend({
   args: {
     modifierKey: ['Control', 'Shift'],
   },
-} satisfies Story;
+});
 
-export const Disabled = {
-  ...Default,
+export const Disabled = Default.extend({
   args: {
     disabled: true,
   },
-} satisfies Story;
+});
 
-export const DisabledInsideEqualAspectCanvas = {
+export const AutoDisabledInsideEqualAspectCanvas = meta.story({
   render: (args) => (
     <VisCanvas
       abscissaConfig={{ visDomain: [0, 10], showGrid: true }}
@@ -69,4 +58,7 @@ export const DisabledInsideEqualAspectCanvas = {
       <ResetZoomButton />
     </VisCanvas>
   ),
-} satisfies Story;
+  args: {
+    disabled: false,
+  },
+});
diff --git a/apps/storybook/src/Zoom.stories.tsx b/apps/storybook/src/Zoom.stories.tsx
index a6c9d56db..850fe2be7 100644
--- a/apps/storybook/src/Zoom.stories.tsx
+++ b/apps/storybook/src/Zoom.stories.tsx
@@ -1,29 +1,21 @@
 import { Pan, ResetZoomButton, VisCanvas, Zoom } from '@h5web/lib';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 
-const meta = {
+const meta = preview.meta({
   title: 'Building Blocks/Interactions/Zoom',
   component: Zoom,
-  parameters: { layout: 'fullscreen' },
   decorators: [FillHeight],
-  args: {
-    modifierKey: [],
-    disabled: false,
-  },
   argTypes: {
     modifierKey: {
       control: { type: 'inline-check' },
       options: ['Alt', 'Control', 'Shift'],
     },
   },
-} satisfies Meta<typeof Zoom>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+});
 
-export const Default = {
+export const Default = meta.story({
   render: (args) => {
     return (
       <VisCanvas
@@ -36,25 +28,22 @@ export const Default = {
       </VisCanvas>
     );
   },
-} satisfies Story;
+});
 
-export const ModifierKey = {
-  ...Default,
+export const ModifierKey = Default.extend({
   args: {
     modifierKey: ['Control'],
   },
-} satisfies Story;
+});
 
-export const MultipleModifierKeys = {
-  ...Default,
+export const MultipleModifierKeys = Default.extend({
   args: {
     modifierKey: ['Control', 'Shift'],
   },
-} satisfies Story;
+});
 
-export const Disabled = {
-  ...Default,
+export const Disabled = Default.extend({
   args: {
     disabled: true,
   },
-} satisfies Story;
+});
diff --git a/apps/storybook/src/decorators/DomainWidgetDecorator.tsx b/apps/storybook/src/decorators/CenterTop.tsx
similarity index 66%
rename from apps/storybook/src/decorators/DomainWidgetDecorator.tsx
rename to apps/storybook/src/decorators/CenterTop.tsx
index 7b7c4fad4..4607d37be 100644
--- a/apps/storybook/src/decorators/DomainWidgetDecorator.tsx
+++ b/apps/storybook/src/decorators/CenterTop.tsx
@@ -1,13 +1,13 @@
 import { type StoryFn } from '@storybook/react-vite';
 
-function DomainWidgetDecorator(Story: StoryFn) {
+function CenterTop(Story: StoryFn) {
   return (
     <div
       style={{
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'flex-start',
-        minHeight: '16rem',
+        padding: '1.5rem',
       }}
     >
       <Story />
@@ -15,4 +15,4 @@ function DomainWidgetDecorator(Story: StoryFn) {
   );
 }
 
-export default DomainWidgetDecorator;
+export default CenterTop;
diff --git a/apps/storybook/src/useDrag.stories.tsx b/apps/storybook/src/useDrag.stories.tsx
index 80dab3a14..af6002b23 100644
--- a/apps/storybook/src/useDrag.stories.tsx
+++ b/apps/storybook/src/useDrag.stories.tsx
@@ -6,14 +6,14 @@ import {
   useDrag,
   VisCanvas,
 } from '@h5web/lib';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { Vector3 } from 'three';
 
+import preview from '../.storybook/preview';
 import FillHeight from './decorators/FillHeight';
 import styles from './useDrag.stories.module.css';
 
-const meta = {
+const meta = preview.meta({
   title: 'Experimental/useDrag',
   decorators: [
     (Story) => (
@@ -28,13 +28,9 @@ const meta = {
     ),
     FillHeight,
   ],
-  parameters: { layout: 'fullscreen' },
-} satisfies Meta;
+});
 
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default = {
+export const Default = meta.story({
   render: () => {
     const [center, setCenter] = useState(() => new Vector3(2, 6));
 
@@ -62,4 +58,4 @@ export const Default = {
       </DataToHtml>
     );
   },
-} satisfies Story;
+});