TNTStack

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

Feature components used in app pages.

Component	What it does
`greet.tsx`	Greeting form with toast notifications (Tauri IPC or API)
`command-palette.tsx`	Global command palette (⌘K) for navigation and actions
`hotkeys-dialog.tsx`	Keyboard shortcuts reference dialog
`profile-drawer.tsx`	User profile drawer
`language-card.tsx`	Language picker card
`language-toggle.tsx`	Minimal language toggle button
`mode-card.tsx`	Light/dark/system selector
`mode-switch.tsx`	Minimal light/dark switch
`mode-toggle.tsx`	Minimal light/dark toggle button
`theme-card.tsx`	Single theme preview with selection
`themes-list.tsx`	Searchable theme gallery grid
`sidebar-variant-card.tsx`	Sidebar style picker
`settings-card-skeleton.tsx`	Loading skeleton for settings cards

Sidebar and mobile navigation sections. Sidebar components are mounted inside app-sidebar.tsx.

Component	What it renders
`main-nav.tsx`	Primary links (Home, Dashboard)
`dashboard-tabs-nav.tsx`	Dashboard sub-page tabs (Overview, Analytics, Reports)
`mobile-bottom-nav.tsx`	Bottom navigation bar for mobile viewports
`projects-nav.tsx`	Project list with dropdown actions
`secondary-nav.tsx`	Secondary links (Settings, Feedback)
`user-nav.tsx`	User avatar with account menu

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/HomePage";
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