refactor: extract store package (#1109)

apps/desktop/package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@blocksuite/icons": "^2.0.14",
-    "@blocksuite/store": "0.4.0-20230216011811-2776d93",
+    "@blocksuite/store": "0.4.0-20230217095654-a561b36",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@tauri-apps/api": "^1.2.0",

apps/web/package.json

@@ -11,10 +11,11 @@
   "dependencies": {
     "@affine/component": "workspace:*",
     "@affine/datacenter": "workspace:*",
+    "@affine/store": "workspace:*",
     "@affine/i18n": "workspace:*",
     "@blocksuite/blocks": "0.4.0-20230217095654-a561b36",
     "@blocksuite/editor": "0.4.0-20230217095654-a561b36",
-    "@blocksuite/global": "0.4.0-20230216011811-2776d93",
+    "@blocksuite/global": "0.4.0-20230217095654-a561b36",
     "@blocksuite/icons": "^2.0.14",
     "@blocksuite/store": "0.4.0-20230217095654-a561b36",
     "@emotion/css": "^11.10.5",

apps/web/src/components/logout-modal/index.tsx

@@ -2,10 +2,9 @@ import { styled } from '@affine/component';
 import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 import { Button } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
+import { useGlobalState } from '@affine/store';
 import { useState } from 'react';
 
-import { useAppState } from '@/providers/app-state-provider';
-
 import { Check, UnCheck } from './icon';
 interface LoginModalProps {
   open: boolean;
@@ -14,7 +13,7 @@ interface LoginModalProps {
 
 export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
   const [localCache, setLocalCache] = useState(true);
-  const { blobDataSynced } = useAppState();
+  const blobDataSynced = useGlobalState(store => store.blobDataSynced);
   const { t } = useTranslation();
 
   return (

apps/web/src/components/page-list/DateCell.tsx

@@ -1,10 +1,9 @@
 import { TableCell } from '@affine/component';
+import type { PageMeta } from '@affine/store';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import React from 'react';
 
-import { PageMeta } from '@/providers/app-state-provider';
-
 dayjs.extend(localizedFormat);
 
 export const DateCell = ({

apps/web/src/components/page-list/OperationCell.tsx

@@ -7,6 +7,7 @@ import {
 } from '@affine/component';
 import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
+import { PageMeta } from '@affine/store';
 import {
   DeleteForeverIcon,
   FavouritedIcon,
@@ -18,7 +19,6 @@ import {
 } from '@blocksuite/icons';
 
 import { usePageHelper } from '@/hooks/use-page-helper';
-import { PageMeta } from '@/providers/app-state-provider';
 import { useConfirm } from '@/providers/ConfirmProvider';
 
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {

apps/web/src/components/page-list/index.tsx

@@ -10,6 +10,7 @@ import { IconButton } from '@affine/component';
 import { Tooltip } from '@affine/component';
 import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
+import { PageMeta } from '@affine/store';
 import {
   EdgelessIcon,
   FavouritedIcon,
@@ -21,7 +22,6 @@ import React, { useCallback } from 'react';
 
 import DateCell from '@/components/page-list/DateCell';
 import { usePageHelper } from '@/hooks/use-page-helper';
-import { PageMeta } from '@/providers/app-state-provider';
 import { useTheme } from '@/providers/ThemeProvider';
 import { useGlobalState } from '@/store/app';
 

apps/web/src/components/quick-search/PublishedResults.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from '@affine/i18n';
+import { PageMeta } from '@affine/store';
 import { EdgelessIcon, PaperIcon } from '@blocksuite/icons';
 import { Workspace } from '@blocksuite/store';
 import { Command } from 'cmdk';
@@ -6,7 +7,6 @@ import { useRouter } from 'next/router';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 import usePageHelper from '@/hooks/use-page-helper';
-import { PageMeta } from '@/providers/app-state-provider';
 import { useGlobalState } from '@/store/app';
 
 import { NoResultSVG } from './NoResultSVG';

apps/web/src/components/workspace-setting/general/leave/Leave.tsx

@@ -11,8 +11,6 @@ import {
   StyledModalWrapper,
   StyledTextContent,
 } from './style';
-// import { getDataCenter } from '@affine/datacenter';
-// import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceDeleteProps {
   open: boolean;

apps/web/src/hooks/use-change-page-meta.ts

@@ -1,6 +1,6 @@
+import { PageMeta } from '@affine/store';
 import { useCallback } from 'react';
 
-import { PageMeta } from '@/providers/app-state-provider';
 import { useGlobalState } from '@/store/app';
 
 export type ChangePageMeta = (

apps/web/src/hooks/use-current-page-meta.ts

@@ -1,6 +1,6 @@
+import { PageMeta } from '@affine/store';
 import { useCallback, useEffect, useState } from 'react';
 
-import { PageMeta } from '@/providers/app-state-provider';
 import { useGlobalState } from '@/store/app';
 
 export const useCurrentPageMeta = (): PageMeta | null => {

apps/web/src/hooks/use-page-helper.ts

@@ -1,4 +1,5 @@
 import { WorkspaceUnit } from '@affine/datacenter';
+import { PageMeta } from '@affine/store';
 import { EditorContainer } from '@blocksuite/editor';
 import { uuidv4, Workspace } from '@blocksuite/store';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
@@ -7,7 +8,6 @@ import { useRouter } from 'next/router';
 import { useCallback } from 'react';
 
 import { useChangePageMeta } from '@/hooks/use-change-page-meta';
-import { PageMeta } from '@/providers/app-state-provider';
 import { useGlobalState } from '@/store/app';
 
 export type EditorHandlers = {

apps/web/src/pages/_app.tsx

@@ -6,6 +6,7 @@ import '../utils/print-build-info';
 import '@affine/i18n';
 
 import { useTranslation } from '@affine/i18n';
+import { DataCenterPreloader } from '@affine/store';
 import { Logger } from '@toeverything/pathfinder-logger';
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
@@ -19,11 +20,9 @@ import React from 'react';
 import { PageLoading } from '@/components/loading';
 import { MessageCenterHandler } from '@/components/message-center-handler';
 import ProviderComposer from '@/components/provider-composer';
-import { AppStateProvider } from '@/providers/app-state-provider';
 import ConfirmProvider from '@/providers/ConfirmProvider';
 import { ThemeProvider } from '@/providers/ThemeProvider';
 import { GlobalAppProvider } from '@/store/app';
-import { DataCenterPreloader } from '@/store/app/datacenter';
 import { ModalProvider } from '@/store/globalModal';
 
 export type NextPageWithLayout<P = Record<string, unknown>, IP = P> = NextPage<
@@ -65,30 +64,28 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
         <title>AFFiNE</title>
       </Head>
       <Logger />
-      <GlobalAppProvider key="BlockSuiteProvider">
+      <ProviderComposer
-        <ProviderComposer
+        contexts={[
-          contexts={[
+          <GlobalAppProvider key="GlobalAppProvider" />,
-            <ThemeProvider key="ThemeProvider" />,
+          <ThemeProvider key="ThemeProvider" />,
-            <AppStateProvider key="appStateProvider" />,
+          <ModalProvider key="ModalProvider" />,
-            <ModalProvider key="ModalProvider" />,
+          <ConfirmProvider key="ConfirmProvider" />,
-            <ConfirmProvider key="ConfirmProvider" />,
+        ]}
-          ]}
+      >
-        >
+        {NoNeedAppStatePageList.includes(router.route) ? (
-          {NoNeedAppStatePageList.includes(router.route) ? (
+          getLayout(<Component {...pageProps} />)
-            getLayout(<Component {...pageProps} />)
+        ) : (
-          ) : (
+          <Suspense fallback={<PageLoading />}>
-            <Suspense fallback={<PageLoading />}>
+            <DataCenterPreloader>
-              <DataCenterPreloader>
+              <MessageCenterHandler>
-                <MessageCenterHandler>
+                <AppDefender>
-                  <AppDefender>
+                  {getLayout(<Component {...pageProps} />)}
-                    {getLayout(<Component {...pageProps} />)}
+                </AppDefender>
-                  </AppDefender>
+              </MessageCenterHandler>
-                </MessageCenterHandler>
+            </DataCenterPreloader>
-              </DataCenterPreloader>
+          </Suspense>
-            </Suspense>
+        )}
-          )}
+      </ProviderComposer>
-        </ProviderComposer>
-      </GlobalAppProvider>
     </>
   );
 };

apps/web/src/pages/public-workspace/[workspaceId]/index.tsx

@@ -1,4 +1,5 @@
 import { Breadcrumbs } from '@affine/component';
+import { PageMeta } from '@affine/store';
 import { SearchIcon } from '@blocksuite/icons';
 import { useRouter } from 'next/router';
 import { ReactElement, useEffect, useMemo } from 'react';
@@ -7,7 +8,6 @@ import { PageLoading } from '@/components/loading';
 import { PageList } from '@/components/page-list';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { useLoadPublicWorkspace } from '@/hooks/use-load-public-workspace';
-import { PageMeta } from '@/providers/app-state-provider';
 import { useModal } from '@/store/globalModal';
 
 import {

apps/web/src/providers/app-state-provider/Provider.tsx

@@ -1,51 +0,0 @@
-import type { Disposable } from '@blocksuite/global/utils';
-import type { PropsWithChildren } from 'react';
-import { createContext, useContext, useEffect, useState } from 'react';
-
-import { useGlobalState } from '@/store/app';
-
-import { AppStateContext } from './interface';
-
-type AppStateContextProps = PropsWithChildren<Record<string, unknown>>;
-
-export const AppState = createContext<AppStateContext>({} as AppStateContext);
-
-export const useAppState = () => useContext(AppState);
-export const AppStateProvider = ({
-  children,
-}: PropsWithChildren<AppStateContextProps>) => {
-  const currentDataCenterWorkspace = useGlobalState(
-    store => store.currentDataCenterWorkspace
-  );
-  const [blobState, setBlobState] = useState(false);
-
-  useEffect(() => {
-    let syncChangeDisposable: Disposable | undefined;
-    const currentWorkspace = currentDataCenterWorkspace;
-    if (!currentWorkspace) {
-      return;
-    }
-    const getBlobStorage = async () => {
-      const blobStorage = await currentWorkspace?.blocksuiteWorkspace?.blobs;
-      syncChangeDisposable = blobStorage?.signals.onBlobSyncStateChange.on(
-        () => {
-          setBlobState(blobStorage?.uploading);
-        }
-      );
-    };
-    getBlobStorage();
-    return () => {
-      syncChangeDisposable?.dispose();
-    };
-  }, [currentDataCenterWorkspace]);
-
-  return (
-    <AppState.Provider
-      value={{
-        blobDataSynced: blobState,
-      }}
-    >
-      {children}
-    </AppState.Provider>
-  );
-};

apps/web/src/providers/app-state-provider/index.ts

@@ -1,2 +0,0 @@
-export * from './interface';
-export * from './Provider';

apps/web/src/providers/app-state-provider/interface.ts

@@ -1,28 +0,0 @@
-import type { EditorContainer } from '@blocksuite/editor';
-import type {
-  Page as StorePage,
-  PageMeta as StorePageMeta,
-} from '@blocksuite/store';
-
-export interface PageMeta extends StorePageMeta {
-  favorite: boolean;
-  trash: boolean;
-  trashDate: number;
-  updatedDate: number;
-  mode: 'edgeless' | 'page';
-}
-
-export type AppStateValue = {
-  blobDataSynced: boolean;
-};
-
-/**
- * @deprecated
- */
-export type AppStateFunction = {
-  // todo: remove this in the future
-};
-
-export type AppStateContext = AppStateValue & AppStateFunction;
-
-export type CreateEditorHandler = (page: StorePage) => EditorContainer | null;

apps/web/src/providers/app-state-provider/utils.ts

@@ -1,9 +0,0 @@
-import { DataCenter } from '@affine/datacenter';
-
-const DEFAULT_WORKSPACE_NAME = 'Demo Workspace';
-
-export const createDefaultWorkspace = async (dataCenter: DataCenter) => {
-  return dataCenter.createWorkspace({
-    name: DEFAULT_WORKSPACE_NAME,
-  });
-};

apps/web/src/store/app/index.tsx

@@ -1,90 +1 @@
-import type React from 'react';
+export * from '@affine/store';
-import { createContext, useContext, useMemo } from 'react';
-import { createStore, StateCreator, useStore } from 'zustand';
-import { combine, subscribeWithSelector } from 'zustand/middleware';
-import type { UseBoundStore } from 'zustand/react';
-
-import {
-  BlockSuiteActions,
-  BlockSuiteState,
-  createBlockSuiteActions,
-  createBlockSuiteState,
-} from '@/store/app/blocksuite';
-import {
-  createDataCenterActions,
-  createDataCenterState,
-  DataCenterActions,
-  DataCenterState,
-} from '@/store/app/datacenter';
-import {
-  createUserActions,
-  createUserState,
-  UserActions,
-  UserState,
-} from '@/store/app/user';
-
-export type GlobalActionsCreator<Actions, Store = GlobalState> = StateCreator<
-  Store,
-  [['zustand/subscribeWithSelector', unknown]],
-  [],
-  Actions
->;
-
-export interface GlobalState
-  extends BlockSuiteState,
-    UserState,
-    DataCenterState {}
-
-export interface GlobalActions
-  extends BlockSuiteActions,
-    UserActions,
-    DataCenterActions {}
-
-const create = () =>
-  createStore(
-    subscribeWithSelector(
-      combine<GlobalState, GlobalActions>(
-        {
-          ...createBlockSuiteState(),
-          ...createUserState(),
-          ...createDataCenterState(),
-        },
-        /* deepscan-disable TOO_MANY_ARGS */
-        (set, get, api) => ({
-          ...createBlockSuiteActions(set, get, api),
-          ...createUserActions(set, get, api),
-          ...createDataCenterActions(set, get, api),
-        })
-        /* deepscan-enable TOO_MANY_ARGS */
-      )
-    )
-  );
-type Store = ReturnType<typeof create>;
-
-const GlobalStateContext = createContext<Store | null>(null);
-
-export const useGlobalStateApi = () => {
-  const api = useContext(GlobalStateContext);
-  if (!api) {
-    throw new Error('cannot find modal context');
-  }
-  return api;
-};
-
-export const useGlobalState: UseBoundStore<Store> = ((
-  selector: Parameters<UseBoundStore<Store>>[0],
-  equals: Parameters<UseBoundStore<Store>>[1]
-) => {
-  const api = useGlobalStateApi();
-  return useStore(api, selector, equals);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-}) as any;
-
-export const GlobalAppProvider: React.FC<React.PropsWithChildren> =
-  function ModelProvider({ children }) {
-    return (
-      <GlobalStateContext.Provider value={useMemo(() => create(), [])}>
-        {children}
-      </GlobalStateContext.Provider>
-    );
-  };

package.json

@@ -30,10 +30,12 @@
   "devDependencies": {
     "@changesets/cli": "^2.26.0",
     "@playwright/test": "^1.29.1",
+    "@testing-library/react": "^14.0.0",
     "@types/eslint": "^8.4.10",
     "@types/node": "^18.11.17",
     "@typescript-eslint/eslint-plugin": "^5.47.0",
     "@typescript-eslint/parser": "^5.47.0",
+    "@vitejs/plugin-react": "^3.1.0",
     "@vitest/coverage-istanbul": "^0.28.5",
     "concurrently": "^7.6.0",
     "cross-env": "^7.0.3",
@@ -46,11 +48,15 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "fake-indexeddb": "4.0.1",
     "got": "^12.5.3",
+    "happy-dom": "^8.4.4",
     "husky": "^8.0.2",
     "lint-staged": "^13.1.0",
     "nyc": "^15.1.0",
     "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.9.5",
+    "vite": "^4.1.2",
     "vitest": "^0.28.5"
   },
   "pnpm": {

packages/component/package.json

@@ -9,12 +9,12 @@
   },
   "dependencies": {
     "@affine/i18n": "workspace:*",
-    "@blocksuite/blocks": "0.4.0-20230216011811-2776d93",
+    "@blocksuite/blocks": "0.4.0-20230217095654-a561b36",
-    "@blocksuite/editor": "0.4.0-20230216011811-2776d93",
+    "@blocksuite/editor": "0.4.0-20230217095654-a561b36",
-    "@blocksuite/global": "0.4.0-20230216011811-2776d93",
+    "@blocksuite/global": "0.4.0-20230217095654-a561b36",
     "@blocksuite/icons": "^2.0.2",
-    "@blocksuite/react": "0.4.0-20230216011811-2776d93",
+    "@blocksuite/react": "0.4.0-20230217095654-a561b36",
-    "@blocksuite/store": "0.4.0-20230216011811-2776d93",
+    "@blocksuite/store": "0.4.0-20230217095654-a561b36",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/base": "=5.0.0-alpha.117",

packages/data-center/src/datacenter.ts

@@ -32,11 +32,14 @@ export class DataCenter {
   private _mainProvider?: BaseProvider;
   providerMap: Map<string, BaseProvider> = new Map();
 
-  constructor(debug: boolean) {
+  private constructor(debug: boolean) {
     this._logger.enabled = debug;
   }
 
-  static async init(debug: boolean): Promise<DataCenter> {
+  static async init(
+    debug: boolean,
+    exclude: 'affine'[] = []
+  ): Promise<DataCenter> {
     const dc = new DataCenter(debug);
     const getInitParams = () => {
       return {
@@ -56,7 +59,9 @@ export class DataCenter {
     } else {
       await dc.registerProvider(new LocalProvider(getInitParams()));
     }
-    await dc.registerProvider(new AffineProvider(getInitParams()));
+    if (!exclude.includes('affine')) {
+      await dc.registerProvider(new AffineProvider(getInitParams()));
+    }
 
     for (const provider of dc.providerMap.values()) {
       await provider.loadWorkspaces();

packages/data-center/src/index.ts

@@ -25,7 +25,7 @@ const _initializeDataCenter = () => {
 
 export const getDataCenter = _initializeDataCenter();
 
-export type { DataCenter };
+export { DataCenter };
 export { getLogger } from './logger';
 export * from './message';
 export { AffineProvider } from './provider/affine';

packages/data-center/src/provider/utils.ts

@@ -10,6 +10,9 @@ export const setDefaultAvatar = async (
     return;
   }
   const blob = await getDefaultHeadImgBlob(blocksuiteWorkspace.meta.name);
+  if (!blob) {
+    return;
+  }
   const blobStorage = await blocksuiteWorkspace.blobs;
   assert(blobStorage, 'No blob storage');
   const avatar = await blobStorage.set(blob);

packages/data-center/src/utils/index.ts

@@ -28,10 +28,13 @@ const DefaultHeadImgColors = [
 
 export async function getDefaultHeadImgBlob(
   workspaceName: string
-): Promise<Blob> {
+): Promise<Blob | null> {
   const canvas = document.createElement('canvas');
   canvas.height = 100;
   canvas.width = 100;
+  if (!canvas.getContext) {
+    return Promise.resolve(null);
+  }
   const ctx = canvas.getContext('2d');
   return new Promise<Blob>((resolve, reject) => {
     if (ctx) {

packages/store/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@affine/store",
+  "private": true,
+  "main": "./src/index.ts",
+  "dependencies": {
+    "@affine/datacenter": "workspace:*",
+    "@blocksuite/blocks": "0.4.0-20230217095654-a561b36",
+    "@blocksuite/editor": "0.4.0-20230217095654-a561b36",
+    "@blocksuite/global": "0.4.0-20230217095654-a561b36",
+    "@blocksuite/react": "0.4.0-20230217095654-a561b36",
+    "@blocksuite/store": "0.4.0-20230217095654-a561b36",
+    "react": "^18.2.0",
+    "zustand": "^4.3.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28"
+  }
+}

packages/store/src/app/blocksuite/index.ts

@@ -2,7 +2,7 @@ import { BlockHub } from '@blocksuite/blocks';
 import { EditorContainer } from '@blocksuite/editor';
 import { Page, Workspace } from '@blocksuite/store';
 
-import { GlobalActionsCreator } from '@/store/app';
+import { GlobalActionsCreator } from '..';
 
 export interface BlockSuiteState {
   currentWorkspace: Workspace | null;

packages/store/src/app/datacenter/index.tsx

@@ -1,21 +1,32 @@
-import type { DataCenter } from '@affine/datacenter';
 import { getDataCenter, WorkspaceUnit } from '@affine/datacenter';
-import { DisposableGroup } from '@blocksuite/global/utils';
+import { DataCenter } from '@affine/datacenter';
+import { Disposable, DisposableGroup } from '@blocksuite/global/utils';
+import type { PageMeta as StorePageMeta } from '@blocksuite/store';
 import React, { useCallback, useEffect } from 'react';
+const DEFAULT_WORKSPACE_NAME = 'Demo Workspace';
 
-import { PageMeta } from '@/providers/app-state-provider';
+export const createDefaultWorkspace = async (dataCenter: DataCenter) => {
-import { createDefaultWorkspace } from '@/providers/app-state-provider/utils';
+  return dataCenter.createWorkspace({
-import {
+    name: DEFAULT_WORKSPACE_NAME,
-  GlobalActionsCreator,
+  });
-  useGlobalState,
+};
-  useGlobalStateApi,
+
-} from '@/store/app';
+export interface PageMeta extends StorePageMeta {
+  favorite: boolean;
+  trash: boolean;
+  trashDate: number;
+  updatedDate: number;
+  mode: 'edgeless' | 'page';
+}
+
+import { GlobalActionsCreator, useGlobalState, useGlobalStateApi } from '..';
 
 export type DataCenterState = {
   readonly dataCenter: DataCenter;
   readonly dataCenterPromise: Promise<DataCenter>;
   currentDataCenterWorkspace: WorkspaceUnit | null;
   dataCenterPageList: PageMeta[];
+  blobDataSynced: boolean;
 };
 
 export type DataCenterActions = {
@@ -32,7 +43,9 @@ export const createDataCenterState = (): DataCenterState => ({
   dataCenterPromise: null!,
   currentDataCenterWorkspace: null,
   dataCenterPageList: [],
+  blobDataSynced: false,
 });
+
 export const createDataCenterActions: GlobalActionsCreator<
   DataCenterActions
 > = (set, get) => ({
@@ -57,7 +70,7 @@ export const createDataCenterActions: GlobalActionsCreator<
       isOwner = true;
     } else {
       const userInfo = get().user; // We must ensure workspace.owner exists, then ensure id same.
-      isOwner = isOwner = userInfo?.id === workspace?.owner?.id;
+      isOwner = userInfo?.id === workspace?.owner?.id;
     }
 
     const pageList =
@@ -67,11 +80,9 @@ export const createDataCenterActions: GlobalActionsCreator<
         currentWorkspace: workspace.blocksuiteWorkspace,
       });
     }
-    set({
-      isOwner,
-    });
 
     set({
+      isOwner,
       currentDataCenterWorkspace: workspace,
       dataCenterPageList: pageList,
     });
@@ -113,6 +124,45 @@ export function DataCenterPreloader({ children }: React.PropsWithChildren) {
     );
   }, [api]);
   //# endregion
+  //# region effect for blobDataSynced
+  useEffect(
+    () =>
+      api.subscribe(
+        store => store.currentDataCenterWorkspace,
+        workspace => {
+          if (!workspace?.blocksuiteWorkspace) {
+            return;
+          }
+          const controller = new AbortController();
+          const blocksuiteWorkspace = workspace.blocksuiteWorkspace;
+          let syncChangeDisposable: Disposable | undefined;
+          async function subscribe() {
+            const blobStorage = await blocksuiteWorkspace.blobs;
+            if (controller.signal.aborted) {
+              return;
+            }
+            syncChangeDisposable =
+              blobStorage?.signals.onBlobSyncStateChange.on(() => {
+                if (controller.signal.aborted) {
+                  syncChangeDisposable?.dispose();
+                  return;
+                } else {
+                  api.setState({
+                    blobDataSynced: blobStorage?.uploading,
+                  });
+                }
+              });
+          }
+          subscribe();
+          return () => {
+            controller.abort();
+            syncChangeDisposable?.dispose();
+          };
+        }
+      ),
+    [api]
+  );
+  //# endregion
 
   if (!dataCenter && !dataCenterPromise) {
     const promise = getDataCenter();

packages/store/src/app/index.tsx

@@ -0,0 +1,90 @@
+import type React from 'react';
+import { createContext, useContext, useMemo } from 'react';
+import { createStore, StateCreator, useStore } from 'zustand';
+import { combine, subscribeWithSelector } from 'zustand/middleware';
+import type { UseBoundStore } from 'zustand/react';
+
+import {
+  BlockSuiteActions,
+  BlockSuiteState,
+  createBlockSuiteActions,
+  createBlockSuiteState,
+} from './blocksuite';
+import {
+  createDataCenterActions,
+  createDataCenterState,
+  DataCenterActions,
+  DataCenterState,
+} from './datacenter';
+import {
+  createUserActions,
+  createUserState,
+  UserActions,
+  UserState,
+} from './user';
+
+export type GlobalActionsCreator<Actions, Store = GlobalState> = StateCreator<
+  Store,
+  [['zustand/subscribeWithSelector', unknown]],
+  [],
+  Actions
+>;
+
+export interface GlobalState
+  extends BlockSuiteState,
+    UserState,
+    DataCenterState {}
+
+export interface GlobalActions
+  extends BlockSuiteActions,
+    UserActions,
+    DataCenterActions {}
+
+const create = () =>
+  createStore(
+    subscribeWithSelector(
+      combine<GlobalState, GlobalActions>(
+        {
+          ...createBlockSuiteState(),
+          ...createUserState(),
+          ...createDataCenterState(),
+        },
+        /* deepscan-disable TOO_MANY_ARGS */
+        (set, get, api) => ({
+          ...createBlockSuiteActions(set, get, api),
+          ...createUserActions(set, get, api),
+          ...createDataCenterActions(set, get, api),
+        })
+        /* deepscan-enable TOO_MANY_ARGS */
+      )
+    )
+  );
+type Store = ReturnType<typeof create>;
+
+const GlobalStateContext = createContext<Store | null>(null);
+
+export const useGlobalStateApi = () => {
+  const api = useContext(GlobalStateContext);
+  if (!api) {
+    throw new Error('cannot find modal context');
+  }
+  return api;
+};
+
+export const useGlobalState: UseBoundStore<Store> = ((
+  selector: Parameters<UseBoundStore<Store>>[0],
+  equals: Parameters<UseBoundStore<Store>>[1]
+) => {
+  const api = useGlobalStateApi();
+  return useStore(api, selector, equals);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}) as any;
+
+export const GlobalAppProvider: React.FC<React.PropsWithChildren> =
+  function ModelProvider({ children }) {
+    return (
+      <GlobalStateContext.Provider value={useMemo(() => create(), [])}>
+        {children}
+      </GlobalStateContext.Provider>
+    );
+  };

packages/store/src/app/user/index.ts

@@ -1,6 +1,6 @@
 import { User } from '@affine/datacenter';
 
-import { GlobalActionsCreator } from '@/store/app';
+import { GlobalActionsCreator } from '..';
 
 export interface UserState {
   user: User | null;
@@ -39,7 +39,7 @@ export const createUserActions: GlobalActionsCreator<UserActions> = (
           // isOwner is useful only in the cloud
           isOwner = true;
         } else {
-          isOwner = user?.id === workspace?.owner?.id;
+          isOwner = user.id === workspace?.owner?.id;
         }
 
         set({ user, isOwner });

packages/store/src/index.ts

@@ -0,0 +1,3 @@
+export * from './app';
+export type { PageMeta } from './app/datacenter';
+export { createDefaultWorkspace, DataCenterPreloader } from './app/datacenter';

packages/store/tests/app.spec.tsx

@@ -0,0 +1,53 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import 'fake-indexeddb/auto';
+
+import { DataCenter, getDataCenter } from '@affine/datacenter';
+import {
+  createDefaultWorkspace,
+  DataCenterPreloader,
+  GlobalAppProvider,
+  useGlobalState,
+  useGlobalStateApi,
+} from '@affine/store';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, test } from 'vitest';
+
+describe('App Store', () => {
+  test('init', async () => {
+    const dataCenterPromise = getDataCenter();
+    const dataCenter = await dataCenterPromise;
+    await createDefaultWorkspace(dataCenter);
+    const Inner = () => {
+      const state = useGlobalState();
+      expect(state).toBeTypeOf('object');
+      expect(state.dataCenter).toBeInstanceOf(DataCenter);
+      expect(state.dataCenterPromise).toBeInstanceOf(Promise);
+      state.dataCenterPromise.then(dc => expect(dc).toBe(state.dataCenter));
+      return <div>Test2</div>;
+    };
+
+    const Loader = ({ children }: React.PropsWithChildren) => {
+      const api = useGlobalStateApi();
+      if (!api.getState().dataCenter) {
+        api.setState({
+          dataCenter,
+          dataCenterPromise,
+        });
+      }
+      return <>{children}</>;
+    };
+    const App = () => (
+      <GlobalAppProvider>
+        <div>Test1</div>
+        <Loader>
+          <Inner />
+        </Loader>
+      </GlobalAppProvider>
+    );
+    const app = render(<App />);
+    app.getByText('Test2');
+  });
+});

pnpm-lock.yaml

@@ -14,10 +14,12 @@ importers:
     specifiers:
       '@changesets/cli': ^2.26.0
       '@playwright/test': ^1.29.1
+      '@testing-library/react': ^14.0.0
       '@types/eslint': ^8.4.10
       '@types/node': ^18.11.17
       '@typescript-eslint/eslint-plugin': ^5.47.0
       '@typescript-eslint/parser': ^5.47.0
+      '@vitejs/plugin-react': ^3.1.0
       '@vitest/coverage-istanbul': ^0.28.5
       concurrently: ^7.6.0
       cross-env: ^7.0.3
@@ -30,20 +32,26 @@ importers:
       eslint-plugin-unused-imports: ^2.0.0
       fake-indexeddb: 4.0.1
       got: ^12.5.3
+      happy-dom: ^8.4.4
       husky: ^8.0.2
       lint-staged: ^13.1.0
       nyc: ^15.1.0
       prettier: ^2.7.1
+      react: ^18.2.0
+      react-dom: ^18.2.0
       typescript: ^4.9.5
+      vite: ^4.1.2
       vitest: ^0.28.5
     devDependencies:
       '@changesets/cli': 2.26.0
       '@playwright/test': 1.29.1
+      '@testing-library/react': 14.0.0_biqbaboplfbrettd7655fr4n2y
       '@types/eslint': 8.4.10
       '@types/node': 18.11.18
       '@typescript-eslint/eslint-plugin': 5.48.0_ddfje6clmktndfpbpk5swat3gi
       '@typescript-eslint/parser': 5.48.0_7kw3g6rralp5ps6mg3uyzz6azm
-      '@vitest/coverage-istanbul': 0.28.5
+      '@vitejs/plugin-react': 3.1.0_vite@4.1.2
+      '@vitest/coverage-istanbul': 0.28.5_happy-dom@8.4.4
       concurrently: 7.6.0
       cross-env: 7.0.3
       eslint: 8.34.0
@@ -55,17 +63,21 @@ importers:
       eslint-plugin-unused-imports: 2.0.0_3p5c3yu7rnlwfc7nnagwrjhciu
       fake-indexeddb: 4.0.1
       got: 12.5.3
+      happy-dom: 8.4.4
       husky: 8.0.2
       lint-staged: 13.1.0
       nyc: 15.1.0
       prettier: 2.7.1
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
       typescript: 4.9.5
-      vitest: 0.28.5
+      vite: 4.1.2_@types+node@18.11.18
+      vitest: 0.28.5_happy-dom@8.4.4
 
   apps/desktop:
     specifiers:
       '@blocksuite/icons': ^2.0.14
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36
       '@emotion/react': ^11.10.5
       '@emotion/styled': ^11.10.5
       '@tauri-apps/api': ^1.2.0
@@ -94,7 +106,7 @@ importers:
       zx: ^7.1.1
     dependencies:
       '@blocksuite/icons': 2.0.14_3stiutgnnbnfnf3uowm5cip22i
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93_yjs@13.5.45
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36_yjs@13.5.45
       '@emotion/react': 11.10.5_3stiutgnnbnfnf3uowm5cip22i
       '@emotion/styled': 11.10.5_jrh5enlbqfbnumycmktdqgd6se
       '@tauri-apps/api': 1.2.0_nb4isgkwd3sres4g7j7rgtldsu
@@ -128,9 +140,10 @@ importers:
       '@affine/component': workspace:*
       '@affine/datacenter': workspace:*
       '@affine/i18n': workspace:*
+      '@affine/store': workspace:*
       '@blocksuite/blocks': 0.4.0-20230217095654-a561b36
       '@blocksuite/editor': 0.4.0-20230217095654-a561b36
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
       '@blocksuite/icons': ^2.0.14
       '@blocksuite/store': 0.4.0-20230217095654-a561b36
       '@emotion/css': ^11.10.5
@@ -168,9 +181,10 @@ importers:
       '@affine/component': link:../../packages/component
       '@affine/datacenter': link:../../packages/data-center
       '@affine/i18n': link:../../packages/i18n
+      '@affine/store': link:../../packages/store
       '@blocksuite/blocks': 0.4.0-20230217095654-a561b36_fgkxp4oo2deujekqkhva3c3mgq
       '@blocksuite/editor': 0.4.0-20230217095654-a561b36_s2lgz6fjlafla2itashgrkrf5u
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36_lit@2.6.1
       '@blocksuite/icons': 2.0.14_w5j4k42lgipnm43s3brx6h3c34
       '@blocksuite/store': 0.4.0-20230217095654-a561b36_lit@2.6.1+yjs@13.5.45
       '@emotion/css': 11.10.5
@@ -209,12 +223,12 @@ importers:
   packages/component:
     specifiers:
       '@affine/i18n': workspace:*
-      '@blocksuite/blocks': 0.4.0-20230216011811-2776d93
+      '@blocksuite/blocks': 0.4.0-20230217095654-a561b36
-      '@blocksuite/editor': 0.4.0-20230216011811-2776d93
+      '@blocksuite/editor': 0.4.0-20230217095654-a561b36
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
       '@blocksuite/icons': ^2.0.2
-      '@blocksuite/react': 0.4.0-20230216011811-2776d93
+      '@blocksuite/react': 0.4.0-20230217095654-a561b36
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36
       '@emotion/react': ^11.10.5
       '@emotion/styled': ^11.10.5
       '@mui/base': '=5.0.0-alpha.117'
@@ -240,12 +254,12 @@ importers:
       webpack: ^5.75.0
     dependencies:
       '@affine/i18n': link:../i18n
-      '@blocksuite/blocks': 0.4.0-20230216011811-2776d93_agtz32e5txbljk4aobo36wfrpe
+      '@blocksuite/blocks': 0.4.0-20230217095654-a561b36_dtmhin5qsbpe5id5qeimghpavm
-      '@blocksuite/editor': 0.4.0-20230216011811-2776d93_6yfgczikbxxddpvfspgrnx2z2q
+      '@blocksuite/editor': 0.4.0-20230217095654-a561b36_s2lgz6fjlafla2itashgrkrf5u
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36_lit@2.6.1
       '@blocksuite/icons': 2.0.4_3stiutgnnbnfnf3uowm5cip22i
-      '@blocksuite/react': 0.4.0-20230216011811-2776d93_lq2prkv6yrdmxppjpam6ud3g7y
+      '@blocksuite/react': 0.4.0-20230217095654-a561b36_wqt5vgiwk2wcrkromazh2p2frm
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36_lit@2.6.1
       '@emotion/react': 11.10.5_3stiutgnnbnfnf3uowm5cip22i
       '@emotion/styled': 11.10.5_jrh5enlbqfbnumycmktdqgd6se
       '@mui/base': 5.0.0-alpha.117_5ndqzdd6t4rivxsukjv3i3ak2q
@@ -344,6 +358,29 @@ importers:
       '@types/react': 18.0.21
       typescript: 4.9.5
 
+  packages/store:
+    specifiers:
+      '@affine/datacenter': workspace:*
+      '@blocksuite/blocks': 0.4.0-20230217095654-a561b36
+      '@blocksuite/editor': 0.4.0-20230217095654-a561b36
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
+      '@blocksuite/react': 0.4.0-20230217095654-a561b36
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36
+      '@types/react': ^18.0.28
+      react: ^18.2.0
+      zustand: ^4.3.3
+    dependencies:
+      '@affine/datacenter': link:../data-center
+      '@blocksuite/blocks': 0.4.0-20230217095654-a561b36_dtmhin5qsbpe5id5qeimghpavm
+      '@blocksuite/editor': 0.4.0-20230217095654-a561b36_s2lgz6fjlafla2itashgrkrf5u
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
+      '@blocksuite/react': 0.4.0-20230217095654-a561b36_egd6bp35mqm7gvicj7jxwytmcu
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36
+      react: 18.2.0
+      zustand: 4.3.3_react@18.2.0
+    devDependencies:
+      '@types/react': 18.0.28
+
 packages:
 
   /@ampproject/remapping/2.2.0:
@@ -2579,15 +2616,15 @@ packages:
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
     dev: true
 
-  /@blocksuite/blocks/0.4.0-20230216011811-2776d93_agtz32e5txbljk4aobo36wfrpe:
+  /@blocksuite/blocks/0.4.0-20230217095654-a561b36_dtmhin5qsbpe5id5qeimghpavm:
-    resolution: {integrity: sha512-OCbf+nbxZyjWcXfRqBMVKUpFUXSj5HY2BpWMNN68IsbAI09zFiNPH0KuMi72uHyFN+/NucoZGwZH21EgXB+s7g==}
+    resolution: {integrity: sha512-ulCIGxbPCRr061Va69KlcVHROU3PdOaVXZoz/R8CIaBZmtWOdV3yiYxcQTQdPW1Ll8muxEOouueZuiZx/lExYg==}
     peerDependencies:
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36
     dependencies:
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36_lit@2.6.1
-      '@blocksuite/phasor': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/phasor': 0.4.0-20230217095654-a561b36_lit@2.6.1
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36_lit@2.6.1
-      '@blocksuite/virgo': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/virgo': 0.4.0-20230217095654-a561b36_lit@2.6.1
       '@popperjs/core': 2.11.6
       autosize: 6.0.1
       highlight.js: 11.7.0
@@ -2621,20 +2658,6 @@ packages:
       - yjs
     dev: false
 
-  /@blocksuite/editor/0.4.0-20230216011811-2776d93_6yfgczikbxxddpvfspgrnx2z2q:
-    resolution: {integrity: sha512-BCwMPRG8NQg7gZZfiFgr+TSC7C0qZRYVqIaqRJHaB08ZK9E5pC+y6ya0T9NFmIFGHHq79GdAe5IzNdzckdh0Ow==}
-    peerDependencies:
-      '@blocksuite/blocks': 0.4.0-20230216011811-2776d93
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93
-    dependencies:
-      '@blocksuite/blocks': 0.4.0-20230216011811-2776d93_agtz32e5txbljk4aobo36wfrpe
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93_lit@2.6.1
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93_lit@2.6.1
-      lit: 2.6.1
-      marked: 4.2.12
-      turndown: 7.1.1
-    dev: false
-
   /@blocksuite/editor/0.4.0-20230217095654-a561b36_s2lgz6fjlafla2itashgrkrf5u:
     resolution: {integrity: sha512-7GfjI2R1fawvaNSAyPVIeZf6pIsMjVp/+bRaIGRzHSTX7IE7G2oyAs4n9y+2DWQrFe2NOhiSrRbmFQaPoHbDGA==}
     peerDependencies:
@@ -2649,8 +2672,8 @@ packages:
       turndown: 7.1.1
     dev: false
 
-  /@blocksuite/global/0.4.0-20230216011811-2776d93:
+  /@blocksuite/global/0.4.0-20230217095654-a561b36:
-    resolution: {integrity: sha512-CzgnyjLmctmDY5MHJXeeSDLHD2x0Ux/kotQJdbl7COdPeURxspCksSVZPHXzItMM53QHF5rjqjQWmzWVownN2A==}
+    resolution: {integrity: sha512-aIZhQ5P5WvosfDTyk5/6pb9kmdkgBZfDOiue4FgZKX40BN1J1TKyiaQeQ0upFmTdCZmLHA2Cwuy58qXdjIW4VA==}
     peerDependencies:
       lit: ^2.6
     peerDependenciesMeta:
@@ -2661,19 +2684,6 @@ packages:
       zod: 3.20.6
     dev: false
 
-  /@blocksuite/global/0.4.0-20230216011811-2776d93_lit@2.6.1:
-    resolution: {integrity: sha512-CzgnyjLmctmDY5MHJXeeSDLHD2x0Ux/kotQJdbl7COdPeURxspCksSVZPHXzItMM53QHF5rjqjQWmzWVownN2A==}
-    peerDependencies:
-      lit: ^2.6
-    peerDependenciesMeta:
-      lit:
-        optional: true
-    dependencies:
-      ansi-colors: 4.1.3
-      lit: 2.6.1
-      zod: 3.20.6
-    dev: false
-
   /@blocksuite/global/0.4.0-20230217095654-a561b36_lit@2.6.1:
     resolution: {integrity: sha512-aIZhQ5P5WvosfDTyk5/6pb9kmdkgBZfDOiue4FgZKX40BN1J1TKyiaQeQ0upFmTdCZmLHA2Cwuy58qXdjIW4VA==}
     peerDependencies:
@@ -2717,12 +2727,12 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@blocksuite/phasor/0.4.0-20230216011811-2776d93_lit@2.6.1:
+  /@blocksuite/phasor/0.4.0-20230217095654-a561b36_lit@2.6.1:
-    resolution: {integrity: sha512-fY5XLFIOKZlCMLb093ZHRAjhnkEaJK9vJsh8Asib/hGc0PaDqu65FIM3zXR6YAAKsgKEIu8SVK1B7n+gH82Ugg==}
+    resolution: {integrity: sha512-MmLaWNfPERPXpHbiNRI2bfwR/wyZAfJZ/aKeRMCPf8ZKUz6xKYhW0fjboi1b+MaBJHEProTwCj0wLR97yPfqrQ==}
     peerDependencies:
       yjs: ^13
     dependencies:
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36_lit@2.6.1
       fractional-indexing: 3.2.0
       nanoid: 4.0.1
       perfect-freehand: 1.2.0
@@ -2744,19 +2754,39 @@ packages:
       - lit
     dev: false
 
-  /@blocksuite/react/0.4.0-20230216011811-2776d93_lq2prkv6yrdmxppjpam6ud3g7y:
+  /@blocksuite/react/0.4.0-20230217095654-a561b36_egd6bp35mqm7gvicj7jxwytmcu:
-    resolution: {integrity: sha512-XjgJ+XiHwUmaxXgyJrEIb4f7T2j6bvVM++/2RiegRw0UAqinm/pNV1YmbCue7x/Q6bksjGGeQLEgLs39fPc55w==}
+    resolution: {integrity: sha512-YNaHFHB45p6HrZIpWL2CYwRYsD/MYbRnioOVwyt0yrkoE3IXLBuLACB76qtMlN3m83oto3cskBg+cUcDNqpRIg==}
     peerDependencies:
-      '@blocksuite/blocks': 0.4.0-20230216011811-2776d93
+      '@blocksuite/blocks': 0.4.0-20230217095654-a561b36
-      '@blocksuite/editor': 0.4.0-20230216011811-2776d93
+      '@blocksuite/editor': 0.4.0-20230217095654-a561b36
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36
       react: '>=18.0.0'
       react-dom: '>=18.0.0'
     dependencies:
-      '@blocksuite/blocks': 0.4.0-20230216011811-2776d93_agtz32e5txbljk4aobo36wfrpe
+      '@blocksuite/blocks': 0.4.0-20230217095654-a561b36_dtmhin5qsbpe5id5qeimghpavm
-      '@blocksuite/editor': 0.4.0-20230216011811-2776d93_6yfgczikbxxddpvfspgrnx2z2q
+      '@blocksuite/editor': 0.4.0-20230217095654-a561b36_s2lgz6fjlafla2itashgrkrf5u
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36
+      react: 18.2.0
+      zustand: 4.3.3_react@18.2.0
+    transitivePeerDependencies:
+      - immer
+      - lit
+    dev: false
+
+  /@blocksuite/react/0.4.0-20230217095654-a561b36_wqt5vgiwk2wcrkromazh2p2frm:
+    resolution: {integrity: sha512-YNaHFHB45p6HrZIpWL2CYwRYsD/MYbRnioOVwyt0yrkoE3IXLBuLACB76qtMlN3m83oto3cskBg+cUcDNqpRIg==}
+    peerDependencies:
+      '@blocksuite/blocks': 0.4.0-20230217095654-a561b36
+      '@blocksuite/editor': 0.4.0-20230217095654-a561b36
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@blocksuite/blocks': 0.4.0-20230217095654-a561b36_dtmhin5qsbpe5id5qeimghpavm
+      '@blocksuite/editor': 0.4.0-20230217095654-a561b36_s2lgz6fjlafla2itashgrkrf5u
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36_lit@2.6.1
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36_lit@2.6.1
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       zustand: 4.3.3_react@18.2.0
@@ -2765,13 +2795,13 @@ packages:
       - lit
     dev: false
 
-  /@blocksuite/store/0.4.0-20230216011811-2776d93_lit@2.6.1:
+  /@blocksuite/store/0.4.0-20230217095654-a561b36:
-    resolution: {integrity: sha512-UO5ipKxqfeW4MceW+nU5DkSpqXlm3sostGWx5GOl8AxWxqIjUIgOasTegqTZaR2hEUbYeqCzpuQWEERH+Fp5xQ==}
+    resolution: {integrity: sha512-6WaiEQwXWKuOf8DaKFu0g5AIKd0YuQpoHdblg0BWnG1kbgM5zCeySFOgrFxtXX1o8NhCNGjqenlZlkBaOn8UcA==}
     peerDependencies:
       yjs: ^13
     dependencies:
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
-      '@blocksuite/virgo': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/virgo': 0.4.0-20230217095654-a561b36
       '@types/flexsearch': 0.7.3
       buffer: 6.0.3
       flexsearch: 0.7.21
@@ -2790,13 +2820,13 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@blocksuite/store/0.4.0-20230216011811-2776d93_yjs@13.5.45:
+  /@blocksuite/store/0.4.0-20230217095654-a561b36_lit@2.6.1:
-    resolution: {integrity: sha512-UO5ipKxqfeW4MceW+nU5DkSpqXlm3sostGWx5GOl8AxWxqIjUIgOasTegqTZaR2hEUbYeqCzpuQWEERH+Fp5xQ==}
+    resolution: {integrity: sha512-6WaiEQwXWKuOf8DaKFu0g5AIKd0YuQpoHdblg0BWnG1kbgM5zCeySFOgrFxtXX1o8NhCNGjqenlZlkBaOn8UcA==}
     peerDependencies:
       yjs: ^13
     dependencies:
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36_lit@2.6.1
-      '@blocksuite/virgo': 0.4.0-20230216011811-2776d93_yjs@13.5.45
+      '@blocksuite/virgo': 0.4.0-20230217095654-a561b36_lit@2.6.1
       '@types/flexsearch': 0.7.3
       buffer: 6.0.3
       flexsearch: 0.7.21
@@ -2807,7 +2837,6 @@ packages:
       nanoid: 4.0.1
       y-protocols: 1.0.5
       y-webrtc: 10.2.4
-      yjs: 13.5.45
       zod: 3.20.6
     transitivePeerDependencies:
       - bufferutil
@@ -2842,25 +2871,50 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@blocksuite/virgo/0.4.0-20230216011811-2776d93_lit@2.6.1:
+  /@blocksuite/store/0.4.0-20230217095654-a561b36_yjs@13.5.45:
-    resolution: {integrity: sha512-R0jIeVa0LDw/ZGFY7X354l9F+RUyGOA8vq3RKttNIYK9pueBOdNv3yqavj/FQu5mGMX9v4HYm9AoZLr6dvWQ6Q==}
+    resolution: {integrity: sha512-6WaiEQwXWKuOf8DaKFu0g5AIKd0YuQpoHdblg0BWnG1kbgM5zCeySFOgrFxtXX1o8NhCNGjqenlZlkBaOn8UcA==}
+    peerDependencies:
+      yjs: ^13
+    dependencies:
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
+      '@blocksuite/virgo': 0.4.0-20230217095654-a561b36_yjs@13.5.45
+      '@types/flexsearch': 0.7.3
+      buffer: 6.0.3
+      flexsearch: 0.7.21
+      idb-keyval: 6.2.0
+      ky: 0.33.2
+      lib0: 0.2.62
+      merge: 2.1.1
+      nanoid: 4.0.1
+      y-protocols: 1.0.5
+      y-webrtc: 10.2.4
+      yjs: 13.5.45
+      zod: 3.20.6
+    transitivePeerDependencies:
+      - bufferutil
+      - lit
+      - supports-color
+      - utf-8-validate
+    dev: false
+
+  /@blocksuite/virgo/0.4.0-20230217095654-a561b36:
+    resolution: {integrity: sha512-duJN3+nr+QwhTsnyU+CA/b5uDptbLmp/WdM5NjtGScsYz9/a1l4pnOph1fOF04+A9squLMAMl06nnf85G7izmA==}
     peerDependencies:
       lit: ^2
       yjs: ^13
     dependencies:
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
-      lit: 2.6.1
       zod: 3.20.6
     dev: false
 
-  /@blocksuite/virgo/0.4.0-20230216011811-2776d93_yjs@13.5.45:
+  /@blocksuite/virgo/0.4.0-20230217095654-a561b36_lit@2.6.1:
-    resolution: {integrity: sha512-R0jIeVa0LDw/ZGFY7X354l9F+RUyGOA8vq3RKttNIYK9pueBOdNv3yqavj/FQu5mGMX9v4HYm9AoZLr6dvWQ6Q==}
+    resolution: {integrity: sha512-duJN3+nr+QwhTsnyU+CA/b5uDptbLmp/WdM5NjtGScsYz9/a1l4pnOph1fOF04+A9squLMAMl06nnf85G7izmA==}
     peerDependencies:
       lit: ^2
       yjs: ^13
     dependencies:
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36_lit@2.6.1
-      yjs: 13.5.45
+      lit: 2.6.1
       zod: 3.20.6
     dev: false
 
@@ -2876,6 +2930,17 @@ packages:
       zod: 3.20.6
     dev: false
 
+  /@blocksuite/virgo/0.4.0-20230217095654-a561b36_yjs@13.5.45:
+    resolution: {integrity: sha512-duJN3+nr+QwhTsnyU+CA/b5uDptbLmp/WdM5NjtGScsYz9/a1l4pnOph1fOF04+A9squLMAMl06nnf85G7izmA==}
+    peerDependencies:
+      lit: ^2
+      yjs: ^13
+    dependencies:
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
+      yjs: 13.5.45
+      zod: 3.20.6
+    dev: false
+
   /@changesets/apply-release-plan/6.1.3:
     resolution: {integrity: sha512-ECDNeoc3nfeAe1jqJb5aFQX7CqzQhD2klXRez2JDb/aVpGUbX673HgKrnrgJRuQR/9f2TtLoYIzrGB9qwD77mg==}
     dependencies:
@@ -6278,6 +6343,34 @@ packages:
       '@tauri-apps/cli-win32-x64-msvc': 1.2.3
     dev: true
 
+  /@testing-library/dom/9.0.0:
+    resolution: {integrity: sha512-+/TLgKNFsYUshOY/zXsQOk+PlFQK+eyJ9T13IDVNJEi+M+Un7xlJK+FZKkbGSnf0+7E1G6PlDhkSYQ/GFiruBQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/runtime': 7.20.7
+      '@types/aria-query': 5.0.1
+      aria-query: 5.1.3
+      chalk: 4.1.2
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.4.4
+      pretty-format: 27.5.1
+    dev: true
+
+  /@testing-library/react/14.0.0_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.20.7
+      '@testing-library/dom': 9.0.0
+      '@types/react-dom': 18.0.10
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: true
+
   /@tokenizer/token/0.3.0:
     resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
     dev: true
@@ -6298,6 +6391,10 @@ packages:
     resolution: {integrity: sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==}
     dev: true
 
+  /@types/aria-query/5.0.1:
+    resolution: {integrity: sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==}
+    dev: true
+
   /@types/babel__core/7.20.0:
     resolution: {integrity: sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==}
     dependencies:
@@ -6580,7 +6677,7 @@ packages:
   /@types/react-dom/18.0.10:
     resolution: {integrity: sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==}
     dependencies:
-      '@types/react': 18.0.27
+      '@types/react': 18.0.28
     dev: true
 
   /@types/react-dom/18.0.6:
@@ -6623,6 +6720,14 @@ packages:
       '@types/scheduler': 0.16.2
       csstype: 3.1.1
 
+  /@types/react/18.0.28:
+    resolution: {integrity: sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.2
+      csstype: 3.1.1
+    dev: true
+
   /@types/responselike/1.0.0:
     resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
     dependencies:
@@ -6836,7 +6941,23 @@ packages:
       - supports-color
     dev: true
 
-  /@vitest/coverage-istanbul/0.28.5:
+  /@vitejs/plugin-react/3.1.0_vite@4.1.2:
+    resolution: {integrity: sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.1.0-beta.0
+    dependencies:
+      '@babel/core': 7.20.12
+      '@babel/plugin-transform-react-jsx-self': 7.18.6_@babel+core@7.20.12
+      '@babel/plugin-transform-react-jsx-source': 7.19.6_@babel+core@7.20.12
+      magic-string: 0.27.0
+      react-refresh: 0.14.0
+      vite: 4.1.2_@types+node@18.11.18
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@vitest/coverage-istanbul/0.28.5_happy-dom@8.4.4:
     resolution: {integrity: sha512-na1pkr3AVrdFflzuBXsBh1MvBfhSMrv4nfd4N8rm0HEJlvlbQc+GiqNwtwzfO8TPsXxcjNphSIMp5wvCy+0xrQ==}
     dependencies:
       istanbul-lib-coverage: 3.2.0
@@ -6845,7 +6966,7 @@ packages:
       istanbul-lib-source-maps: 4.0.1
       istanbul-reports: 3.1.5
       test-exclude: 6.0.0
-      vitest: 0.28.5
+      vitest: 0.28.5_happy-dom@8.4.4
     transitivePeerDependencies:
       - '@edge-runtime/vm'
       - '@vitest/browser'
@@ -7254,6 +7375,12 @@ packages:
       '@babel/runtime-corejs3': 7.19.1
     dev: true
 
+  /aria-query/5.1.3:
+    resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}
+    dependencies:
+      deep-equal: 2.2.0
+    dev: true
+
   /array-flatten/1.1.1:
     resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
     dev: true
@@ -8218,6 +8345,10 @@ packages:
       lodash: 4.17.21
     dev: false
 
+  /css.escape/1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+    dev: true
+
   /csstype/3.1.1:
     resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
 
@@ -8338,6 +8469,28 @@ packages:
       regexp.prototype.flags: 1.4.3
     dev: false
 
+  /deep-equal/2.2.0:
+    resolution: {integrity: sha512-RdpzE0Hv4lhowpIUKKMJfeH6C1pXdtT1/it80ubgWqwI3qpuxUBpC1S4hnHg+zjnuOoDkzUtUCEEkG+XG5l3Mw==}
+    dependencies:
+      call-bind: 1.0.2
+      es-get-iterator: 1.1.3
+      get-intrinsic: 1.1.3
+      is-arguments: 1.1.1
+      is-array-buffer: 3.0.1
+      is-date-object: 1.0.5
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.2
+      isarray: 2.0.5
+      object-is: 1.1.5
+      object-keys: 1.1.1
+      object.assign: 4.1.4
+      regexp.prototype.flags: 1.4.3
+      side-channel: 1.0.4
+      which-boxed-primitive: 1.0.2
+      which-collection: 1.0.1
+      which-typed-array: 1.1.9
+    dev: true
+
   /deep-is/0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
@@ -8479,6 +8632,10 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /dom-accessibility-api/0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+    dev: true
+
   /dom-helpers/5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
     dependencies:
@@ -8634,6 +8791,20 @@ packages:
       which-typed-array: 1.1.9
     dev: true
 
+  /es-get-iterator/1.1.3:
+    resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.1.3
+      has-symbols: 1.0.3
+      is-arguments: 1.1.1
+      is-map: 2.0.2
+      is-set: 2.0.2
+      is-string: 1.0.7
+      isarray: 2.0.5
+      stop-iteration-iterator: 1.0.0
+    dev: true
+
   /es-module-lexer/0.9.3:
     resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
     dev: true
@@ -10077,6 +10248,19 @@ packages:
       uglify-js: 3.17.4
     dev: true
 
+  /happy-dom/8.4.4:
+    resolution: {integrity: sha512-v0RbFlIIApDN8D7HOlCJWKE4BiRZgidM6I0v/1//ctDLkJcgvitgTw/AZ3S2BPN5Z9cMaVLnOIuvakJhf8dojw==}
+    dependencies:
+      css.escape: 1.5.1
+      he: 1.2.0
+      node-fetch: 2.6.7
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   /hard-rejection/2.1.0:
     resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
     engines: {node: '>=6'}
@@ -10133,6 +10317,11 @@ packages:
       type-fest: 0.8.1
     dev: true
 
+  /he/1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+    dev: true
+
   /highlight.js/11.7.0:
     resolution: {integrity: sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==}
     engines: {node: '>=12.0.0'}
@@ -10271,7 +10460,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       safer-buffer: 2.1.2
-    dev: false
 
   /idb-keyval/6.2.0:
     resolution: {integrity: sha512-uw+MIyQn2jl3+hroD7hF8J7PUviBU7BPKWw4f/ISf32D4LoGu98yHjrzWWJDASu9QNrX10tCJqk9YY0ClWm8Ng==}
@@ -10450,6 +10638,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /is-map/2.0.2:
+    resolution: {integrity: sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==}
+    dev: true
+
   /is-nan/1.3.2:
     resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
     engines: {node: '>= 0.4'}
@@ -10513,6 +10705,10 @@ packages:
       call-bind: 1.0.2
       has-tostringtag: 1.0.0
 
+  /is-set/2.0.2:
+    resolution: {integrity: sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==}
+    dev: true
+
   /is-shared-array-buffer/1.0.2:
     resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==}
     dependencies:
@@ -10575,12 +10771,23 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /is-weakmap/2.0.1:
+    resolution: {integrity: sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==}
+    dev: true
+
   /is-weakref/1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
     dependencies:
       call-bind: 1.0.2
     dev: true
 
+  /is-weakset/2.0.2:
+    resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==}
+    dependencies:
+      call-bind: 1.0.2
+      get-intrinsic: 1.1.3
+    dev: true
+
   /is-windows/1.0.2:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
     engines: {node: '>=0.10.0'}
@@ -10600,6 +10807,10 @@ packages:
   /isarray/1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
+  /isarray/2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+    dev: true
+
   /isexe/2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
@@ -11174,6 +11385,7 @@ packages:
 
   /loose-envify/1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
     dependencies:
       js-tokens: 4.0.0
 
@@ -11225,6 +11437,11 @@ packages:
       es5-ext: 0.10.62
     dev: false
 
+  /lz-string/1.4.4:
+    resolution: {integrity: sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==}
+    hasBin: true
+    dev: true
+
   /magic-string/0.27.0:
     resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
     engines: {node: '>=12'}
@@ -13476,6 +13693,13 @@ packages:
     resolution: {integrity: sha512-uUZI65yrV2Qva5gqE0+A7uVAvO40iPo6jGhs7s8keRfHCmtg+uB2X6EiLGCI9IgL1J17xGhvoOqSz79lzICPTA==}
     dev: true
 
+  /stop-iteration-iterator/1.0.0:
+    resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      internal-slot: 1.0.4
+    dev: true
+
   /store2/2.14.2:
     resolution: {integrity: sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==}
     dev: true
@@ -14381,7 +14605,7 @@ packages:
       picocolors: 1.0.0
       source-map: 0.6.1
       source-map-support: 0.5.21
-      vite: 4.1.1_@types+node@18.11.18
+      vite: 4.1.2_@types+node@18.11.18
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -14459,7 +14683,41 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitest/0.28.5:
+  /vite/4.1.2_@types+node@18.11.18:
+    resolution: {integrity: sha512-MWDb9Rfy3DI8omDQySbMK93nQqStwbsQWejXRY2EBzEWKmLAXWb1mkI9Yw2IJrc+oCvPCI1Os5xSSIBYY6DEAw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 18.11.18
+      esbuild: 0.16.17
+      postcss: 8.4.21
+      resolve: 1.22.1
+      rollup: 3.14.0
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
+  /vitest/0.28.5_happy-dom@8.4.4:
     resolution: {integrity: sha512-pyCQ+wcAOX7mKMcBNkzDwEHRGqQvHUl0XnoHR+3Pb1hytAHISgSxv9h0gUiSiYtISXUU3rMrKiKzFYDrI6ZIHA==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
@@ -14493,6 +14751,7 @@ packages:
       cac: 6.7.14
       chai: 4.3.7
       debug: 4.3.4
+      happy-dom: 8.4.4
       local-pkg: 0.4.3
       pathe: 1.1.0
       picocolors: 1.0.0
@@ -14502,7 +14761,7 @@ packages:
       tinybench: 2.3.1
       tinypool: 0.3.1
       tinyspy: 1.1.1
-      vite: 4.1.1_@types+node@18.11.18
+      vite: 4.1.2_@types+node@18.11.18
       vite-node: 0.28.5_@types+node@18.11.18
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
@@ -14555,6 +14814,11 @@ packages:
     engines: {node: '>=10.4'}
     dev: true
 
+  /webidl-conversions/7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+    dev: true
+
   /webpack-sources/3.2.3:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
@@ -14618,6 +14882,18 @@ packages:
     engines: {node: '>=0.8.0'}
     dev: false
 
+  /whatwg-encoding/2.0.0:
+    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
+    engines: {node: '>=12'}
+    dependencies:
+      iconv-lite: 0.6.3
+    dev: true
+
+  /whatwg-mimetype/3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+    dev: true
+
   /whatwg-url/5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
     dependencies:
@@ -14643,6 +14919,15 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
+  /which-collection/1.0.1:
+    resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
+    dependencies:
+      is-map: 2.0.2
+      is-set: 2.0.2
+      is-weakmap: 2.0.1
+      is-weakset: 2.0.2
+    dev: true
+
   /which-module/2.0.0:
     resolution: {integrity: sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==}
     dev: true

tsconfig.json

@@ -21,6 +21,7 @@
       "@affine/datacenter": ["./packages/datacenter/src"],
       "@affine/i18n": ["./packages/i18n/src"],
       "@affine/logger": ["./packages/logger/src"],
+      "@affine/store": ["packages/store/src"],
       "@toeverything/pathfinder-logger": ["./packages/logger"]
     }
   },

vitest.config.ts

@@ -1,8 +1,13 @@
+import path from 'node:path';
+
+import react from '@vitejs/plugin-react';
+import { fileURLToPath } from 'url';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
+  plugins: [react()],
   test: {
-    include: ['packages/**/*.spec.ts'],
+    include: ['packages/**/*.spec.ts', 'packages/**/*.spec.tsx'],
     testTimeout: 5000,
     coverage: {
       provider: 'istanbul', // or 'c8'
@@ -10,4 +15,11 @@ export default defineConfig({
       reportsDirectory: '.coverage/store',
     },
   },
+  resolve: {
+    alias: {
+      '@affine/store': path.resolve(
+        fileURLToPath(new URL('packages/store', import.meta.url))
+      ),
+    },
+  },
 });