PolicyEngine · MaxGhenis · Dec 3, 2025 · Dec 3, 2025 · Dec 3, 2025 · Dec 3, 2025
diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
@@ -10,10 +10,6 @@ jobs:
   lint:
     name: Lint and format
     runs-on: ubuntu-latest
-
-    defaults:
-      run:
-        working-directory: ./app
 
     steps:
       - name: Check out repository
@@ -22,26 +18,27 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
           cache: 'npm'
-          cache-dependency-path: app/package-lock.json
+          cache-dependency-path: package-lock.json
 
       - name: Install dependencies
         run: npm ci
 
+      - name: Build design system
+        run: npm run design-system:build
+
       - name: Check formatting with Prettier
+        working-directory: ./app
         run: npm run prettier
 
       - name: Run ESLint
+        working-directory: ./app
         run: npm run eslint
 
   typecheck:
     name: Type checking
     runs-on: ubuntu-latest
-
-    defaults:
-      run:
-        working-directory: ./app
 
     steps:
       - name: Check out repository
@@ -50,23 +47,23 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
           cache: 'npm'
-          cache-dependency-path: app/package-lock.json
+          cache-dependency-path: package-lock.json
 
       - name: Install dependencies
         run: npm ci
 
+      - name: Build design system
+        run: npm run design-system:build
+
       - name: Run TypeScript type checks
+        working-directory: ./app
         run: npm run typecheck
 
   test:
     name: Tests
     runs-on: ubuntu-latest
-
-    defaults:
-      run:
-        working-directory: ./app
 
     steps:
       - name: Check out repository
@@ -75,23 +72,26 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
           cache: 'npm'
-          cache-dependency-path: app/package-lock.json
+          cache-dependency-path: package-lock.json
 
       - name: Install dependencies
         run: npm ci
 
-      - name: Run tests
+      - name: Build design system
+        run: npm run design-system:build
+
+      - name: Run design system tests
+        run: npm test --workspace=@policyengine/design-system
+
+      - name: Run app tests
+        working-directory: ./app
         run: npm test
 
   build:
     name: Build
     runs-on: ubuntu-latest
-
-    defaults:
-      run:
-        working-directory: ./app
 
     steps:
       - name: Check out repository
@@ -100,12 +100,16 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
           cache: 'npm'
-          cache-dependency-path: app/package-lock.json
+          cache-dependency-path: package-lock.json
 
       - name: Install dependencies
         run: npm ci
 
+      - name: Build design system
+        run: npm run design-system:build
+
       - name: Build application
-        run: npm run build
+        working-directory: ./app
+        run: npm run build
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,3 @@
+# Ensure packages are hoisted to root for workspace resolution
+# This is needed for vitest to find jsdom
+hoist=true
diff --git a/app/calculator.html b/app/calculator.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta
+      name="viewport"
+      content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
+    />
+    <title>PolicyEngine Calculator</title>
+    <meta name="description" content="Calculate your taxes and benefits, create policy simulations, and analyze reform impacts." />
+
+    <!-- Open Graph default tags -->
+    <meta property="og:title" content="PolicyEngine Calculator" />
+    <meta property="og:description" content="Calculate your taxes and benefits, create policy simulations, and analyze reform impacts." />
+    <meta property="og:image" content="https://app.policyengine.org/assets/logos/policyengine/teal.png" />
+    <meta property="og:url" content="https://app.policyengine.org" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="PolicyEngine" />
+
+    <!-- Twitter Card default tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@ThePolicyEngine" />
+    <meta name="twitter:title" content="PolicyEngine Calculator" />
+    <meta name="twitter:description" content="Calculate your taxes and benefits, create policy simulations, and analyze reform impacts." />
+    <meta name="twitter:image" content="https://app.policyengine.org/assets/logos/policyengine/teal.png" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.calculator.tsx"></script>
+  </body>
+</html>
diff --git a/app/package.json b/app/package.json
@@ -5,7 +5,11 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
+    "dev:calculator": "VITE_APP_MODE=calculator vite",
+    "dev:website": "VITE_APP_MODE=website vite",
     "build": "vite build",
+    "build:calculator": "VITE_APP_MODE=calculator vite build",
+    "build:website": "VITE_APP_MODE=website vite build",
     "build-with-types": "tsc --noEmit && vite build",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
@@ -23,6 +27,7 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
+    "@policyengine/design-system": "*",
     "@mantine/core": "8.1.2",
     "@mantine/dates": "^8.1.2",
     "@mantine/hooks": "8.1.2",

diff --git a/app/src/CalculatorApp.tsx b/app/src/CalculatorApp.tsx
@@ -0,0 +1,49 @@
+/**
+ * Calculator App (app.policyengine.org)
+ * Interactive policy simulation and analysis
+ */
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+
+import { QueryNormalizerProvider } from '@normy/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { Provider } from 'react-redux';
+import { MantineProvider } from '@mantine/core';
+import { CalculatorRouter } from './CalculatorRouter';
+import { CalcOrchestratorProvider } from './contexts/CalcOrchestratorContext';
+import { store } from './store';
+import { policyEngineTheme } from './theme';
+import { cacheMonitor } from './utils/cacheMonitor';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: Infinity,
+    },
+  },
+});
+
+cacheMonitor.init(queryClient);
+
+export default function CalculatorApp() {
+  return (
+    <Provider store={store}>
+      <MantineProvider theme={policyEngineTheme}>
+        <QueryNormalizerProvider
+          queryClient={queryClient}
+          normalizerConfig={{
+            devLogging: import.meta.env.DEV,
+          }}
+        >
+          <QueryClientProvider client={queryClient}>
+            <CalcOrchestratorProvider>
+              <CalculatorRouter />
+              <ReactQueryDevtools initialIsOpen={false} />
+            </CalcOrchestratorProvider>
+          </QueryClientProvider>
+        </QueryNormalizerProvider>
+      </MantineProvider>
+    </Provider>
+  );
+}
diff --git a/app/src/CalculatorRouter.tsx b/app/src/CalculatorRouter.tsx
@@ -0,0 +1,128 @@
+/**
+ * Router for the Calculator app (app.policyengine.org)
+ * Contains only the interactive calculator functionality
+ */
+import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
+import PathwayLayout from './components/PathwayLayout';
+import StandardLayout from './components/StandardLayout';
+import DashboardPage from './pages/Dashboard.page';
+import PoliciesPage from './pages/Policies.page';
+import PopulationsPage from './pages/Populations.page';
+import ReportOutputPage from './pages/ReportOutput.page';
+import ReportsPage from './pages/Reports.page';
+import SimulationsPage from './pages/Simulations.page';
+import PolicyPathwayWrapper from './pathways/policy/PolicyPathwayWrapper';
+import PopulationPathwayWrapper from './pathways/population/PopulationPathwayWrapper';
+import ReportPathwayWrapper from './pathways/report/ReportPathwayWrapper';
+import SimulationPathwayWrapper from './pathways/simulation/SimulationPathwayWrapper';
+import { CountryGuard } from './routing/guards/CountryGuard';
+import { MetadataGuard } from './routing/guards/MetadataGuard';
+import { MetadataLazyLoader } from './routing/guards/MetadataLazyLoader';
+import { RedirectToCountry } from './routing/RedirectToCountry';
+
+const router = createBrowserRouter(
+  [
+    {
+      path: '/',
+      element: <RedirectToCountry />,
+    },
+    {
+      path: '/:countryId',
+      element: <CountryGuard />,
+      children: [
+        // Routes that need metadata immediately (blocking guard)
+        {
+          element: <MetadataGuard />,
+          children: [
+            {
+              element: (
+                <StandardLayout>
+                  <Outlet />
+                </StandardLayout>
+              ),
+              children: [
+                {
+                  path: 'report-output/:reportId/:subpage?/:view?',
+                  element: <ReportOutputPage />,
+                },
+              ],
+            },
+          ],
+        },
+        // Routes that benefit from metadata but don't require it (lazy loader)
+        {
+          element: <MetadataLazyLoader />,
+          children: [
+            // Regular routes with standard layout
+            {
+              element: (
+                <StandardLayout>
+                  <Outlet />
+                </StandardLayout>
+              ),
+              children: [
+                {
+                  index: true,
+                  element: <DashboardPage />,
+                },
+                {
+                  path: 'dashboard',
+                  element: <DashboardPage />,
+                },
+                {
+                  path: 'reports',
+                  element: <ReportsPage />,
+                },
+                {
+                  path: 'simulations',
+                  element: <SimulationsPage />,
+                },
+                {
+                  path: 'households',
+                  element: <PopulationsPage />,
+                },
+                {
+                  path: 'policies',
+                  element: <PoliciesPage />,
+                },
+                {
+                  path: 'account',
+                  element: <div>Account settings page</div>,
+                },
+              ],
+            },
+            // Pathway routes that manage their own layouts
+            {
+              element: <PathwayLayout />,
+              children: [
+                {
+                  path: 'reports/create',
+                  element: <ReportPathwayWrapper />,
+                },
+                {
+                  path: 'simulations/create',
+                  element: <SimulationPathwayWrapper />,
+                },
+                {
+                  path: 'households/create',
+                  element: <PopulationPathwayWrapper />,
+                },
+                {
+                  path: 'policies/create',
+                  element: <PolicyPathwayWrapper />,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  {
+    basename: import.meta.env.BASE_URL,
+  }
+);
+
+export function CalculatorRouter() {
+  return <RouterProvider router={router} />;
+}