@statsbygg/layout 0.0.1

package/.turbo/turbo-build.log

@@ -0,0 +1,89 @@
+
+> @statsbygg/layout@0.0.1 build
+> tsup
+
+▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:13:6:
+      13 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:11:6:
+      11 │       "import": "./dist/index.mjs",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:12:6:
+      12 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: /home/jimmy/dev/work/statsbygg-components/packages/layout/tsup.config.ts
+CLI Target: es2018
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+
+[9:21:10 AM]  WARN  ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:13:6:
+      13 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:11:6:
+      11 │       "import": "./dist/index.mjs",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:12:6:
+      12 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+
+
+[9:21:10 AM]  WARN  ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:13:6:
+      13 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:11:6:
+      11 │       "import": "./dist/index.mjs",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:12:6:
+      12 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+
+CJS dist/index.css         3.55 KB
+CJS dist/index.js          16.49 KB
+CJS dist/logo-X7RC63NT.svg 72.76 KB
+CJS dist/index.js.map      26.88 KB
+CJS dist/index.css.map     5.38 KB
+CJS ⚡️ Build success in 66ms
+ESM dist/index.mjs         13.22 KB
+ESM dist/index.css         3.55 KB
+ESM dist/logo-X7RC63NT.svg 72.76 KB
+ESM dist/index.css.map     5.38 KB
+ESM dist/index.mjs.map     26.56 KB
+ESM ⚡️ Build success in 66ms
+DTS Build start
+DTS ⚡️ Build success in 1201ms
+DTS dist/index.d.ts  1.63 KB
+DTS dist/index.d.mts 1.63 KB
+⠙

package/README.md

@@ -0,0 +1,206 @@
+# @statsbygg/layout
+
+Self-contained shared layout package for Statsbygg's Next.js microfrontend architecture using DigDir Designsystemet.
+
+## Overview
+
+This package provides a consistent layout and state management across multiple independent Next.js applications (zones) in a microfrontend architecture.
+
+## Features
+
+- **DigDir Designsystemet Integration**: Uses official Norwegian design system components
+- **Self-Contained State Management**: Built-in zustand store for global state (user, theme, locale)
+- **Dynamic Breadcrumbs**: Automatic breadcrumb generation with responsive behavior
+- **Cross-Zone Synchronization**: State persists across browser tabs and zone navigation
+- **CSS Modules with Colocation**: Each component follows ComponentName/ComponentName.tsx pattern
+- **TypeScript**: Full type safety with separate .types.ts files
+- **Function Declarations**: All functions use function declaration syntax
+
+## Installation
+
+```bash
+npm install @statsbygg/layout
+```
+
+## Peer Dependencies
+
+This package requires:
+- `next` >= 14.0.0
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+
+## Package Structure
+
+```
+src/
+├── components/
+│   ├── Breadcrumbs/
+│   │   ├── Breadcrumbs.tsx
+│   │   ├── Breadcrumbs.types.ts
+│   │   ├── Breadcrumbs.module.css
+│   │   └── index.ts
+│   ├── GlobalHeader/
+│   │   ├── GlobalHeader.tsx
+│   │   ├── GlobalHeader.types.ts
+│   │   ├── GlobalHeader.module.css
+│   │   └── index.ts
+│   ├── GlobalFooter/
+│   │   ├── GlobalFooter.tsx
+│   │   ├── GlobalFooter.types.ts
+│   │   ├── GlobalFooter.module.css
+│   │   └── index.ts
+│   └── RootLayout/
+│       ├── RootLayout.tsx
+│       ├── RootLayout.types.ts
+│       ├── RootLayout.module.css
+│       └── index.ts
+├── store/
+│   └── globalState.ts
+├── utils/
+│   └── routeRegistry.ts
+└── index.ts
+```
+
+## Usage
+
+### Basic Setup
+
+In your Next.js zone's root layout file (`app/layout.tsx`):
+
+```tsx
+import { RootLayout } from '@statsbygg/layout';
+import '@digdir/designsystemet-theme';
+import '@digdir/designsystemet-css';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="no">
+      <body>
+        <RootLayout zoneName="your-app-zone">
+          {children}
+        </RootLayout>
+      </body>
+    </html>
+  );
+}
+```
+
+### Using the Global Store
+
+The package exports a zustand store for managing global state:
+
+```tsx
+import { useGlobalStore } from '@statsbygg/layout';
+
+function MyComponent() {
+  const { user, theme, setUser, setTheme } = useGlobalStore();
+
+  function handleLogin() {
+    setUser({ name: 'John Doe', email: 'john@statsbygg.no' });
+  }
+
+  function toggleTheme() {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  }
+
+  return (
+    <div>
+      <p>Current theme: {theme}</p>
+      {user && <p>Logged in as {user.name}</p>}
+      <button onClick={toggleTheme}>Toggle theme</button>
+    </div>
+  );
+}
+```
+## API Reference
+
+### RootLayout
+
+Main layout component that orchestrates the entire layout structure.
+
+```tsx
+interface RootLayoutProps {
+  children: React.ReactNode;
+  zoneName: string;
+  className?: string;
+}
+```
+
+### useGlobalStore
+
+Zustand store hook for global state management.
+
+```tsx
+interface GlobalState {
+  user: { name: string; email: string } | null;
+  theme: 'light' | 'dark';
+  locale: 'no' | 'en';
+  setUser: (user: { name: string; email: string } | null) => void;
+  setTheme: (theme: 'light' | 'dark') => void;
+  setLocale: (locale: 'no' | 'en') => void;
+  initialize: () => Promise<void>;
+}
+```
+
+
+## Breadcrumbs Behavior
+
+The Breadcrumbs component uses Designsystemet's responsive behavior:
+
+- **On narrow screens (<650px)**: Shows a back button to parent level
+- **On wide screens (≥650px)**: Shows full breadcrumb path
+- **Last item**: Automatically marked with `aria-current="page"`
+
+## State Persistence
+
+Global state is automatically persisted to localStorage using zustand's persist middleware. This enables:
+
+- **Cross-tab synchronization**: Changes in one tab reflect in others
+- **Cross-zone persistence**: State is maintained when navigating between zones
+- **Session persistence**: State survives page refreshes
+
+## Design System Integration
+
+This package uses [DigDir Designsystemet](https://designsystemet.no) components:
+
+- `Breadcrumbs` (with List, Item, Link)
+- `Button`
+- `Heading`
+- `Link`
+- `Paragraph`
+
+All styling uses Designsystemet design tokens:
+- `--ds-spacing-*` for spacing
+- `--ds-color-*` for colors
+- `--ds-font-size-*` for typography
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
+
+# Watch mode for development
+npm run dev
+
+# Type checking
+npm run type-check
+
+# Linting
+npm run lint
+```
+
+## Dependencies
+
+This package includes:
+- `@digdir/designsystemet-react` ^1.5.1
+- `@statsbygg/design-tokens` ^0.2.0
+- `clsx` ^2.0.0
+- `zustand` ^5.0.4
+
+## License
+
+Internal use only - Statsbygg

package/dist/index.css

@@ -0,0 +1,154 @@
+/* src/components/Breadcrumbs/Breadcrumbs.module.css */
+.Breadcrumbs_breadcrumbs {
+  --dsc-breadcrumbs-color: var(--ds-color-text-default);
+  padding: 2.5rem 0 0 0;
+}
+.Breadcrumbs_link {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  color: var(--ds-color-text-default);
+}
+.Breadcrumbs_link:hover .Breadcrumbs_link:visited {
+  color: var(--ds-color-text-default);
+}
+.Breadcrumbs_currentLink {
+  text-decoration: none;
+  font-weight: 500;
+  pointer-events: none;
+  color: var(--ds-color-text-default);
+}
+
+/* src/components/MenuButton/MenuButton.module.css */
+.MenuButton_userInfo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-1);
+  padding: var(--ds-spacing-2) var(--ds-spacing-3);
+}
+.MenuButton_userName {
+  font-size: var(--ds-font-size-sm);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-color-neutral-text-default);
+}
+.MenuButton_userEmail {
+  font-size: var(--ds-font-size-xs);
+  color: var(--ds-color-neutral-text-subtle);
+}
+.MenuButton_menuButton {
+  background-color: var(--ds-color-neutral-base-default);
+}
+.MenuButton_devContainer {
+  display: flex;
+  gap: var(--ds-spacing-4);
+  padding: var(--ds-spacing-2);
+}
+.MenuButton_zoneSection {
+  flex: 1;
+  min-width: 12rem;
+}
+.MenuButton_zoneTitle {
+  font-weight: 600;
+  padding: var(--ds-spacing-2);
+  color: var(--ds-color-neutral-text-default);
+  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
+  margin-bottom: var(--ds-spacing-2);
+  text-transform: capitalize;
+}
+
+/* src/components/GlobalHeader/GlobalHeader.module.css */
+.GlobalHeader_header {
+  background-color: var(--ds-color-accent-surface-tinted);
+  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+.GlobalHeader_headerContainer {
+  max-width: 90rem;
+  margin: 0 auto;
+  padding: 0 var(--ds-size-30);
+}
+.GlobalHeader_topBarContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 0;
+}
+.GlobalHeader_logo {
+  margin: 0;
+  color: var(--ds-color-neutral-text-default);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  min-height: inherit;
+}
+.GlobalHeader_actionsContainer {
+  display: flex;
+  align-items: stretch;
+  gap: var(--ds-size-9);
+  min-height: inherit;
+}
+.GlobalHeader_searchInput {
+  min-width: 12.5rem;
+  display: flex;
+  align-items: center;
+}
+@media (max-width: 768px) {
+  .GlobalHeader_container {
+    padding: 0 var(--ds-spacing-4);
+  }
+  .GlobalHeader_topBar {
+    flex-wrap: wrap;
+    padding: var(--ds-spacing-4) 0;
+  }
+  .GlobalHeader_actions {
+    order: 3;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--ds-spacing-3);
+  }
+  .GlobalHeader_searchInput {
+    width: 100%;
+    min-width: auto;
+  }
+  .GlobalHeader_menuButton {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* src/components/GlobalFooter/GlobalFooter.module.css */
+.GlobalFooter_footer {
+  background-color: var(--ds-color-neutral-surface-subtle);
+  border-top: 1px solid var(--ds-color-neutral-border-subtle);
+  margin-top: auto;
+}
+.GlobalFooter_container {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: var(--ds-spacing-6) var(--ds-spacing-4);
+}
+.GlobalFooter_content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--ds-spacing-4);
+  flex-wrap: wrap;
+}
+@media (max-width: 768px) {
+  .GlobalFooter_content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+/* src/components/RootLayout/RootLayout.module.css */
+.RootLayout_root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.RootLayout_main {
+  flex: 1;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Breadcrumbs/Breadcrumbs.module.css","../src/components/MenuButton/MenuButton.module.css","../src/components/GlobalHeader/GlobalHeader.module.css","../src/components/GlobalFooter/GlobalFooter.module.css","../src/components/RootLayout/RootLayout.module.css"],"sourcesContent":[".breadcrumbs {\n  --dsc-breadcrumbs-color: var(--ds-color-text-default);\n  padding: 2.5rem 0 0 0;\n}\n\n.link {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  color: var(--ds-color-text-default);\n}\n\n.link:hover \n.link:visited{\n  color: var(--ds-color-text-default);\n}\n\n.currentLink {\n  text-decoration: none;\n  font-weight: 500;\n  pointer-events: none;\n  color: var(--ds-color-text-default);\n}\n",".userInfo {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ds-spacing-1);\n  padding: var(--ds-spacing-2) var(--ds-spacing-3);\n}\n\n.userName {\n  font-size: var(--ds-font-size-sm);\n  font-weight: var(--ds-font-weight-medium);\n  color: var(--ds-color-neutral-text-default);\n}\n\n.userEmail {\n  font-size: var(--ds-font-size-xs);\n  color: var(--ds-color-neutral-text-subtle);\n}\n\n.menuButton {\n  background-color: var(--ds-color-neutral-base-default);\n}\n\n.devContainer {\n  display: flex;\n  gap: var(--ds-spacing-4);\n  padding: var(--ds-spacing-2);\n}\n\n.zoneSection {\n  flex: 1;\n  min-width: 12rem;\n}\n\n.zoneTitle {\n  font-weight: 600;\n  padding: var(--ds-spacing-2);\n  color: var(--ds-color-neutral-text-default);\n  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);\n  margin-bottom: var(--ds-spacing-2);\n  text-transform: capitalize;\n}\n",".header {\n  background-color: var(--ds-color-accent-surface-tinted);\n  border-bottom: 1px solid var(--ds-color-neutral-border-subtle);\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n\n.headerContainer {\n  max-width: 90rem;\n  margin: 0 auto;\n  padding: 0 var(--ds-size-30);\n}\n\n.topBarContainer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.25rem 0;\n}\n\n.logo {\n  margin: 0;\n  color: var(--ds-color-neutral-text-default);\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  min-height: inherit;\n}\n\n.actionsContainer {\n  display: flex;\n  align-items: stretch;\n  gap: var(--ds-size-9);\n  min-height: inherit;\n}\n\n.searchInput {\n  min-width: 12.5rem;\n  display: flex;\n  align-items: center;\n}\n\n@media (max-width: 768px) {\n  .container {\n    padding: 0 var(--ds-spacing-4);\n  }\n\n  .topBar {\n    flex-wrap: wrap;\n    padding: var(--ds-spacing-4) 0;\n  }\n\n  .actions {\n    order: 3;\n    width: 100%;\n    flex-direction: column;\n    gap: var(--ds-spacing-3);\n  }\n\n  .searchInput {\n    width: 100%;\n    min-width: auto;\n  }\n\n  .menuButton {\n    width: 100%;\n    justify-content: center;\n  }\n}",".footer {\n  background-color: var(--ds-color-neutral-surface-subtle);\n  border-top: 1px solid var(--ds-color-neutral-border-subtle);\n  margin-top: auto;\n}\n\n.container {\n  max-width: 1440px;\n  margin: 0 auto;\n  padding: var(--ds-spacing-6) var(--ds-spacing-4);\n}\n\n.content {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--ds-spacing-4);\n  flex-wrap: wrap;\n}\n\n@media (max-width: 768px) {\n  .content {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n\n}",".root {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n}\n\n.main {\n  flex: 1;\n}"],"mappings":";AAAA,CAACA;AACC,2BAAyB,IAAI;AAC7B,WAAS,OAAO,EAAE,EAAE;AACtB;AAEA,CAACC;AACC,mBAAiB;AACjB,yBAAuB;AACvB,SAAO,IAAI;AACb;AAEA,CANCA,gBAMI,OACL,CAPCA,gBAOI;AACH,SAAO,IAAI;AACb;AAEA,CAACC;AACC,mBAAiB;AACjB,eAAa;AACb,kBAAgB;AAChB,SAAO,IAAI;AACb;;;ACrBA,CAACC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACT,WAAS,IAAI,gBAAgB,IAAI;AACnC;AAEA,CAACC;AACC,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,SAAO,IAAI;AACb;AAEA,CAACC;AACC,aAAW,IAAI;AACf,SAAO,IAAI;AACb;AAEA,CAACC;AACC,oBAAkB,IAAI;AACxB;AAEA,CAACC;AACC,WAAS;AACT,OAAK,IAAI;AACT,WAAS,IAAI;AACf;AAEA,CAACC;AACC,QAAM;AACN,aAAW;AACb;AAEA,CAACC;AACC,eAAa;AACb,WAAS,IAAI;AACb,SAAO,IAAI;AACX,iBAAe,IAAI,MAAM,IAAI;AAC7B,iBAAe,IAAI;AACnB,kBAAgB;AAClB;;;ACxCA,CAACC;AACC,oBAAkB,IAAI;AACtB,iBAAe,IAAI,MAAM,IAAI;AAC7B,YAAU;AACV,OAAK;AACL,WAAS;AACX;AAEA,CAACC;AACC,aAAW;AACX,UAAQ,EAAE;AACV,WAAS,EAAE,IAAI;AACjB;AAEA,CAACC;AACC,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,WAAS,QAAQ;AACnB;AAEA,CAACC;AACC,UAAQ;AACR,SAAO,IAAI;AACX,eAAa;AACb,WAAS;AACT,eAAa;AACb,cAAY;AACd;AAEA,CAACC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACT,cAAY;AACd;AAEA,CAACC;AACC,aAAW;AACX,WAAS;AACT,eAAa;AACf;AAEA,OAAO,CAAC,SAAS,EAAE;AACjB,GAACC;AACC,aAAS,EAAE,IAAI;AACjB;AAEA,GAACC;AACC,eAAW;AACX,aAAS,IAAI,gBAAgB;AAC/B;AAEA,GAACC;AACC,WAAO;AACP,WAAO;AACP,oBAAgB;AAChB,SAAK,IAAI;AACX;AAEA,GAvBDH;AAwBG,WAAO;AACP,eAAW;AACb;AAEA,GAACI;AACC,WAAO;AACP,qBAAiB;AACnB;AACF;;;ACrEA,CAACC;AACC,oBAAkB,IAAI;AACtB,cAAY,IAAI,MAAM,IAAI;AAC1B,cAAY;AACd;AAEA,CAACC;AACC,aAAW;AACX,UAAQ,EAAE;AACV,WAAS,IAAI,gBAAgB,IAAI;AACnC;AAEA,CAACC;AACC,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,OAAK,IAAI;AACT,aAAW;AACb;AAEA,OAAO,CAAC,SAAS,EAAE;AACjB,GATDA;AAUG,oBAAgB;AAChB,iBAAa;AACf;AAGF;;;AC3BA,CAACC;AACC,WAAS;AACT,kBAAgB;AAChB,cAAY;AACd;AAEA,CAACC;AACC,QAAM;AACR;","names":["breadcrumbs","link","currentLink","userInfo","userName","userEmail","menuButton","devContainer","zoneSection","zoneTitle","header","headerContainer","topBarContainer","logo","actionsContainer","searchInput","container","topBar","actions","menuButton","footer","container","content","root","main"]}

package/dist/index.d.mts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as zustand_middleware from 'zustand/middleware';
+import * as zustand from 'zustand';
+
+interface RootLayoutProps {
+    children: React.ReactNode;
+    zone: string;
+    className?: string;
+}
+
+declare function RootLayout({ children, zone, className, }: RootLayoutProps): react_jsx_runtime.JSX.Element;
+
+type Theme = 'light' | 'dark' | 'system';
+type GlobalState = {
+    user?: {
+        id: string;
+        name?: string;
+    } | null;
+    theme: Theme;
+    locale: string;
+    setUser: (user: GlobalState['user']) => void;
+    setTheme: (theme: Theme) => void;
+    setLocale: (locale: string) => void;
+    initialize: () => void | Promise<void>;
+};
+declare const useGlobalStore: zustand.UseBoundStore<Omit<zustand.StoreApi<GlobalState>, "setState" | "persist"> & {
+    setState(partial: GlobalState | Partial<GlobalState> | ((state: GlobalState) => GlobalState | Partial<GlobalState>), replace?: false | undefined): unknown;
+    setState(state: GlobalState | ((state: GlobalState) => GlobalState), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<zustand_middleware.PersistOptions<GlobalState, unknown, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: GlobalState) => void) => () => void;
+        onFinishHydration: (fn: (state: GlobalState) => void) => () => void;
+        getOptions: () => Partial<zustand_middleware.PersistOptions<GlobalState, unknown, unknown>>;
+    };
+}>;
+
+export { type GlobalState, RootLayout, type RootLayoutProps, useGlobalStore };

package/dist/index.d.ts

@@ -0,0 +1,40 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as zustand_middleware from 'zustand/middleware';
+import * as zustand from 'zustand';
+
+interface RootLayoutProps {
+    children: React.ReactNode;
+    zone: string;
+    className?: string;
+}
+
+declare function RootLayout({ children, zone, className, }: RootLayoutProps): react_jsx_runtime.JSX.Element;
+
+type Theme = 'light' | 'dark' | 'system';
+type GlobalState = {
+    user?: {
+        id: string;
+        name?: string;
+    } | null;
+    theme: Theme;
+    locale: string;
+    setUser: (user: GlobalState['user']) => void;
+    setTheme: (theme: Theme) => void;
+    setLocale: (locale: string) => void;
+    initialize: () => void | Promise<void>;
+};
+declare const useGlobalStore: zustand.UseBoundStore<Omit<zustand.StoreApi<GlobalState>, "setState" | "persist"> & {
+    setState(partial: GlobalState | Partial<GlobalState> | ((state: GlobalState) => GlobalState | Partial<GlobalState>), replace?: false | undefined): unknown;
+    setState(state: GlobalState | ((state: GlobalState) => GlobalState), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<zustand_middleware.PersistOptions<GlobalState, unknown, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: GlobalState) => void) => () => void;
+        onFinishHydration: (fn: (state: GlobalState) => void) => () => void;
+        getOptions: () => Partial<zustand_middleware.PersistOptions<GlobalState, unknown, unknown>>;
+    };
+}>;
+
+export { type GlobalState, RootLayout, type RootLayoutProps, useGlobalStore };