@goplusvn/core 0.1.59 → 0.1.60

package/templates/starter-app/src/lib/better-auth.ts

@@ -0,0 +1,107 @@
+import "server-only"
+
+import bcrypt from "bcryptjs"
+import { betterAuth } from "better-auth"
+import { prismaAdapter } from "better-auth/adapters/prisma"
+import { APIError } from "better-auth/api"
+import { customSession } from "better-auth/plugins"
+
+import { db } from "@/lib/prisma"
+import { loadUserAccess } from "@/lib/rbac/access"
+
+/**
+ * BETTER AUTH — hệ xác thực duy nhất của app. basePath `/api/better-auth`
+ * (prefix này nằm trong danh sách public của src/proxy.ts, đừng đổi một nơi mà
+ * quên nơi kia).
+ *
+ * `customSession` là mấu chốt: nó nhồi `roles` + `permissions` vào session.user
+ * để `@goerp/core` gate được UI và CRUD mà không phải query DB ở mỗi lần kiểm
+ * quyền. Bỏ plugin này thì mọi thứ trong app hiện ra "không có quyền".
+ */
+function buildAuth() {
+  const baseURL = process.env.BETTER_AUTH_URL ?? "http://localhost:3010"
+
+  return betterAuth({
+    basePath: "/api/better-auth",
+    baseURL,
+    trustedOrigins: [baseURL],
+    secret: process.env.BETTER_AUTH_SECRET,
+    database: prismaAdapter(db, { provider: "postgresql" }),
+
+    rateLimit: {
+      enabled: true,
+      window: 60,
+      max: 300,
+      // Nhiều nhân viên chung một IP văn phòng (NAT) nên trần chung phải rộng;
+      // chỉ siết đúng endpoint đăng nhập để chặn dò mật khẩu.
+      customRules: { "/sign-in/email": { window: 60, max: 10 } },
+    },
+
+    emailAndPassword: {
+      enabled: true,
+      // ERP nội bộ: tài khoản do quản trị tạo, không cho tự đăng ký.
+      disableSignUp: true,
+      // bcrypt thay scrypt mặc định — để hash trong DB đọc được bởi mọi công cụ
+      // quen thuộc và tương thích với dữ liệu import từ hệ cũ.
+      password: {
+        hash: async (password) => bcrypt.hash(password, 10),
+        verify: async ({ hash, password }) => bcrypt.compare(password, hash),
+      },
+    },
+
+    user: { modelName: "user" },
+    session: {
+      modelName: "session",
+      expiresIn: 60 * 60 * 24 * 7,
+      updateAge: 60 * 60 * 24,
+    },
+    account: { modelName: "account" },
+    verification: { modelName: "verification" },
+
+    databaseHooks: {
+      session: {
+        create: {
+          // Khoá tài khoản phải chặn ngay từ lúc tạo phiên, không đợi tới lúc
+          // gọi API mới từ chối.
+          before: async (session) => {
+            const u = await db.user.findUnique({
+              where: { id: session.userId },
+              select: { isActive: true },
+            })
+            if (!u?.isActive) {
+              throw new APIError("FORBIDDEN", {
+                message: "Tài khoản đã bị khóa. Liên hệ quản trị viên.",
+              })
+            }
+            return { data: session }
+          },
+        },
+      },
+    },
+
+    plugins: [
+      customSession(async ({ user, session }) => {
+        const access = await loadUserAccess(user.id)
+        return {
+          session,
+          user: {
+            ...user,
+            avatar: user.image ?? null,
+            status: access.status,
+            roles: access.roles,
+            permissions: access.permissions,
+            branches: access.branches,
+            branchId: access.branchId,
+          },
+        }
+      }),
+    ],
+  })
+}
+
+// Singleton LƯỜI: chạm `db` ở module scope tạo vòng import với lib/prisma
+// (audit extension) và ném TDZ "Cannot access 'db' before initialization".
+let _auth: ReturnType<typeof buildAuth> | null = null
+export function getAuth() {
+  return (_auth ??= buildAuth())
+}

package/templates/starter-app/src/lib/branch-scope.ts

@@ -0,0 +1,53 @@
+/**
+ * CỬA DUY NHẤT của phạm vi dữ liệu theo chi nhánh. Page/route/service import
+ * từ đây, KHÔNG import thẳng `@goerp/core/branch-scope` (cần chạy qua
+ * `configureBranchScope` bên dưới trước, nếu không sẽ ném lỗi "chưa configure").
+ *
+ * Hai lớp bảo vệ, cố ý chồng lên nhau:
+ *  - LỚP 1 (chỗ nào cũng phải làm): `getBranchScope(session)` +
+ *    `scopedBranchWhere(scope)` nhét vào `where` của truy vấn.
+ *  - LỚP 2 (lưới an toàn): branch-guard extension trong lib/prisma.ts tự AND
+ *    thêm điều kiện cho các model được khai — route mới quên lọc thì cũng không
+ *    lộ dữ liệu.
+ *
+ *   const scope = await getBranchScope(session)
+ *   const rows = await db.invoice.findMany({ where: { ...scopedBranchWhere(scope), status } })
+ */
+import "server-only"
+
+import { checkPermission } from "@goerp/core/auth"
+import { configureBranchScope } from "@goerp/core/branch-scope"
+
+import type { Session } from "@/types/session"
+
+/**
+ * Luật "xem mọi chi nhánh" của app — sửa cho khớp vai trò/quyền của bạn.
+ * Ở đây: quản trị, hoặc vai trò được cấp `view-all-branches`.
+ */
+export function canViewAllBranches(session: Session): boolean {
+  return Boolean(
+    session.user?.roles?.includes("admin") ||
+      checkPermission(session as never, "branch", "view-all-branches"),
+  )
+}
+
+configureBranchScope<Session>({
+  getUserId: (session) => session.user?.id,
+  canViewAll: canViewAllBranches,
+  // Session đã mang sẵn danh sách chi nhánh (loadUserAccess nhồi vào lúc đăng
+  // nhập) nên không cần truy vấn user_branches mỗi request. Nếu app bỏ trường
+  // đó khỏi session, xoá dòng này và truyền `db` thay thế.
+  getAllowedBranchIds: (session) => session.user?.branches,
+})
+
+export {
+  NO_BRANCH_ACCESS,
+  canAccessBranch,
+  clampBranchFilter,
+  clampIdFilter,
+  getBranchScope,
+  runWithBranchScope,
+  runWithoutBranchScope,
+  scopedBranchWhere,
+  type BranchScope,
+} from "@goerp/core/branch-scope"

package/templates/starter-app/src/lib/cron/db-cron-manager.ts

@@ -0,0 +1,42 @@
+import { configureCronManager } from "@goerp/core/cron"
+
+import type { CronDb } from "@goerp/core/cron"
+
+import { logger } from "@/lib/logger"
+import { db } from "@/lib/prisma"
+
+/**
+ * Cắm cron của app vào engine @goerp/core/cron. Lịch chạy + lịch sử thực thi
+ * nằm ở DB (`system_jobs`, `job_execution_logs` — ship qua `goerp-features
+ * sync`), nên admin đổi lịch trên UI mà không cần deploy lại.
+ *
+ * Import file này (không import thẳng @goerp/core/cron) để side-effect cấu
+ * hình luôn chạy trước khi ai đó gọi cronManager.
+ */
+
+// Core gửi meta kiểu `unknown` (object, hoặc chính error). Logger app nhận
+// context là Record nên gói lại thay vì ép kiểu bừa.
+const asContext = (meta: unknown): Record<string, unknown> | undefined => {
+  if (meta === undefined || meta === null || meta === "") return undefined
+  return meta && typeof meta === "object" && !(meta instanceof Error)
+    ? (meta as Record<string, unknown>)
+    : { meta }
+}
+
+configureCronManager({
+  db: db as unknown as CronDb,
+  logger: {
+    info: (message, meta) => logger.info(message, asContext(meta)),
+    warn: (message, meta) => logger.warn(message, asContext(meta)),
+    // logger.error của app nhận (message, error?, context?) — giữ nguyên stack.
+    error: (message, meta) => logger.error(message, meta),
+  },
+})
+
+export {
+  cronManager,
+  DbCronJobManager,
+  getJobExecutionContext,
+  type ActionLog,
+  type JobExecutionContext,
+} from "@goerp/core/cron"

package/templates/starter-app/src/lib/crud/index.ts

@@ -0,0 +1,13 @@
+import { createServerCrudService, getModelName } from "@goerp/core/crud/server"
+
+import { db } from "@/lib/prisma"
+
+// Engine CRUD generic ở CORE — app chỉ tiêm prisma + map entity(số nhiều)→model Prisma.
+const MODEL_MAP: Record<string, string> = {
+  departments: "department",
+}
+
+export const crudService = createServerCrudService({
+  prisma: db,
+  getModelName: (entity) => getModelName(entity, MODEL_MAP),
+})

package/templates/starter-app/src/lib/errors/app-error.ts

@@ -0,0 +1,2 @@
+// AppError + Prisma error mapping live in core (generic, client-safe).
+export { AppError, toAppError } from "@goerp/core/errors/app-error"

package/templates/starter-app/src/lib/errors/error-handler.ts

@@ -0,0 +1,5 @@
+export {
+  withErrorHandler,
+  createErrorResponse,
+  errorResponse,
+} from "@goerp/core/errors/error-handler"

package/templates/starter-app/src/lib/errors/log-server-error.ts

@@ -0,0 +1,15 @@
+import {
+  createErrorLogger,
+  type ErrorLoggerDb,
+  type ServerErrorContext,
+} from "@goerp/core/errors/server-error"
+
+import { db } from "@/lib/prisma"
+
+// Binds core's fingerprint-deduped error logger to this app's `error_logs`
+// table (the Prisma `ErrorLog` model in prisma/schema.prisma).
+export type { ServerErrorContext }
+
+export const { logServerError } = createErrorLogger(
+  db as unknown as ErrorLoggerDb
+)

package/templates/starter-app/src/lib/errors/server-error.ts

@@ -0,0 +1,11 @@
+import { buildServerError } from "@goerp/core/errors/server-error"
+
+import { logServerError } from "./log-server-error"
+
+/**
+ * The canonical catch-block helper:
+ *   } catch (error) { return serverError(error, request, { message: "..." }) }
+ * Maps Prisma errors → friendly message + stable errorId, persists the stack to
+ * `error_logs`, returns structured JSON with an `X-Error-Id` header.
+ */
+export const serverError = buildServerError({ logServerError })

package/templates/starter-app/src/lib/logger.ts

@@ -0,0 +1,30 @@
+import { logger as coreLogger } from "@goerp/core/infrastructure/logger"
+
+type LogContext = Record<string, unknown>
+
+/**
+ * Log ra terminal/stdout. Đây KHÔNG phải nơi lưu lỗi để tra cứu — lỗi có ích
+ * cho việc điều tra đi qua `serverError()` / `logServerError()` và nằm ở bảng
+ * `error_logs` (trang /admin/system/error-logs đọc bảng đó).
+ *
+ * Ký hiệu `error(message, error?, context?)` khác core một chút (core chỉ nhận
+ * `(message, context)`) để chỗ gọi truyền thẳng đối tượng Error mà vẫn giữ
+ * được stack — bọc lại ở đây thay vì bắt mỗi call site tự trải ra.
+ */
+export const logger = {
+  info: (message: string, context?: LogContext) => coreLogger.info(message, context),
+  warn: (message: string, context?: LogContext) => coreLogger.warn(message, context),
+  debug: (message: string, context?: LogContext) => coreLogger.debug(message, context),
+  error: (message: string, error?: unknown, context?: LogContext) =>
+    coreLogger.error(message, {
+      ...context,
+      ...(error !== undefined
+        ? {
+            error:
+              error instanceof Error
+                ? { name: error.name, message: error.message, stack: error.stack }
+                : error,
+          }
+        : {}),
+    }),
+}

package/templates/starter-app/src/lib/page-guard.ts

@@ -0,0 +1,35 @@
+import "server-only"
+
+import { redirect } from "next/navigation"
+import { checkPermission } from "@goerp/core/auth"
+
+import type { Session } from "@/types/session"
+
+import { i18n } from "@/configs/i18n"
+import { getSession } from "@/lib/auth"
+
+/**
+ * Gác một TRANG theo quyền. `src/proxy.ts` mới chỉ chặn "chưa đăng nhập";
+ * còn "đăng nhập rồi nhưng không có quyền" phải chặn tại đây, nếu không người
+ * dùng vẫn mở được trang và chỉ thấy API trả 403 — trải nghiệm tệ và lộ cấu
+ * trúc màn hình.
+ *
+ *   const session = await requirePageAccess(lang, "error-log")
+ *
+ * Trả về session để trang khỏi gọi `getSession()` lần nữa (React `cache()` gom
+ * chung một request nên cũng không tốn thêm truy vấn).
+ */
+export async function requirePageAccess(
+  lang: string,
+  resource: string,
+  action = "view",
+): Promise<Session> {
+  const session = await getSession()
+  const locale = lang || i18n.defaultLocale
+
+  if (!session?.user) redirect(`/${locale}/sign-in`)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if (!checkPermission(session as any, resource, action)) redirect(`/${locale}`)
+
+  return session
+}

package/templates/starter-app/src/lib/prisma.ts

@@ -0,0 +1,80 @@
+import { PrismaPg } from "@prisma/adapter-pg"
+import { Prisma, PrismaClient } from "@prisma/client"
+import { createAuditExtension } from "@goerp/core/audit"
+import { createBranchGuardExtension } from "@goerp/core/branch-scope"
+import { configureSettingsService } from "@goerp/core/system/services/settings-service"
+
+/**
+ * COMPOSITION ROOT của app — nơi duy nhất tạo Prisma client và cắm dây cho các
+ * dịch vụ của core. Import `db` từ đây, đừng `new PrismaClient()` chỗ khác.
+ *
+ * Ba việc file này làm, theo đúng thứ tự:
+ *  1. tạo client (Prisma 7 = driver adapter, connection string ở DATABASE_URL);
+ *  2. bọc audit extension (ghi audit_logs cho mọi create/update/delete);
+ *  3. bọc branch-guard (lưới an toàn phạm vi chi nhánh cho thao tác ĐỌC);
+ *  4. gọi configureSettingsService(db) để core đọc SystemConfig thật.
+ *
+ * Các seam còn lại (tasks / notifications / cron) cần import nặng hơn nên nằm ở
+ * src/server/bootstrap.ts, chạy từ instrumentation.
+ */
+const globalForPrisma = globalThis as unknown as { prisma?: PrismaClient }
+
+function createClient() {
+  const connectionString = process.env.DATABASE_URL
+  if (!connectionString) {
+    throw new Error("DATABASE_URL chưa được set (xem .env.example)")
+  }
+  return new PrismaClient({
+    adapter: new PrismaPg({ connectionString }),
+    log: [
+      { emit: "stdout", level: "error" },
+      { emit: "stdout", level: "warn" },
+    ],
+    errorFormat: "minimal",
+  })
+}
+
+// Dev hot-reload nạp lại module liên tục; không cache thì mỗi lần reload mở
+// thêm một pool TCP và Postgres hết slot sau vài chục lần sửa file.
+const rawClient = globalForPrisma.prisma ?? createClient()
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = rawClient
+
+/**
+ * Audit: extension chộp mọi lệnh ghi và chép sang audit_logs. `rawClient`
+ * truyền vào là client CHƯA extend — dùng client đã extend để ghi log sẽ đệ quy
+ * vô hạn. `prisma` phải là namespace của client app (core không import client
+ * cụ thể nào).
+ */
+/**
+ * Branch-guard (LỚP 2): với mỗi model khai dưới đây, thao tác ĐỌC trong một
+ * request đã xác thực bị AND thêm `branchId ∈ chi nhánh được phép OR null`.
+ * Trang/route vẫn nên lọc tường minh bằng `scopedBranchWhere` (lớp 1) — đây chỉ
+ * là lưới hứng chỗ quên.
+ *
+ * Khai thêm model: điền tên model (đúng chữ như trong schema) vào mảng. Model
+ * PHẢI có cột `branchId`, hoặc phải khai đường quan hệ trong `buildWhere`:
+ *
+ *   models: ["Invoice", "GoodsReceipt"],
+ *   buildWhere: (model, scope) =>
+ *     model === "GoodsReceipt" ? scopedBranchWhere(scope, "warehouse") : null,
+ *
+ * Khai một model KHÔNG có branchId là Prisma ném lỗi validate ở MỌI truy vấn
+ * đọc của user bị scope — mất trắng màn hình, không chỉ mất vài dòng.
+ */
+const GUARDED_MODELS: string[] = []
+
+export const db = rawClient
+  .$extends(
+    createAuditExtension({
+      prisma: Prisma,
+      rawClient,
+      // Bảng ghi rất nhiều mà không có giá trị điều tra thì loại ra, kẻo dấu vết
+      // nghiệp vụ bị nhấn chìm (vinhhoa đo được 1 bảng chiếm 64% số dòng audit).
+      skipModels: ["AuditLog", "ErrorLog", "Session", "Account", "Verification"],
+    }),
+  )
+  .$extends(createBranchGuardExtension({ models: GUARDED_MODELS })) as unknown as PrismaClient
+
+// Core đọc SystemConfig qua service này. Thiếu dòng dưới thì mọi getSettings()
+// lặng lẽ trả giá trị mặc định và saveSettings() ném lỗi.
+configureSettingsService(db as never)

package/templates/starter-app/src/lib/rbac/access.ts

@@ -0,0 +1,87 @@
+import "server-only"
+
+import { db } from "@/lib/prisma"
+
+import type { Permission } from "@/types/session"
+
+export interface UserAccess {
+  roles: string[]
+  permissions: Permission[]
+  branches: string[]
+  branchId: string | null
+  status: string
+}
+
+/**
+ * Nạp toàn bộ ngữ cảnh phân quyền của một user trong MỘT truy vấn, để
+ * `customSession` của Better Auth nhồi vào session.
+ *
+ * Hình dạng câu query bên dưới là HỢP ĐỒNG với @goerp/core: core kỳ vọng
+ * `UserRole → Role → RolePermission{resourceCode, actionCode}`. Đổi tên field
+ * trong prisma/schema/rbac.prisma thì phải đổi cả ở đây.
+ */
+export async function loadUserAccess(userId: string): Promise<UserAccess> {
+  const user = await db.user.findUnique({
+    where: { id: userId },
+    select: {
+      isActive: true,
+      userRoles: {
+        select: {
+          roleCode: true,
+          role: {
+            select: {
+              rolePermissions: {
+                select: { resourceCode: true, actionCode: true },
+              },
+            },
+          },
+        },
+      },
+      userBranches: {
+        select: { branchId: true, isDefault: true },
+      },
+    },
+  })
+
+  if (!user) {
+    return {
+      roles: [],
+      permissions: [],
+      branches: [],
+      branchId: null,
+      status: "suspended",
+    }
+  }
+
+  const roles = user.userRoles.map((ur) => ur.roleCode)
+
+  // Nhiều vai trò thường chồng lấn quyền — khử trùng lặp để session không phình
+  // (một user 5 vai trò dễ có vài trăm dòng trùng, session cookie có trần dung lượng).
+  const seen = new Set<string>()
+  const permissions: Permission[] = []
+  for (const ur of user.userRoles) {
+    for (const rp of ur.role?.rolePermissions ?? []) {
+      const key = `${rp.resourceCode}:${rp.actionCode}`
+      if (seen.has(key)) continue
+      seen.add(key)
+      permissions.push({
+        resourceCode: rp.resourceCode,
+        actionCode: rp.actionCode,
+      })
+    }
+  }
+
+  const branches = user.userBranches.map((ub) => ub.branchId)
+  const branchId =
+    user.userBranches.find((ub) => ub.isDefault)?.branchId ??
+    branches[0] ??
+    null
+
+  return {
+    roles,
+    permissions,
+    branches,
+    branchId,
+    status: user.isActive ? "active" : "suspended",
+  }
+}

package/templates/starter-app/src/lib/storage.ts

@@ -0,0 +1,28 @@
+import { configureStorage, type StorageDb } from "@goerp/core/storage"
+
+import { db } from "@/lib/prisma"
+
+/**
+ * Composition root của kho tập tin — engine ở `@goerp/core/storage`.
+ *
+ * MỌI nơi trong app import kho qua file này, KHÔNG import thẳng từ core:
+ * engine là singleton phải `configureStorage` một lần, import thẳng thì lấy
+ * được hàm nhưng không kéo theo lời gọi cấu hình → lỗi "chưa configureStorage"
+ * đúng lúc chạy thật.
+ *
+ * Mặc định: ĐĨA LOCAL, thư mục `storage/files` (private, đã gitignore) — app
+ * mới chạy được ngay, không cần dựng MinIO.
+ *
+ * Chuyển sang S3/MinIO:
+ *   1. `pnpm add @aws-sdk/client-s3 @aws-sdk/s3-request-presigner @smithy/node-http-handler`
+ *   2. thêm `driver: createS3Driver()` (import từ `@goerp/core/storage/s3`)
+ *      và `requireRemote: process.env.NODE_ENV === "production"` vào bên dưới,
+ *   3. khai các dòng `system_configs`: STORAGE_TYPE=s3, S3_ENDPOINT,
+ *      S3_PUBLIC_ENDPOINT, S3_REGION, S3_BUCKET, S3_ACCESS_KEY, S3_SECRET_KEY.
+ * URL tập tin không đổi (`/api/files/<key>`) nên dữ liệu cũ vẫn tra được.
+ */
+configureStorage({
+  db: db as unknown as StorageDb,
+})
+
+export * from "@goerp/core/storage"

package/templates/starter-app/src/providers/index.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { SettingsProvider, TenantProvider } from "@goerp/core/providers"
+import { TabContentCacheProvider, TabNavigationProvider } from "@goerp/core/ui"
+import { AuthBridgeProvider } from "@goerp/core/ui/auth"
+import { ErrorDialogProvider } from "@goerp/core/ui/feedback"
+import { SidebarProvider } from "@goerp/core/ui/primitives"
+import { Toaster } from "sonner"
+
+import type { LocaleType } from "@goerp/core/types"
+import type { ReactNode } from "react"
+
+import { tenant } from "@/configs/tenant"
+import { navigations } from "@/data/navigations"
+import { authBridgeClient } from "@/lib/auth-client"
+
+import { ModeProvider } from "./mode-provider"
+import { ThemeProvider } from "./theme-provider"
+
+export function Providers({
+  children,
+  locale,
+}: {
+  children: ReactNode
+  locale: LocaleType
+}) {
+  return (
+    <SettingsProvider locale={locale}>
+      {/* TenantProvider cấp branding (logo / tên / màu chủ đạo) cho Logo và cả
+          vỏ app. Sửa src/configs/tenant.ts là đổi da toàn bộ. */}
+      <TenantProvider tenant={tenant}>
+        <ModeProvider>
+          <ThemeProvider>
+            {/* Cầu nối auth: core không biết Better Auth là gì, nó chỉ gọi qua
+                client này. Object phải là hằng số (nó chứa hook) — đừng tạo
+                inline ở đây. */}
+            <AuthBridgeProvider client={authBridgeClient}>
+              <TabNavigationProvider navigations={navigations}>
+                <SidebarProvider>
+                  <ErrorDialogProvider>
+                    <TabContentCacheProvider>
+                      {children}
+                      <Toaster position="top-right" richColors closeButton />
+                    </TabContentCacheProvider>
+                  </ErrorDialogProvider>
+                </SidebarProvider>
+              </TabNavigationProvider>
+            </AuthBridgeProvider>
+          </ThemeProvider>
+        </ModeProvider>
+      </TenantProvider>
+    </SettingsProvider>
+  )
+}

package/templates/starter-app/src/providers/mode-provider.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useEffect } from "react"
+
+import type { ReactNode } from "react"
+
+/**
+ * Sáng/tối theo tuỳ chọn hệ điều hành. Cố ý viết bằng matchMedia thay vì kéo
+ * thêm thư viện: starter càng ít phụ thuộc càng dễ nâng cấp. Muốn người dùng
+ * tự chọn chế độ thì thay bằng next-themes và bỏ file này.
+ */
+const MODES = ["light", "dark"] as const
+
+export function ModeProvider({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    const query = window.matchMedia("(prefers-color-scheme: dark)")
+
+    const apply = (isDark: boolean) => {
+      const root = document.documentElement
+      root.classList.remove(...MODES)
+      root.classList.add(isDark ? "dark" : "light")
+    }
+
+    apply(query.matches)
+    const onChange = (e: MediaQueryListEvent) => apply(e.matches)
+    query.addEventListener("change", onChange)
+    return () => query.removeEventListener("change", onChange)
+  }, [])
+
+  return <>{children}</>
+}

package/templates/starter-app/src/providers/theme-provider.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import type { ReactNode } from 'react'
+
+const DEFAULT_THEME = 'blue'
+const DEFAULT_RADIUS = 0.5
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    const bodyElement = document.body
+    Array.from(bodyElement.classList)
+      .filter((c) => c.startsWith('theme-') || c.startsWith('radius-'))
+      .forEach((c) => bodyElement.classList.remove(c))
+    bodyElement.classList.add(`theme-${DEFAULT_THEME}`)
+    bodyElement.classList.add(`radius-${DEFAULT_RADIUS}`)
+  }, [])
+
+  return <>{children}</>
+}