Catalyzer

The business logic layer. Pages, Zustand stores, hooks, providers, navigation config, and smart components live here. This package depends on packages/ui for design system primitives and packages/i18n for translations.

Directory Structure

Components

The app shell. These three components compose together to form the sidebar dashboard layout used by both apps.

Component	What it renders
`app-layout.tsx`	Full layout wrapper (sidebar + header + content)
`app-header.tsx`	Top bar with breadcrumbs and mobile trigger
`app-sidebar.tsx`	Sidebar that mounts all navigation groups

Pages

Full page components consumed by both apps. The app routes are thin wrappers around these.

Page	Route
`HomePage.tsx`	`/home`
`SettingsPage.tsx`	`/settings`
`OverviewPage.tsx`	`/dashboard/overview`
`AnalyticsPage.tsx`	`/dashboard/analytics`
`ReportsPage.tsx`	`/dashboard/reports`

The /dashboard route itself redirects to /dashboard/overview. This is why both apps can share the same UI: the page logic lives here, not in the apps.

Hooks

Hook	What it does
`use-app-hotkeys.ts`	Registers application-wide keyboard shortcuts
`use-drawer-history.ts`	Manages drawer open/close state with browser history
`use-mounted.ts`	Returns `true` after first client render
`use-theme-transition.ts`	View Transition API wrapper for smooth theme switching
`use-language-switcher.ts`	Locale change with theme re-application

Stores

Zustand stores with localStorage persistence where needed.

Store	State
`sidebar-store.ts`	Open/closed state, sidebar variant
`theme-store.ts`	Selected color theme (`data-theme` attribute)
`command-palette-store.ts`	Command palette open/closed state
`hotkeys-store.ts`	Hotkeys dialog open/closed state
`profile-drawer-store.ts`	Profile drawer open/closed state

Providers

Provider	What it does
`theme-provider.tsx`	Injects the custom theme system (wraps `next-themes`)

Configuration

File	What it defines
`hotkeys.ts`	Keyboard shortcut definitions and key bindings
`navigation.ts`	Sidebar navigation structure and routes
`themes.ts`	Theme registry (40+ color schemes)
`theme-init.ts`	Script injected into `<head>` to prevent flash of wrong theme

Utilities

File	What it provides
`utils.ts`	`fetchLatestGithubVersion()` fetches latest release tag. `formatHotkeyDisplay()` platform-aware hotkey labels (⌘ on Mac, Ctrl elsewhere)
`storage-utils.ts`	Type-safe `localStorage` helpers for store persistence

Exports

Wildcard exports in package.json. No barrel files.

package.json (exports)

{
  "./components/*": "./src/components/*.tsx",
  "./pages/*": "./src/pages/*.tsx",
  "./pages/subpages/*": "./src/pages/subpages/*.tsx",
  "./hooks/*": "./src/hooks/*.ts",
  "./stores/*": "./src/stores/*.ts",
  "./config/*": "./src/config/*.ts",
  "./providers/*": "./src/providers/*.tsx",
  "./lib/*": "./src/lib/*.ts",
  "./scripts/*": "./src/scripts/*.ts"
}

// Usage
import { AppLayout } from "@workspace/core/components/layout/app-layout";
import { useThemeStore } from "@workspace/core/stores/theme-store";
import { HomePage } from "@workspace/core/pages/home-page";
import { ThemeProvider } from "@workspace/core/providers/theme-provider";

Direct path imports (no barrel index). Tree-shaking works out of the box and circular dependency issues are avoided.

Dependency Flow

core → ui  (design system primitives)
core → i18n (translations)

ui must never import from core. The dependency flow is strictly one-directional: core → ui. This prevents circular dependencies and keeps the design system independent.

Core Package