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 Tauri/API toggle
`language-card.tsx`	Language picker card
`language-toggle.tsx`	Compact language toggle button
`mode-card.tsx`	Light/dark/system selector
`mode-toggle.tsx`	Compact mode 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 navigation sections. Mounted inside app-sidebar.tsx.

Component	What it renders
`main-nav.tsx`	Primary links (Home, Dashboard)
`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`
`DashboardPage.tsx`	`/dashboard`
`SettingsPage.tsx`	`/settings`
`OverviewPage.tsx`	`/dashboard/overview`
`AnalyticsPage.tsx`	`/dashboard/analytics`

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-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
`greet-store.ts`	Greeting form input + response
`sidebar-store.ts`	Open/closed state, sidebar variant
`theme-store.ts`	Selected color theme (`data-theme` attribute)

Providers

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

Configuration

File	What it defines
`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 from GitHub API
`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