create-fullstack-scaffold 0.4.24 → 0.5.0

package/template/src/admin/pages/TicketsPage.tsx

@@ -56,7 +56,7 @@ export const TicketsPage: React.FC = () => {
       const response = await apiClient.api.tickets.$get({ query: {} })
       const result = await response.json()
       if (result.success) {
-        setTickets(result.data)
+        setTickets(result.data.tickets)
       } else {
         message.error(result.error || t('tickets.loadFailed'))
       }

package/template/src/admin/pages/__tests__/ContentPage.test.tsx

@@ -76,7 +76,11 @@ describe('ContentPage', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockContentsGet.mockResolvedValue({
-      json: () => Promise.resolve({ success: true, data: mockContents }),
+      json: () =>
+        Promise.resolve({
+          success: true,
+          data: { contents: mockContents, total: mockContents.length, page: 1, limit: 20 },
+        }),
     })
     mockContentPost.mockResolvedValue({
       json: () => Promise.resolve({ success: true, data: { id: '3' } }),

package/template/src/admin/pages/__tests__/DashboardPage.test.tsx

@@ -24,14 +24,68 @@ vi.mock('@admin/services/apiClient', () => ({
 }))
 
 vi.mock('antd', async () => {
-  const actual = await vi.importActual('antd')
+  const React = await import('react')
   return {
-    ...actual,
+    Button: ({
+      children,
+      onClick,
+      loading,
+      ...rest
+    }: {
+      children: React.ReactNode
+      onClick?: () => void
+      loading?: boolean
+      [key: string]: unknown
+    }) => React.createElement('button', { onClick, 'data-loading': loading, ...rest }, children),
+    Select: ({
+      value,
+      onChange,
+      options,
+      ...rest
+    }: {
+      value: string
+      onChange?: (v: string) => void
+      options?: { value: string; label: string }[]
+      [key: string]: unknown
+    }) =>
+      React.createElement(
+        'select',
+        {
+          value,
+          onChange: (e: React.ChangeEvent<HTMLSelectElement>) => onChange?.(e.target.value),
+          'data-testid': 'notification-type-select',
+          ...rest,
+        },
+        options?.map((o: { value: string; label: string }) =>
+          React.createElement('option', { key: o.value, value: o.value }, o.label)
+        )
+      ),
     message: {
       success: vi.fn(),
       error: vi.fn(),
     },
+    theme: {
+      useToken: () => ({
+        token: {
+          colorText: '#000',
+          colorTextSecondary: '#666',
+          colorBgContainer: '#fff',
+          colorBorderSecondary: '#eee',
+        },
+      }),
+    },
+  }
+})
+
+vi.mock('lucide-react', async () => {
+  const React = await import('react')
+  const icons = ['Activity', 'CheckCircle', 'Clock', 'TrendingUp', 'BellRing']
+  const mock: Record<string, React.FC<{ className?: string; style?: unknown }>> = {}
+  for (const name of icons) {
+    mock[name] = (props: { className?: string; style?: unknown }) =>
+      React.createElement('span', { 'data-testid': `icon-${name}`, ...props })
   }
+  return mock
 })
 
 describe('DashboardPage', () => {
@@ -55,7 +109,7 @@ describe('DashboardPage', () => {
     render(<DashboardPage />)
 
     await waitFor(() => {
-      expect(screen.getByText('Dashboard')).toBeInTheDocument()
+      expect(screen.getByText('仪表盘')).toBeInTheDocument()
     })
   })
 
@@ -63,20 +117,20 @@ describe('DashboardPage', () => {
     mockStatsGet.mockReturnValue(new Promise(() => {}))
     render(<DashboardPage />)
 
-    expect(screen.getByText('Loading...')).toBeInTheDocument()
+    expect(screen.getByText('加载中...')).toBeInTheDocument()
   })
 
   it('displays stats cards after data loads', async () => {
     render(<DashboardPage />)
 
     await waitFor(() => {
-      expect(screen.getByText('Total Todos')).toBeInTheDocument()
+      expect(screen.getByText('总待办')).toBeInTheDocument()
       expect(screen.getByText('42')).toBeInTheDocument()
-      expect(screen.getByText('Pending')).toBeInTheDocument()
+      expect(screen.getByText('待处理')).toBeInTheDocument()
       expect(screen.getByText('10')).toBeInTheDocument()
-      expect(screen.getByText('Completed')).toBeInTheDocument()
+      expect(screen.getByText('已完成')).toBeInTheDocument()
       expect(screen.getByText('32')).toBeInTheDocument()
-      expect(screen.getByText('Last Updated')).toBeInTheDocument()
+      expect(screen.getByText('最后更新')).toBeInTheDocument()
       expect(screen.getByText('2025-01-01')).toBeInTheDocument()
     })
   })

package/template/src/admin/pages/__tests__/DisputesPage.test.tsx

@@ -117,7 +117,14 @@ function createSuccessResponse(data: unknown) {
 describe('DisputesPage', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockDisputesGet.mockReturnValue(createSuccessResponse(mockDisputes))
+    mockDisputesGet.mockReturnValue(
+      createSuccessResponse({
+        disputes: mockDisputes,
+        total: mockDisputes.length,
+        page: 1,
+        limit: 20,
+      })
+    )
     mockDisputeResolvePut.mockReturnValue(createSuccessResponse(null))
   })
 

package/template/src/admin/pages/__tests__/OrdersPage.test.tsx

@@ -114,7 +114,9 @@ function createSuccessResponse(data: unknown) {
 describe('OrdersPage', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockOrdersGet.mockReturnValue(createSuccessResponse(mockOrders))
+    mockOrdersGet.mockReturnValue(
+      createSuccessResponse({ orders: mockOrders, total: mockOrders.length, page: 1, limit: 20 })
+    )
     mockOrderProcessPut.mockReturnValue(createSuccessResponse(null))
     mockOrderCancelPut.mockReturnValue(createSuccessResponse(null))
   })
@@ -153,7 +155,7 @@ describe('OrdersPage', () => {
     render(<OrdersPage />)
 
     await waitFor(() => {
-      expect(mockOrdersGet).toHaveBeenCalledTimes(1)
+      expect(mockOrdersGet).toHaveBeenCalled()
     })
   })
 

package/template/src/admin/pages/__tests__/RegisterPage.test.tsx

@@ -34,6 +34,10 @@ vi.mock('antd', async () => {
   }
 })
 
+function getSubmitButton() {
+  return screen.getByRole('button', { name: /注\s*册/ })
+}
+
 describe('RegisterPage', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -42,19 +46,18 @@ describe('RegisterPage', () => {
   it('renders registration form', () => {
     render(<RegisterPage />)
 
-    expect(screen.getByText('Admin Registration')).toBeInTheDocument()
-    expect(screen.getByText('Register')).toBeInTheDocument()
+    expect(screen.getByText('管理员注册')).toBeInTheDocument()
+    expect(getSubmitButton()).toBeInTheDocument()
   })
 
   it('validates required fields', async () => {
     const user = userEvent.setup()
     render(<RegisterPage />)
 
-    const submitButton = screen.getByRole('button', { name: /register/i })
-    await user.click(submitButton)
+    await user.click(getSubmitButton())
 
     await waitFor(() => {
-      expect(screen.getByText('Please input username!')).toBeInTheDocument()
+      expect(screen.getByText('请输入用户名！')).toBeInTheDocument()
     })
   })
 
@@ -62,16 +65,15 @@ describe('RegisterPage', () => {
     const user = userEvent.setup()
     render(<RegisterPage />)
 
-    await user.type(screen.getByPlaceholderText('Username'), 'testuser')
-    await user.type(screen.getByPlaceholderText('Email'), 'invalid-email')
-    await user.type(screen.getByPlaceholderText('Password'), 'password123')
-    await user.type(screen.getByPlaceholderText('Confirm Password'), 'password123')
+    await user.type(screen.getByPlaceholderText('用户名'), 'testuser')
+    await user.type(screen.getByPlaceholderText('邮箱'), 'invalid-email')
+    await user.type(screen.getByPlaceholderText('密码'), 'password123')
+    await user.type(screen.getByPlaceholderText('确认密码'), 'password123')
 
-    const submitButton = screen.getByRole('button', { name: /register/i })
-    await user.click(submitButton)
+    await user.click(getSubmitButton())
 
     await waitFor(() => {
-      expect(screen.getByText('Please input valid email!')).toBeInTheDocument()
+      expect(screen.getByText('请输入有效的邮箱！')).toBeInTheDocument()
     })
   })
 
@@ -79,15 +81,14 @@ describe('RegisterPage', () => {
     const user = userEvent.setup()
     render(<RegisterPage />)
 
-    await user.type(screen.getByPlaceholderText('Username'), 'testuser')
-    await user.type(screen.getByPlaceholderText('Email'), 'test@example.com')
-    await user.type(screen.getByPlaceholderText('Password'), '12345')
+    await user.type(screen.getByPlaceholderText('用户名'), 'testuser')
+    await user.type(screen.getByPlaceholderText('邮箱'), 'test@example.com')
+    await user.type(screen.getByPlaceholderText('密码'), '12345')
 
-    const submitButton = screen.getByRole('button', { name: /register/i })
-    await user.click(submitButton)
+    await user.click(getSubmitButton())
 
     await waitFor(() => {
-      expect(screen.getByText('Password must be at least 6 characters!')).toBeInTheDocument()
+      expect(screen.getByText('密码至少6个字符！')).toBeInTheDocument()
     })
   })
 
@@ -95,16 +96,15 @@ describe('RegisterPage', () => {
     const user = userEvent.setup()
     render(<RegisterPage />)
 
-    await user.type(screen.getByPlaceholderText('Username'), 'testuser')
-    await user.type(screen.getByPlaceholderText('Email'), 'test@example.com')
-    await user.type(screen.getByPlaceholderText('Password'), 'password123')
-    await user.type(screen.getByPlaceholderText('Confirm Password'), 'different')
+    await user.type(screen.getByPlaceholderText('用户名'), 'testuser')
+    await user.type(screen.getByPlaceholderText('邮箱'), 'test@example.com')
+    await user.type(screen.getByPlaceholderText('密码'), 'password123')
+    await user.type(screen.getByPlaceholderText('确认密码'), 'different')
 
-    const submitButton = screen.getByRole('button', { name: /register/i })
-    await user.click(submitButton)
+    await user.click(getSubmitButton())
 
     await waitFor(() => {
-      expect(screen.getByText('Passwords do not match!')).toBeInTheDocument()
+      expect(screen.getByText('两次密码不一致！')).toBeInTheDocument()
     })
   })
 
@@ -118,13 +118,12 @@ describe('RegisterPage', () => {
 
     render(<RegisterPage />)
 
-    await user.type(screen.getByPlaceholderText('Username'), 'testuser')
-    await user.type(screen.getByPlaceholderText('Email'), 'test@example.com')
-    await user.type(screen.getByPlaceholderText('Password'), 'password123')
-    await user.type(screen.getByPlaceholderText('Confirm Password'), 'password123')
+    await user.type(screen.getByPlaceholderText('用户名'), 'testuser')
+    await user.type(screen.getByPlaceholderText('邮箱'), 'test@example.com')
+    await user.type(screen.getByPlaceholderText('密码'), 'password123')
+    await user.type(screen.getByPlaceholderText('确认密码'), 'password123')
 
-    const submitButton = screen.getByRole('button', { name: /register/i })
-    await user.click(submitButton)
+    await user.click(getSubmitButton())
 
     await waitFor(() => {
       expect(mockPost).toHaveBeenCalled()
@@ -143,13 +142,12 @@ describe('RegisterPage', () => {
 
     render(<RegisterPage />)
 
-    await user.type(screen.getByPlaceholderText('Username'), 'testuser')
-    await user.type(screen.getByPlaceholderText('Email'), 'test@example.com')
-    await user.type(screen.getByPlaceholderText('Password'), 'password123')
-    await user.type(screen.getByPlaceholderText('Confirm Password'), 'password123')
+    await user.type(screen.getByPlaceholderText('用户名'), 'testuser')
+    await user.type(screen.getByPlaceholderText('邮箱'), 'test@example.com')
+    await user.type(screen.getByPlaceholderText('密码'), 'password123')
+    await user.type(screen.getByPlaceholderText('确认密码'), 'password123')
 
-    const submitButton = screen.getByRole('button', { name: /register/i })
-    await user.click(submitButton)
+    await user.click(getSubmitButton())
 
     await waitFor(() => {
       expect(message.error).toHaveBeenCalled()
@@ -164,13 +162,12 @@ describe('RegisterPage', () => {
 
     render(<RegisterPage />)
 
-    await user.type(screen.getByPlaceholderText('Username'), 'testuser')
-    await user.type(screen.getByPlaceholderText('Email'), 'test@example.com')
-    await user.type(screen.getByPlaceholderText('Password'), 'password123')
-    await user.type(screen.getByPlaceholderText('Confirm Password'), 'password123')
+    await user.type(screen.getByPlaceholderText('用户名'), 'testuser')
+    await user.type(screen.getByPlaceholderText('邮箱'), 'test@example.com')
+    await user.type(screen.getByPlaceholderText('密码'), 'password123')
+    await user.type(screen.getByPlaceholderText('确认密码'), 'password123')
 
-    const submitButton = screen.getByRole('button', { name: /register/i })
-    await user.click(submitButton)
+    await user.click(getSubmitButton())
 
     await waitFor(() => {
       expect(message.error).toHaveBeenCalled()

package/template/src/admin/pages/__tests__/SettingsPage.test.tsx

@@ -1,8 +1,46 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { SettingsPage } from '../SettingsPage'
 
+const mockApiFn = vi.fn()
+
+// 页面里 apiClient.api.admin.settings.$get() 是急切求值——不 mock 传输层时
+// 会发出真实 fetch（localhost:3000），孤儿 rejection 导致 vitest 以
+// unhandled errors 退出（tests 全过也 exit 1）。
+vi.mock('@admin/services/apiClient', () => {
+  const settingsResponse = () => Promise.resolve(new Response('{}'))
+  return {
+    api: (...args: unknown[]) => {
+      mockApiFn(...args)
+      return {
+        withLoading: () => ({
+          json: () =>
+            Promise.resolve({
+              siteName: 'Test',
+              siteDescription: '',
+              smtpHost: 'smtp.test.com',
+              smtpPort: 587,
+              emailFrom: 'test@test.com',
+              sessionTimeout: 30,
+              maxLoginAttempts: 5,
+            }),
+        }),
+      }
+    },
+    apiClient: {
+      api: {
+        admin: {
+          settings: {
+            $get: vi.fn(settingsResponse),
+            $put: vi.fn(settingsResponse),
+          },
+        },
+      },
+    },
+  }
+})
+
 vi.mock('antd', async () => {
   const actual = await vi.importActual('antd')
   return {
@@ -19,48 +57,72 @@ describe('SettingsPage', () => {
     vi.clearAllMocks()
   })
 
-  it('renders General Settings card with form', () => {
+  it('renders General Settings card with form', async () => {
     render(<SettingsPage />)
 
-    expect(screen.getByText('Settings')).toBeInTheDocument()
-    expect(screen.getByText('General Settings')).toBeInTheDocument()
-    expect(screen.getByText('Site Name')).toBeInTheDocument()
-    expect(screen.getByText('Site Description')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByText('系统设置')).toBeInTheDocument()
+      expect(screen.getByText('通用设置')).toBeInTheDocument()
+      expect(screen.getByText('站点名称')).toBeInTheDocument()
+      expect(screen.getByText('站点描述')).toBeInTheDocument()
+    })
   })
 
-  it('renders Notification Settings card with toggles', () => {
+  it('renders Notification Settings card with toggles', async () => {
     render(<SettingsPage />)
 
-    expect(screen.getByText('Notification Settings')).toBeInTheDocument()
-    expect(screen.getByText('Email Notifications')).toBeInTheDocument()
-    expect(screen.getByText('Push Notifications')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByText('通知设置')).toBeInTheDocument()
+      expect(screen.getByText('邮件通知')).toBeInTheDocument()
+      expect(screen.getByText('推送通知')).toBeInTheDocument()
+    })
   })
 
-  it('renders Security Settings card', () => {
+  it('renders Security Settings card', async () => {
     render(<SettingsPage />)
 
-    expect(screen.getByText('Security Settings')).toBeInTheDocument()
-    expect(screen.getByText('Current Password')).toBeInTheDocument()
-    expect(screen.getByText('New Password')).toBeInTheDocument()
-    expect(screen.getByText('Confirm New Password')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByText('安全设置')).toBeInTheDocument()
+      expect(screen.getByText('会话超时')).toBeInTheDocument()
+      expect(screen.getByText('最大登录尝试次数')).toBeInTheDocument()
+    })
   })
 
   it('save button shows success message', async () => {
     const user = userEvent.setup()
     const { message } = await import('antd')
 
+    mockApiFn.mockReturnValue({
+      withLoading: () => ({
+        json: () => Promise.resolve({}),
+      }),
+    })
+
     render(<SettingsPage />)
 
-    const saveButtons = screen.getAllByRole('button', { name: /save changes/i })
-    await user.click(saveButtons[0])
+    await waitFor(() => {
+      expect(screen.getByText('系统设置')).toBeInTheDocument()
+    })
+
+    // 等待 fetchSettings 填充表单（必填字段有值后 onFinish 才会被触发）
+    await waitFor(() => {
+      expect((screen.getByLabelText('站点名称') as HTMLInputElement).value).toBe('Test')
+    })
+
+    const saveButton = screen.getByRole('button', { name: /保\s*存\s*更\s*改/ })
+    await user.click(saveButton)
 
-    expect(message.success).toHaveBeenCalledWith('Settings saved successfully!')
+    await waitFor(() => {
+      expect(message.success).toHaveBeenCalledWith('设置保存成功！')
+    })
   })
 
-  it('toggle switches are present and interactive', () => {
+  it('toggle switches are present and interactive', async () => {
     render(<SettingsPage />)
 
-    const switches = screen.getAllByRole('switch')
-    expect(switches.length).toBeGreaterThanOrEqual(2)
+    await waitFor(() => {
+      const switches = screen.getAllByRole('switch')
+      expect(switches.length).toBeGreaterThanOrEqual(2)
+    })
   })
 })

package/template/src/admin/pages/__tests__/TicketsPage.test.tsx

@@ -120,7 +120,9 @@ function createSuccessResponse(data: unknown) {
 describe('TicketsPage', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockTicketsGet.mockReturnValue(createSuccessResponse(mockTickets))
+    mockTicketsGet.mockReturnValue(
+      createSuccessResponse({ tickets: mockTickets, total: mockTickets.length, page: 1, limit: 20 })
+    )
     mockTicketClosePut.mockReturnValue(createSuccessResponse(null))
   })
 

package/template/src/admin/services/apiClient.ts

@@ -5,12 +5,11 @@
  * @impact loading 控制现在通过 api().withLoading() 链式调用实现
  */
 
-import { hc } from 'hono/client'
 import { WSClientImpl } from '@shared/core/ws-client'
 import { SSEClientImpl } from '@shared/core/sse-client'
 import { createRequestInterceptor } from './requestInterceptor'
 import { useCaptchaStore } from '../stores/captchaStore'
-import type { AdminApiType } from '@server/index'
+import { createApiFacade } from '@server/rpc-surface'
 
 const baseUrl = import.meta.env.API_BASE_URL || window.location.origin
 
@@ -50,7 +49,7 @@ function createCustomFetch() {
   })
 }
 
-export const apiClient = hc<AdminApiType>(baseUrl, {
+export const apiClient = createApiFacade(baseUrl, {
   fetch: createCustomFetch() as typeof fetch,
   webSocket: url => new WSClientImpl(url) as unknown as WebSocket,
   sse: url => {

package/template/src/cli/modules/content/index.ts

@@ -8,14 +8,14 @@ export function registerContentCommands(site: SiteInstance) {
     description: 'List all contents',
     parameters: z.object({
       limit: z.coerce.number().default(20).describe('Limit results'),
-      offset: z.coerce.number().default(0).describe('Offset'),
+      page: z.coerce.number().default(1).describe('Page number'),
     }),
     handler: async (params: unknown) => {
-      const p = params as { limit: number; offset: number }
+      const p = params as { limit: number; page: number }
       try {
         const client = getClient()
         const res = await client.api.contents.$get({
-          query: { limit: String(p.limit), offset: String(p.offset) },
+          query: { limit: String(p.limit), page: String(p.page) },
         })
         const data = await res.json()
         return ok(data)

package/template/src/cli/modules/dispute/index.ts

@@ -8,14 +8,14 @@ export function registerDisputeCommands(site: SiteInstance) {
     description: 'List all disputes',
     parameters: z.object({
       limit: z.coerce.number().default(20).describe('Limit results'),
-      offset: z.coerce.number().default(0).describe('Offset'),
+      page: z.coerce.number().default(1).describe('Page number'),
     }),
     handler: async (params: unknown) => {
-      const p = params as { limit: number; offset: number }
+      const p = params as { limit: number; page: number }
       try {
         const client = getClient()
         const res = await client.api.disputes.$get({
-          query: { limit: String(p.limit), offset: String(p.offset) },
+          query: { limit: String(p.limit), page: String(p.page) },
         })
         const data = await res.json()
         return ok(data)

package/template/src/cli/modules/ticket/index.ts

@@ -8,14 +8,14 @@ export function registerTicketCommands(site: SiteInstance) {
     description: 'List all tickets',
     parameters: z.object({
       limit: z.coerce.number().default(20).describe('Limit results'),
-      offset: z.coerce.number().default(0).describe('Offset'),
+      page: z.coerce.number().default(1).describe('Page number'),
     }),
     handler: async (params: unknown) => {
-      const p = params as { limit: number; offset: number }
+      const p = params as { limit: number; page: number }
       try {
         const client = getClient()
         const res = await client.api.tickets.$get({
-          query: { limit: String(p.limit), offset: String(p.offset) },
+          query: { limit: String(p.limit), page: String(p.page) },
         })
         const data = await res.json()
         return ok(data)

package/template/src/cli/modules/todo/index.ts

@@ -12,7 +12,7 @@ export function registerTodoCommands(site: SiteInstance) {
     handler: async () => {
       try {
         const client = getClient()
-        const res = await client.api.todos.$get()
+        const res = await client.api.todos.$get({ query: {} })
         const data = await res.json()
         return ok(data)
       } catch (err) {

package/template/src/cli/rpc/client.ts

@@ -1,9 +1,8 @@
-import { hc } from 'hono/client'
-import type { AppType } from '@server/index'
+import { createApiFacade, type ApiFacade } from '@server/rpc-surface'
 import { WSClientImpl } from '@shared/core/ws-client'
 import { SSEClientImpl } from '@shared/core/sse-client'
 
-export type { AppType }
+export type { ApiFacade }
 
 /**
  * CLI RPC 请求扩展参数
@@ -16,7 +15,7 @@ export interface CliFetchExtendOptions {
 }
 
 export function createRPCClient(baseUrl: string) {
-  return hc<AppType>(baseUrl, {
+  return createApiFacade(baseUrl, {
     webSocket: url => new WSClientImpl(url) as unknown as WebSocket,
     sse: url => new SSEClientImpl(url),
   })

package/template/src/cli/rpc/index.ts

@@ -1 +1 @@
-export { createRPCClient, type AppType } from './client'
+export { createRPCClient, type ApiFacade } from './client'

package/template/src/client/App.tsx

@@ -1,46 +1,10 @@
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
-import { Layout } from './Layout'
-import { PresetProvider } from './contexts/PresetContext'
-import { getPresetUIConfig, type RouteDef } from './preset-ui-config'
+import { BrowserRouter } from 'react-router-dom'
+import { AppRoutes } from './AppRoutes'
 
 export const App: React.FC<{ presetId?: string }> = ({ presetId = 'todo' }) => {
-  const config = getPresetUIConfig(presetId)
-  const { theme, desktopNav, mobileTabs, defaultRoute, routes, layout, navigation } = config
-
   return (
     <BrowserRouter>
-      <PresetProvider value={presetId}>
-        <Layout
-          preset={presetId}
-          layout={layout}
-          theme={theme}
-          navigation={navigation}
-          desktopNav={desktopNav}
-          mobileTabs={mobileTabs}
-        >
-          <Routes>
-            {defaultRoute !== '/' && (
-              <Route path="/" element={<Navigate to={defaultRoute} replace />} />
-            )}
-            {routes
-              .filter(
-                (r): r is RouteDef & { component: NonNullable<RouteDef['component']> } =>
-                  r.component !== null
-              )
-              .map(route => (
-                <Route key={route.path} path={route.path} element={<route.component />} />
-              ))}
-            <Route
-              path="*"
-              element={
-                <div className="flex items-center justify-center min-h-[50vh] text-gray-400">
-                  404 - Page not found
-                </div>
-              }
-            />
-          </Routes>
-        </Layout>
-      </PresetProvider>
+      <AppRoutes presetId={presetId} />
     </BrowserRouter>
   )
 }