refactor: extract store package (#1109)

2024-12-22 10:21:37 +03:00 · 2023-02-18 02:41:22 -06:00 · 2023-02-18 02:41:22 -06:00 · 9d21c3efbb
commit 9d21c3efbb
parent af28418e61
34 changed files with 681 additions and 337 deletions
--- a/apps/desktop/package.json
+++ b/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",
--- a/apps/web/package.json
+++ b/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",
--- a/apps/web/src/components/logout-modal/index.tsx
+++ b/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 (
--- a/apps/web/src/components/page-list/DateCell.tsx
+++ b/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 = ({
--- a/apps/web/src/components/page-list/OperationCell.tsx
+++ b/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 }) => {
--- a/apps/web/src/components/page-list/index.tsx
+++ b/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';

--- a/apps/web/src/components/quick-search/PublishedResults.tsx
+++ b/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';
--- a/apps/web/src/components/workspace-setting/general/leave/Leave.tsx
+++ b/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;
--- a/apps/web/src/hooks/use-change-page-meta.ts
+++ b/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 = (
--- a/apps/web/src/hooks/use-current-page-meta.ts
+++ b/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 => {
--- a/apps/web/src/hooks/use-page-helper.ts
+++ b/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 = {
--- a/apps/web/src/pages/_app.tsx
+++ b/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
-          contexts={[
-            <ThemeProvider key="ThemeProvider" />,
-            <AppStateProvider key="appStateProvider" />,
-            <ModalProvider key="ModalProvider" />,
-            <ConfirmProvider key="ConfirmProvider" />,
-          ]}
-        >
-          {NoNeedAppStatePageList.includes(router.route) ? (
-            getLayout(<Component {...pageProps} />)
-          ) : (
-            <Suspense fallback={<PageLoading />}>
-              <DataCenterPreloader>
-                <MessageCenterHandler>
-                  <AppDefender>
-                    {getLayout(<Component {...pageProps} />)}
-                  </AppDefender>
-                </MessageCenterHandler>
-              </DataCenterPreloader>
-            </Suspense>
-          )}
-        </ProviderComposer>
-      </GlobalAppProvider>
+      <ProviderComposer
+        contexts={[
+          <GlobalAppProvider key="GlobalAppProvider" />,
+          <ThemeProvider key="ThemeProvider" />,
+          <ModalProvider key="ModalProvider" />,
+          <ConfirmProvider key="ConfirmProvider" />,
+        ]}
+      >
+        {NoNeedAppStatePageList.includes(router.route) ? (
+          getLayout(<Component {...pageProps} />)
+        ) : (
+          <Suspense fallback={<PageLoading />}>
+            <DataCenterPreloader>
+              <MessageCenterHandler>
+                <AppDefender>
+                  {getLayout(<Component {...pageProps} />)}
+                </AppDefender>
+              </MessageCenterHandler>
+            </DataCenterPreloader>
+          </Suspense>
+        )}
+      </ProviderComposer>
    </>
  );
 };
--- a/apps/web/src/pages/public-workspace/[workspaceId]/index.tsx
+++ b/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 {
--- a/apps/web/src/providers/app-state-provider/Provider.tsx
+++ b/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>
-  );
-};
--- a/apps/web/src/providers/app-state-provider/index.ts
+++ b/apps/web/src/providers/app-state-provider/index.ts
@ -1,2 +0,0 @@
-export * from './interface';
-export * from './Provider';
--- a/apps/web/src/providers/app-state-provider/interface.ts
+++ b/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;
--- a/apps/web/src/providers/app-state-provider/utils.ts
+++ b/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,
-  });
-};
--- a/apps/web/src/store/app/index.tsx
+++ b/apps/web/src/store/app/index.tsx
@ -1,90 +1 @@
-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 '@/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>
-    );
-  };
+export * from '@affine/store';
--- a/package.json
+++ b/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": {
--- a/packages/component/package.json
+++ b/packages/component/package.json
@ -9,12 +9,12 @@
  },
  "dependencies": {
    "@affine/i18n": "workspace:*",
-    "@blocksuite/blocks": "0.4.0-20230216011811-2776d93",
-    "@blocksuite/editor": "0.4.0-20230216011811-2776d93",
-    "@blocksuite/global": "0.4.0-20230216011811-2776d93",
+    "@blocksuite/blocks": "0.4.0-20230217095654-a561b36",
+    "@blocksuite/editor": "0.4.0-20230217095654-a561b36",
+    "@blocksuite/global": "0.4.0-20230217095654-a561b36",
    "@blocksuite/icons": "^2.0.2",
-    "@blocksuite/react": "0.4.0-20230216011811-2776d93",
-    "@blocksuite/store": "0.4.0-20230216011811-2776d93",
+    "@blocksuite/react": "0.4.0-20230217095654-a561b36",
+    "@blocksuite/store": "0.4.0-20230217095654-a561b36",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/base": "=5.0.0-alpha.117",
--- a/packages/data-center/src/datacenter.ts
+++ b/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();
--- a/packages/data-center/src/index.ts
+++ b/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';
--- a/packages/data-center/src/provider/utils.ts
+++ b/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);
--- a/packages/data-center/src/utils/index.ts
+++ b/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) {
--- a/packages/store/package.json
+++ b/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"
+  }
+}
--- a/packages/store/src/app/blocksuite/index.ts
+++ b/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;
--- a/packages/store/src/app/datacenter/index.tsx
+++ b/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';
-import { createDefaultWorkspace } from '@/providers/app-state-provider/utils';
-import {
-  GlobalActionsCreator,
-  useGlobalState,
-  useGlobalStateApi,
-} from '@/store/app';
+export const createDefaultWorkspace = async (dataCenter: DataCenter) => {
+  return dataCenter.createWorkspace({
+    name: DEFAULT_WORKSPACE_NAME,
+  });
+};
+
+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();
--- a/packages/store/src/app/index.tsx
+++ b/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>
+    );
+  };
--- a/packages/store/src/app/user/index.ts
+++ b/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 });
--- a/packages/store/src/index.ts
+++ b/packages/store/src/index.ts
@ -0,0 +1,3 @@
+export * from './app';
+export type { PageMeta } from './app/datacenter';
+export { createDefaultWorkspace, DataCenterPreloader } from './app/datacenter';
--- a/packages/store/tests/app.spec.tsx
+++ b/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');
+  });
+});
--- a/pnpm-lock.yaml
+++ b/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/editor': 0.4.0-20230216011811-2776d93
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93
+      '@blocksuite/blocks': 0.4.0-20230217095654-a561b36
+      '@blocksuite/editor': 0.4.0-20230217095654-a561b36
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
      '@blocksuite/icons': ^2.0.2
-      '@blocksuite/react': 0.4.0-20230216011811-2776d93
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93
+      '@blocksuite/react': 0.4.0-20230217095654-a561b36
+      '@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/editor': 0.4.0-20230216011811-2776d93_6yfgczikbxxddpvfspgrnx2z2q
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@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/icons': 2.0.4_3stiutgnnbnfnf3uowm5cip22i
-      '@blocksuite/react': 0.4.0-20230216011811-2776d93_lq2prkv6yrdmxppjpam6ud3g7y
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/react': 0.4.0-20230217095654-a561b36_wqt5vgiwk2wcrkromazh2p2frm
+      '@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:
-    resolution: {integrity: sha512-OCbf+nbxZyjWcXfRqBMVKUpFUXSj5HY2BpWMNN68IsbAI09zFiNPH0KuMi72uHyFN+/NucoZGwZH21EgXB+s7g==}
+  /@blocksuite/blocks/0.4.0-20230217095654-a561b36_dtmhin5qsbpe5id5qeimghpavm:
+    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/phasor': 0.4.0-20230216011811-2776d93_lit@2.6.1
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93_lit@2.6.1
-      '@blocksuite/virgo': 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-20230217095654-a561b36_lit@2.6.1
+      '@blocksuite/store': 0.4.0-20230217095654-a561b36_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:
-    resolution: {integrity: sha512-CzgnyjLmctmDY5MHJXeeSDLHD2x0Ux/kotQJdbl7COdPeURxspCksSVZPHXzItMM53QHF5rjqjQWmzWVownN2A==}
+  /@blocksuite/global/0.4.0-20230217095654-a561b36:
+    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:
-    resolution: {integrity: sha512-fY5XLFIOKZlCMLb093ZHRAjhnkEaJK9vJsh8Asib/hGc0PaDqu65FIM3zXR6YAAKsgKEIu8SVK1B7n+gH82Ugg==}
+  /@blocksuite/phasor/0.4.0-20230217095654-a561b36_lit@2.6.1:
+    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:
-    resolution: {integrity: sha512-XjgJ+XiHwUmaxXgyJrEIb4f7T2j6bvVM++/2RiegRw0UAqinm/pNV1YmbCue7x/Q6bksjGGeQLEgLs39fPc55w==}
+  /@blocksuite/react/0.4.0-20230217095654-a561b36_egd6bp35mqm7gvicj7jxwytmcu:
+    resolution: {integrity: sha512-YNaHFHB45p6HrZIpWL2CYwRYsD/MYbRnioOVwyt0yrkoE3IXLBuLACB76qtMlN3m83oto3cskBg+cUcDNqpRIg==}
    peerDependencies:
-      '@blocksuite/blocks': 0.4.0-20230216011811-2776d93
-      '@blocksuite/editor': 0.4.0-20230216011811-2776d93
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93
+      '@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-20230216011811-2776d93_agtz32e5txbljk4aobo36wfrpe
-      '@blocksuite/editor': 0.4.0-20230216011811-2776d93_6yfgczikbxxddpvfspgrnx2z2q
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93_lit@2.6.1
-      '@blocksuite/store': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/blocks': 0.4.0-20230217095654-a561b36_dtmhin5qsbpe5id5qeimghpavm
+      '@blocksuite/editor': 0.4.0-20230217095654-a561b36_s2lgz6fjlafla2itashgrkrf5u
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
+      '@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:
-    resolution: {integrity: sha512-UO5ipKxqfeW4MceW+nU5DkSpqXlm3sostGWx5GOl8AxWxqIjUIgOasTegqTZaR2hEUbYeqCzpuQWEERH+Fp5xQ==}
+  /@blocksuite/store/0.4.0-20230217095654-a561b36:
+    resolution: {integrity: sha512-6WaiEQwXWKuOf8DaKFu0g5AIKd0YuQpoHdblg0BWnG1kbgM5zCeySFOgrFxtXX1o8NhCNGjqenlZlkBaOn8UcA==}
    peerDependencies:
      yjs: ^13
    dependencies:
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93_lit@2.6.1
-      '@blocksuite/virgo': 0.4.0-20230216011811-2776d93_lit@2.6.1
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
+      '@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:
-    resolution: {integrity: sha512-UO5ipKxqfeW4MceW+nU5DkSpqXlm3sostGWx5GOl8AxWxqIjUIgOasTegqTZaR2hEUbYeqCzpuQWEERH+Fp5xQ==}
+  /@blocksuite/store/0.4.0-20230217095654-a561b36_lit@2.6.1:
+    resolution: {integrity: sha512-6WaiEQwXWKuOf8DaKFu0g5AIKd0YuQpoHdblg0BWnG1kbgM5zCeySFOgrFxtXX1o8NhCNGjqenlZlkBaOn8UcA==}
    peerDependencies:
      yjs: ^13
    dependencies:
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93
-      '@blocksuite/virgo': 0.4.0-20230216011811-2776d93_yjs@13.5.45
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36_lit@2.6.1
+      '@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:
-    resolution: {integrity: sha512-R0jIeVa0LDw/ZGFY7X354l9F+RUyGOA8vq3RKttNIYK9pueBOdNv3yqavj/FQu5mGMX9v4HYm9AoZLr6dvWQ6Q==}
+  /@blocksuite/store/0.4.0-20230217095654-a561b36_yjs@13.5.45:
+    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
-      lit: 2.6.1
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36
      zod: 3.20.6
    dev: false

-  /@blocksuite/virgo/0.4.0-20230216011811-2776d93_yjs@13.5.45:
-    resolution: {integrity: sha512-R0jIeVa0LDw/ZGFY7X354l9F+RUyGOA8vq3RKttNIYK9pueBOdNv3yqavj/FQu5mGMX9v4HYm9AoZLr6dvWQ6Q==}
+  /@blocksuite/virgo/0.4.0-20230217095654-a561b36_lit@2.6.1:
+    resolution: {integrity: sha512-duJN3+nr+QwhTsnyU+CA/b5uDptbLmp/WdM5NjtGScsYz9/a1l4pnOph1fOF04+A9squLMAMl06nnf85G7izmA==}
    peerDependencies:
      lit: ^2
      yjs: ^13
    dependencies:
-      '@blocksuite/global': 0.4.0-20230216011811-2776d93
-      yjs: 13.5.45
+      '@blocksuite/global': 0.4.0-20230217095654-a561b36_lit@2.6.1
+      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
--- a/tsconfig.json
+++ b/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"]
    }
  },
--- a/vitest.config.ts
+++ b/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))
+      ),
+    },
+  },
 });