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

package/src/components/SheetToolbar/style.ts

@@ -2,16 +2,25 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useEffect } from 'react';
+import { type Registry, RegistryContext } from '@effect-atom/atom-react';
+import { useContext, useEffect } from 'react';
 
 import { type CompleteCellRange, inRange } from '@dxos/compute';
-import { type ToolbarMenuActionGroupProperties, createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
+import { Obj } from '@dxos/echo';
+import {
+  type ActionGraphProps,
+  type ToolbarMenuActionGroupProperties,
+  createMenuAction,
+  createMenuItemGroup,
+} from '@dxos/react-ui-menu';
 
 import { meta } from '../../meta';
 import { type SheetModel } from '../../model';
 import { type StyleKey, type StyleValue, rangeFromIndex, rangeToIndex } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
+import { type ToolbarState, type ToolbarStateAtom } from './useToolbarState';
+
 export type StyleState = Partial<Record<StyleValue, boolean>>;
 
 export type StyleAction = { key: StyleKey; value: StyleValue };
@@ -21,22 +30,30 @@ const styles: Record<StyleValue, string> = {
   softwrap: 'ph--paragraph--regular',
 };
 
-export const useStyleState = (state: StyleState) => {
+export const useStyleState = (stateAtom: ToolbarStateAtom) => {
+  const registry = useContext(RegistryContext);
   const { cursorFallbackRange, model } = useSheetContext();
 
   useEffect(() => {
-    state.highlight = false;
-    state.softwrap = false;
+    let highlight = false;
+    let softwrap = false;
     if (cursorFallbackRange && model.sheet.ranges) {
       model.sheet.ranges
         .filter(
           ({ range, key }) => key === 'style' && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from),
         )
         .forEach(({ value }) => {
-          state[value as StyleValue] = true;
+          if (value === 'highlight') {
+            highlight = true;
+          }
+          if (value === 'softwrap') {
+            softwrap = true;
+          }
         });
     }
-  }, [cursorFallbackRange, model.sheet]);
+    const prev = registry.get(stateAtom);
+    registry.set(stateAtom, { ...prev, highlight, softwrap });
+  }, [cursorFallbackRange, model.sheet, registry, stateAtom]);
 };
 
 const createStyleGroup = (state: StyleState) => {
@@ -49,7 +66,15 @@ const createStyleGroup = (state: StyleState) => {
   } as ToolbarMenuActionGroupProperties);
 };
 
-const createStyleActions = (model: SheetModel, state: StyleState, cursorFallbackRange?: CompleteCellRange) =>
+type StyleActionsContext = {
+  model: SheetModel;
+  state: ToolbarState;
+  stateAtom: ToolbarStateAtom;
+  registry: Registry.Registry;
+  cursorFallbackRange?: CompleteCellRange;
+};
+
+const createStyleActions = ({ model, state, stateAtom, registry, cursorFallbackRange }: StyleActionsContext) =>
   Object.entries(styles).map(([styleValue, icon]) => {
     return createMenuAction<StyleAction>(
       `style--${styleValue}`,
@@ -67,6 +92,7 @@ const createStyleActions = (model: SheetModel, state: StyleState, cursorFallback
           key: 'style',
           value: styleValue as StyleValue,
         };
+        const currentState = registry.get(stateAtom);
         if (
           model.sheet.ranges
             .filter(
@@ -77,12 +103,16 @@ const createStyleActions = (model: SheetModel, state: StyleState, cursorFallback
         ) {
           // this value should be unset
           if (index >= 0) {
-            model.sheet.ranges?.splice(index, 1);
+            Obj.change(model.sheet, (obj) => {
+              obj.ranges?.splice(index, 1);
+            });
           }
-          state[nextRangeEntity.value] = false;
+          registry.set(stateAtom, { ...currentState, [nextRangeEntity.value]: false });
         } else {
-          model.sheet.ranges?.push(nextRangeEntity);
-          state[nextRangeEntity.value] = true;
+          Obj.change(model.sheet, (obj) => {
+            obj.ranges?.push(nextRangeEntity);
+          });
+          registry.set(stateAtom, { ...currentState, [nextRangeEntity.value]: true });
         }
       },
       {
@@ -95,9 +125,9 @@ const createStyleActions = (model: SheetModel, state: StyleState, cursorFallback
     );
   });
 
-export const createStyle = (model: SheetModel, state: StyleState, cursorFallbackRange?: CompleteCellRange) => {
-  const styleGroupAction = createStyleGroup(state);
-  const styleActions = createStyleActions(model, state, cursorFallbackRange);
+export const createStyle = (context: StyleActionsContext): ActionGraphProps => {
+  const styleGroupAction = createStyleGroup(context.state);
+  const styleActions = createStyleActions(context);
   return {
     nodes: [styleGroupAction, ...styleActions],
     edges: [

package/src/components/SheetToolbar/useToolbarState.ts

@@ -2,15 +2,32 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useMemo } from 'react';
-
-import { live } from '@dxos/live-object';
+import { Atom, type Registry, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { useContext, useMemo } from 'react';
 
 import { type AlignState } from './align';
 import { type StyleState } from './style';
 
 export type ToolbarState = Partial<StyleState & AlignState>;
+export type ToolbarStateAtom = Atom.Writable<ToolbarState>;
+
+/**
+ * Creates a reactive toolbar state Atom.
+ */
+export const useToolbarState = (initialState: ToolbarState = {}): ToolbarStateAtom => {
+  return useMemo(() => Atom.make<ToolbarState>(initialState).pipe(Atom.keepAlive), []);
+};
+
+/**
+ * Hook to read the current toolbar state value.
+ */
+export const useToolbarStateValue = (stateAtom: ToolbarStateAtom): ToolbarState => {
+  return useAtomValue(stateAtom);
+};
 
-export const useToolbarState = (initialState: ToolbarState = {}) => {
-  return useMemo(() => live<ToolbarState>(initialState), []);
+/**
+ * Hook to get the registry for updating toolbar state.
+ */
+export const useToolbarStateRegistry = (): Registry.Registry => {
+  return useContext(RegistryContext);
 };

package/src/extensions/compute.stories.tsx

@@ -5,21 +5,21 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useMemo } from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { PublicKey } from '@dxos/keys';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
+import { useTextEditor } from '@dxos/react-ui-editor';
 import {
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
   documentId,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
+} from '@dxos/ui-editor';
 import { isNonNullable } from '@dxos/util';
 
 import { GridSheet, SheetProvider, useComputeGraph } from '../components';
@@ -73,7 +73,12 @@ const Grid = () => {
   const model = useSheetModel(graph, sheet);
   useEffect(() => {
     if (model) {
-      model.setValues({ A1: { value: 100 }, A2: { value: 200 }, A3: { value: 300 }, A5: { value: '=SUM(A1:A3)' } });
+      model.setValues({
+        A1: { value: 100 },
+        A2: { value: 200 },
+        A3: { value: 300 },
+        A5: { value: '=SUM(A1:A3)' },
+      });
     }
   }, [model]);
 
@@ -102,10 +107,14 @@ const GraphStory = (props: EditorProps) => {
 const meta = {
   title: 'plugins/plugin-sheet/extensions',
   decorators: [
-    withTheme,
-    withClientProvider({ types: [Sheet.Sheet], createIdentity: true, createSpace: true }),
+    withTheme(),
+    withClientProvider({
+      types: [Sheet.Sheet],
+      createIdentity: true,
+      createSpace: true,
+    }),
     // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
-    withPluginManager({ plugins: [IntentPlugin()] }),
+    withPluginManager({ plugins: [OperationPlugin(), RuntimePlugin()] }),
     withComputeGraphDecorator(),
   ],
   parameters: {

package/src/extensions/compute.ts

@@ -23,7 +23,7 @@ import {
   createSheetName,
 } from '@dxos/compute';
 import { invariant } from '@dxos/invariant';
-import { documentId, singleValueFacet } from '@dxos/react-ui-editor';
+import { documentId, singleValueFacet } from '@dxos/ui-editor';
 
 const LANGUAGE_TAG = 'dx';
 

package/src/extensions/editor/sheet-extension.ts

@@ -20,8 +20,8 @@ import { spreadsheet } from 'codemirror-lang-spreadsheet';
 
 import { type FunctionDefinition } from '@dxos/compute';
 import { RANGE_NOTATION } from '@dxos/compute';
-import { singleValueFacet } from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+import { singleValueFacet } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 
 /**
  * https://codemirror.net/examples/styling
@@ -75,7 +75,10 @@ export type SheetExtensionOptions = {
  * https://hyperformula.handsontable.com/guide/key-concepts.html#grammar
  */
 export const sheetExtension = ({ debug, functions = [] }: SheetExtensionOptions): Extension => {
-  const { extension, language } = spreadsheet({ idiom: 'en-US', decimalSeparator: '.' });
+  const { extension, language } = spreadsheet({
+    idiom: 'en-US',
+    decimalSeparator: '.',
+  });
 
   const createCompletion = (name: string) => {
     const { section = 'Custom', description, syntax } = functions.find((value) => value.name === name) ?? {};
@@ -166,7 +169,7 @@ export const sheetExtension = ({ debug, functions = [] }: SheetExtensionOptions)
       icons: false,
       tooltipClass: () =>
         mx(
-          '!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]',
+          '!-left-[1px] !top-[33px] !-m-0 border !border-bs-0 [&>ul]:!min-w-[198px]',
           '[&>ul>li[aria-selected]]:!bg-accentSurface',
           'border-separator',
         ),

package/src/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export { SheetCapabilities } from './capabilities';
+export { SheetCapabilities } from './types';
 export * from './meta';
 export * from './SheetPlugin';

package/src/integrations/thread-ranges.ts

@@ -2,18 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import * as Function from 'effect/Function';
-import * as Schema from 'effect/Schema';
+import * as Effect from 'effect/Effect';
 import { useCallback, useEffect, useMemo } from 'react';
 
-import { LayoutAction, chain, createIntent, createResolver } from '@dxos/app-framework';
-import { useIntentDispatcher, useIntentResolver } from '@dxos/app-framework/react';
+import { useOperationInvoker, useOperationResolver } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { debounce } from '@dxos/async';
 import { type CellAddress, type CompleteCellRange, inRange } from '@dxos/compute';
 import { Obj, Relation } from '@dxos/echo';
-import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
-import { ThreadAction } from '@dxos/plugin-thread/types';
-import { Filter, Query, getSpace, useQuery } from '@dxos/react-client/echo';
+import { OperationResolver } from '@dxos/operation';
+import { ATTENDABLE_PATH_SEPARATOR, DeckOperation } from '@dxos/plugin-deck/types';
+import { ThreadOperation } from '@dxos/plugin-thread/types';
+import { Filter, Query, useQuery } from '@dxos/react-client/echo';
 import { type DxGridElement, type GridContentProps } from '@dxos/react-ui-grid';
 import { AnchoredTo, Thread } from '@dxos/types';
 
@@ -39,43 +39,37 @@ export const parseThreadAnchorAsCellRange = (cursor: string): CompleteCellRange
 
 export const useUpdateFocusedCellOnThreadSelection = (grid: DxGridElement | null) => {
   const { model, setActiveRefs } = useSheetContext();
-  const scrollIntoViewResolver = useMemo(
+  const sheetId = Obj.getDXN(model.sheet).toString();
+
+  const scrollIntoViewHandler = useMemo(
     () =>
-      createResolver({
-        intent: LayoutAction.ScrollIntoView,
+      OperationResolver.make({
+        operation: LayoutOperation.ScrollIntoView,
         position: 'hoist',
-        filter: (
-          data,
-        ): data is {
-          part: 'current';
-          subject: string;
-          options: { cursor: string; ref: GridContentProps['activeRefs'] };
-        } => {
-          if (!Schema.is(LayoutAction.ScrollIntoView.fields.input)(data)) {
-            return false;
-          }
-
-          return data.subject === Obj.getDXN(model.sheet).toString() && !!data.options?.cursor;
-        },
-        resolve: ({ options: { cursor, ref } }) => {
-          setActiveRefs(ref);
-          // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
-          const range = parseThreadAnchorAsCellRange(cursor!);
-          range && grid?.setFocus({ ...range.to, plane: 'grid' }, true);
-        },
+        filter: (input) => input.subject === sheetId && !!input.cursor,
+        handler: (input) =>
+          Effect.sync(() => {
+            const { cursor, ref } = input;
+            if (cursor) {
+              setActiveRefs(ref as GridContentProps['activeRefs']);
+              // TODO(Zan): Everywhere we refer to the cursor in a thread context should change to `anchor`.
+              const range = parseThreadAnchorAsCellRange(cursor);
+              range && grid?.setFocus({ ...range.to, plane: 'grid' }, true);
+            }
+          }),
       }),
-    [model.sheet, setActiveRefs],
+    [sheetId, setActiveRefs, grid],
   );
 
-  useIntentResolver(meta.id, scrollIntoViewResolver);
+  useOperationResolver(meta.id, scrollIntoViewHandler);
 };
 
 export const useSelectThreadOnCellFocus = () => {
   const { model, cursor } = useSheetContext();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
 
-  const space = getSpace(model.sheet);
-  const anchors = useQuery(space, Query.select(Filter.id(model.sheet.id)).targetOf(AnchoredTo.AnchoredTo));
+  const db = Obj.getDatabase(model.sheet);
+  const anchors = useQuery(db, Query.select(Filter.id(model.sheet.id)).targetOf(AnchoredTo.AnchoredTo));
 
   const selectClosestThread = useCallback(
     (cellAddress: CellAddress) => {
@@ -95,14 +89,16 @@ export const useSelectThreadOnCellFocus = () => {
 
       if (closestThread) {
         const primary = Obj.getDXN(model.sheet).toString();
-        const intent = Function.pipe(
-          createIntent(ThreadAction.Select, { current: Obj.getDXN(closestThread).toString() }),
-          chain(DeckAction.ChangeCompanion, { primary, companion: `${primary}${ATTENDABLE_PATH_SEPARATOR}comments` }),
-        );
-        void dispatch(intent);
+        void (async () => {
+          await invokePromise(ThreadOperation.Select, { current: Relation.getDXN(closestThread).toString() });
+          await invokePromise(DeckOperation.ChangeCompanion, {
+            primary,
+            companion: `${primary}${ATTENDABLE_PATH_SEPARATOR}comments`,
+          });
+        })();
       }
     },
-    [dispatch, anchors],
+    [invokePromise, anchors],
   );
 
   const debounced = useMemo(() => {

package/src/meta.ts

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   id: 'dxos.org/plugin/sheet',
   name: 'Sheet',
   description: trim`

package/src/model/sheet-model.ts

@@ -122,7 +122,9 @@ export class SheetModel extends Resource {
    */
   protected override async _open(): Promise<void> {
     log('initialize', { id: this.id });
-    initialize(this._sheet);
+    Obj.change(this._sheet, (obj) => {
+      initialize(obj);
+    });
 
     this._graph.update.on((event) => {
       if (event.type === 'functionsUpdated') {
@@ -181,13 +183,19 @@ export class SheetModel extends Resource {
   }
 
   insertRows(i: number, n = 1): string[] {
-    const idx = insertIndices(this._sheet.rows, i, n, MAX_ROWS);
+    let idx: string[] = [];
+    Obj.change(this._sheet, (obj) => {
+      idx = insertIndices(obj.rows, i, n, MAX_ROWS);
+    });
     this.reset();
     return idx;
   }
 
   insertColumns(i: number, n = 1): string[] {
-    const idx = insertIndices(this._sheet.columns, i, n, MAX_COLS);
+    let idx: string[] = [];
+    Obj.change(this._sheet, (obj) => {
+      idx = insertIndices(obj.columns, i, n, MAX_COLS);
+    });
     this.reset();
     return idx;
   }
@@ -200,8 +208,10 @@ export class SheetModel extends Resource {
     const values = this.getCellValues(range).flat();
     const index = this._sheet.rows.indexOf(rowIndex);
     this.clear(range);
-    this._sheet.rows.splice(index, 1);
-    delete this._sheet.rowMeta[rowIndex];
+    Obj.change(this._sheet, (obj) => {
+      obj.rows.splice(index, 1);
+      delete obj.rowMeta[rowIndex];
+    });
     this.reset();
     return { axis: 'row', index, axisIndex: rowIndex, axisMeta: this._sheet.rowMeta[rowIndex], values };
   }
@@ -214,35 +224,43 @@ export class SheetModel extends Resource {
     const values = this.getCellValues(range).flat();
     const index = this._sheet.columns.indexOf(colIndex);
     this.clear(range);
-    this._sheet.columns.splice(index, 1);
-    delete this._sheet.columnMeta[colIndex];
+    Obj.change(this._sheet, (obj) => {
+      obj.columns.splice(index, 1);
+      delete obj.columnMeta[colIndex];
+    });
     this.reset();
     return { axis: 'col', index, axisIndex: colIndex, axisMeta: this._sheet.rowMeta[colIndex], values };
   }
 
   restoreRow({ index, axisIndex, axisMeta, values }: SheetAction.RestoreAxis): void {
-    this._sheet.rows.splice(index, 0, axisIndex);
-    values.forEach((value, col) => {
-      if (value) {
-        this._sheet.cells[`${this._sheet.columns[col]}@${axisIndex}`] = { value };
+    Obj.change(this._sheet, (obj) => {
+      obj.rows.splice(index, 0, axisIndex);
+      values.forEach((value, col) => {
+        if (value) {
+          obj.cells[`${obj.columns[col]}@${axisIndex}`] = { value };
+        }
+      });
+
+      if (axisMeta) {
+        obj.rowMeta[axisIndex] = axisMeta;
       }
     });
-    if (axisMeta) {
-      this._sheet.rowMeta[axisIndex] = axisMeta;
-    }
     this.reset();
   }
 
   restoreColumn({ index, axisIndex, axisMeta, values }: SheetAction.RestoreAxis): void {
-    this._sheet.columns.splice(index, 0, axisIndex);
-    values.forEach((value, row) => {
-      if (value) {
-        this._sheet.cells[`${axisIndex}@${this._sheet.rows[row]}`] = { value };
+    Obj.change(this._sheet, (obj) => {
+      obj.columns.splice(index, 0, axisIndex);
+      values.forEach((value, row) => {
+        if (value) {
+          obj.cells[`${axisIndex}@${obj.rows[row]}`] = { value };
+        }
+      });
+
+      if (axisMeta) {
+        obj.columnMeta[axisIndex] = axisMeta;
       }
     });
-    if (axisMeta) {
-      this._sheet.columnMeta[axisIndex] = axisMeta;
-    }
     this.reset();
   }
 
@@ -259,18 +277,22 @@ export class SheetModel extends Resource {
     const topLeft = getTopLeft(range);
     const values = this._iterRange(range, () => null);
     this._node.graph.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
-    this._iterRange(range, (cell) => {
-      const idx = addressToIndex(this._sheet, cell);
-      delete this._sheet.cells[idx];
+    Obj.change(this._sheet, (obj) => {
+      this._iterRange(range, (cell) => {
+        const idx = addressToIndex(this._sheet, cell);
+        delete obj.cells[idx];
+      });
     });
   }
 
   cut(range: CellRange): void {
     invariant(this._node);
     this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
-    this._iterRange(range, (cell) => {
-      const idx = addressToIndex(this._sheet, cell);
-      delete this._sheet.cells[idx];
+    Obj.change(this._sheet, (obj) => {
+      this._iterRange(range, (cell) => {
+        const idx = addressToIndex(this._sheet, cell);
+        delete obj.cells[idx];
+      });
     });
   }
 
@@ -283,13 +305,15 @@ export class SheetModel extends Resource {
     invariant(this._node);
     if (!this._node.graph.hf.isClipboardEmpty()) {
       const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
-      for (const change of changes) {
-        if (change instanceof ExportedCellChange) {
-          const { address, newValue } = change;
-          const idx = addressToIndex(this._sheet, { row: address.row, col: address.col });
-          this._sheet.cells[idx] = { value: newValue };
+      Obj.change(this._sheet, (obj) => {
+        for (const change of changes) {
+          if (change instanceof ExportedCellChange) {
+            const { address, newValue } = change;
+            const idx = addressToIndex(this._sheet, { row: address.row, col: address.col });
+            obj.cells[idx] = { value: newValue };
+          }
         }
-      }
+      });
     }
   }
 
@@ -380,11 +404,15 @@ export class SheetModel extends Resource {
     // Reallocate if > current bounds.
     let refresh = false;
     if (cell.row >= this._sheet.rows.length) {
-      insertIndices(this._sheet.rows, cell.row, 1, MAX_ROWS);
+      Obj.change(this._sheet, (obj) => {
+        insertIndices(obj.rows, cell.row, 1, MAX_ROWS);
+      });
       refresh = true;
     }
     if (cell.col >= this._sheet.columns.length) {
-      insertIndices(this._sheet.columns, cell.col, 1, MAX_COLS);
+      Obj.change(this._sheet, (obj) => {
+        insertIndices(obj.columns, cell.col, 1, MAX_COLS);
+      });
       refresh = true;
     }
 
@@ -401,13 +429,17 @@ export class SheetModel extends Resource {
     // Insert into sheet.
     const idx = addressToIndex(this._sheet, cell);
     if (value === undefined || value === null) {
-      delete this._sheet.cells[idx];
+      Obj.change(this._sheet, (obj) => {
+        delete obj.cells[idx];
+      });
     } else {
       if (isFormula(value)) {
         value = this._graph.mapFunctionBindingToId(mapFormulaRefsToIndices(this._sheet, value));
       }
 
-      this._sheet.cells[idx] = { value };
+      Obj.change(this._sheet, (obj) => {
+        obj.cells[idx] = { value };
+      });
     }
   }
 

package/src/playwright/playwright.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   ...e2ePreset(import.meta.dirname),
   // TODO(wittjosiah): Avoid hard-coding ports.
   webServer: {
-    command: 'moon run storybook:serve-e2e -- --port=9005',
+    command: 'moon run storybook-react:serve-e2e -- --port=9005',
     port: 9005,
     reuseExistingServer: false,
   },

package/src/playwright/sheet.spec.ts

@@ -16,6 +16,7 @@ test.describe('plugin-sheet', () => {
   test.beforeEach(async ({ browser }) => {
     const setup = await setupPage(browser, {
       url: storybookUrl('plugins-plugin-sheet-sheetcontainer--spec', 9005),
+      viewportSize: { width: 1280, height: 720 },
     });
     page = setup.page;
     sheet = new SheetManager(page);