feat(globalStateStore): implement global state management with persistence

- refactor state structure to include app, layout, navigation, owner, program, session, and user
- add slices for managing program, session, owner, user, layout, navigation, and app states
- create context provider for global state with automatic fetching and throttling
- implement persistence using IndexedDB with localStorage fallback
- add comprehensive README documentation for usage and API

.storybook/preview.ts

@@ -1,18 +1,19 @@
-import type { Preview } from '@storybook/react-vite'
+import type { Preview } from '@storybook/react-vite';
+
 import { PreviewDecorator } from './previewDecorator';
 
 const preview: Preview = {
+  decorators: [PreviewDecorator],
   parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
+        color: /(background|color)$/i,
+        date: /Date$/i,
       },
     },
+    layout: 'fullscreen',
   },
-  decorators: [
-    PreviewDecorator,
-  ],
 };
 
 export default preview;

.storybook/previewDecorator.tsx

@@ -1,16 +1,40 @@
-import { MantineProvider } from '@mantine/core';
-import { ModalsProvider } from '@mantine/modals';
 import '@mantine/core/styles.css';
 
-export function PreviewDecorator(Story: any, { parameters }: any) {
-  console.log('Rendering decorator', parameters);
+import type { Decorator } from '@storybook/react-vite';
+
+import { MantineProvider } from '@mantine/core';
+import { ModalsProvider } from '@mantine/modals';
+
+import { GlobalStateStoreProvider } from '../src/GlobalStateStore';
+
+export const PreviewDecorator: Decorator = (Story, context) => {
+  const { parameters } = context;
+
+  // Allow stories to opt-out of GlobalStateStore provider
+  const useGlobalStore = parameters.globalStore !== false;
+
+  // Use 100% for fullscreen layout, 100vh otherwise
+  const isFullscreen = parameters.layout === 'fullscreen';
+  const containerStyle = {
+    height: isFullscreen ? '100%' : '100vh',
+    width: isFullscreen ? '100%' : '100vw',
+  };
+
   return (
     <MantineProvider>
       <ModalsProvider>
-        <div style={{ height: 'calc(100vh - 64px)', width: 'calc(100vw - 64px)' }}>
-          <Story key={'mainStory'} />
-        </div>
+        {useGlobalStore ? (
+          <GlobalStateStoreProvider fetchOnMount={false}>
+            <div style={containerStyle}>
+              <Story  />
+            </div>
+          </GlobalStateStoreProvider>
+        ) : (
+          <div style={containerStyle}>
+            <Story  />
+          </div>
+        )}
       </ModalsProvider>
     </MantineProvider>
   );
-}
+};