@oyolincc/create 0.4.0 → 0.5.0

package/templates/hono-fullstack/apps/server/src/shared/utils/data-access/query.ts

@@ -0,0 +1,236 @@
+import { relations, type SqliteTableType, type SqliteColType } from '@repo/db/sqlite/schema'
+import { count, getColumns, sql, type DBQueryConfig } from 'drizzle-orm'
+import type { SQLiteInsertValue, SQLiteUpdateSetSource } from 'drizzle-orm/sqlite-core'
+import type {
+  Result,
+  SQLiteAsyncRelationalQueryHKT,
+  SQLiteSyncRelationalQuery,
+} from 'drizzle-orm/sqlite-core/async'
+import type { RelationalQueryBuilder } from 'drizzle-orm/sqlite-core/query-builders/query'
+import type {
+  DeleteOptions,
+  DeleteResults,
+  InsertOptions,
+  InsertResults,
+  QueryDB,
+  QueryOneOptions,
+  QueryOptions,
+  QueryPageOptions,
+  QueryResultKind,
+  QueryResults,
+  QueryRow,
+  UpdateOptions,
+  UpdateResults,
+  VOsMap,
+} from '@/shared/types/db'
+import type { Model } from './model'
+import {
+  objectWhereToSQL,
+  parseDeleteOptions,
+  parseDrizzleQueryOptions,
+  parseUpdateOptions,
+} from './params'
+
+type TableConfig<T extends SqliteTableType> = {
+  table: T
+  name: string
+  relations: Record<never, never>
+}
+
+type TableReader<K extends QueryResultKind, T extends SqliteTableType> = RelationalQueryBuilder<
+  K,
+  typeof relations,
+  TableConfig<T>,
+  SQLiteAsyncRelationalQueryHKT
+>
+
+type TotalInfo = { total: number } | undefined
+
+/**
+ * 为固定查询创建按 db/tx 实例隔离的预编译缓存。
+ * 在领域 queries.ts 顶层调用一次，每个模块持有自己的 WeakMap；此时无需提供 db。
+ * 返回的函数首次收到某个 db/tx 时同步 prepare，后续复用同一组 statement。
+ * 初始化入口也可调用它提前准备；prepare 回调只创建语句，不执行查询。
+ * 准备失败不写入缓存，后续允许重试；数据库连接的关闭仍由调用方负责。
+ *
+ * @example
+ * // queries.ts 顶层定义，只创建缓存，不准备语句。
+ * export const prepareQueries = createPreparedQueries((db) => ({
+ *   findByTitle: db.select().from(sources)
+ *     .where(eq(sources.title, sql.placeholder('title'))).prepare(),
+ * }))
+ *
+ * // 查询函数仍接受 db/tx；也可在初始化入口直接调用 prepareQueries(db) 预热。
+ * export function findByTitle(db: QueryDB, title: string) {
+ *   return prepareQueries(db).findByTitle.get({ title })
+ * }
+ */
+export function createPreparedQueries<T extends Record<string, object>>(
+  prepare: (db: QueryDB) => T,
+) {
+  const cache = new WeakMap<QueryDB, T>()
+
+  return (db: QueryDB): T => {
+    let queries = cache.get(db)
+    if (queries === undefined) {
+      queries = prepare(db)
+      cache.set(db, queries)
+    }
+    return queries
+  }
+}
+
+/**
+ * 绑定领域的表与 VO，生成可直接导出的通用查询函数；不创建事务，db 或 tx 由调用方传入。
+ * 返回值沿用驱动行为：better-sqlite3 直接返回结果，D1 返回 Promise。
+ * 通过 Drizzle 自带的 db._.resultKind 判断驱动，避免同步 SQLite 事务被改成异步执行。
+ */
+export function createQueries<T extends SqliteTableType, VOs extends VOsMap>(
+  model: Model<T, VOs>,
+  defaults: Pick<QueryOptions<T, keyof VOs & string>, 'orderBy'> = {},
+) {
+  type M = Model<T, VOs>
+  type VT = keyof VOs & string
+
+  const relation = Object.entries(relations).find(
+    ([, relation]) => (relation.table as SqliteTableType) === model.table,
+  )
+  if (!relation) throw new Error(`Table is not registered in relations: ${model.tableName}`)
+  const tableKey = relation[0] as keyof typeof relations
+  const { orderBy } = defaults
+
+  /** 按条件读取多条记录；voType 选择字段，limit 控制分页，withTotal 决定是否另查总数。 */
+  function query<K extends QueryResultKind, Q extends QueryOptions<T, VT> = {}>(
+    db: QueryDB<K>,
+    options: Q = {} as Q,
+  ): Result<K, QueryResults<M, Q>> {
+    const { selectFields, where, orderByObj, offset, limit, withTotal } = parseDrizzleQueryOptions(
+      model,
+      options,
+    )
+    // 表与 VO 在工厂创建时绑定；动态表名的类型适配只留在公共层。
+    const reader = db.query[tableKey] as unknown as TableReader<K, T>
+    const statement = reader.findMany({
+      columns: selectFields,
+      where: where || {},
+      orderBy: orderByObj || orderBy,
+      ...(limit === undefined ? {} : { offset, limit }),
+    } as DBQueryConfig<'many', typeof relations, TableConfig<T>>)
+    const totalInfo: TotalInfo | Promise<TotalInfo> = withTotal
+      ? db
+          .select({ total: count() })
+          .from(model.table)
+          .where(objectWhereToSQL(model.table, where))
+          .get()
+      : undefined
+
+    // 动态 VO 选择的运行时分支在这里统一对应到 schema 推断的公开结果类型。
+    const finish = (results: unknown[], total?: { total: number }) =>
+      ({
+        results,
+        meta: { offset, ...(limit === undefined ? {} : { limit }), ...total },
+      }) as QueryResults<M, Q>
+
+    // 同步驱动保持同步执行，避免给同步 SQLite 事务引入异步回调。
+    if (db._.resultKind === 'sync') {
+      const results = (statement as SQLiteSyncRelationalQuery<unknown[]>).sync()
+      return finish(results, totalInfo as TotalInfo) as Result<K, QueryResults<M, Q>>
+    }
+    return Promise.all([statement.execute(), totalInfo]).then(([results, total]) =>
+      finish(results, total),
+    ) as Result<K, QueryResults<M, Q>>
+  }
+
+  // 单条读取未命中时返回 null；写入结果沿用参考项目的 result/meta、updated、deleted 结构。
+  /** 按条件读取第一条记录，未命中返回 null；需要确定顺序时传入 orderBy。 */
+  function findOne<K extends QueryResultKind, Q extends QueryOneOptions<T, VT> = {}>(
+    db: QueryDB<K>,
+    options: Q = {} as Q,
+  ): Result<K, QueryRow<M, Q> | null> {
+    const result = query(db, { ...options, page: 1, limit: 1, withTotal: false as const })
+    const finish = (value: { results: unknown[] }) =>
+      (value.results[0] || null) as QueryRow<M, Q> | null
+
+    if (db._.resultKind === 'sync') {
+      return finish(result as { results: unknown[] }) as Result<K, QueryRow<M, Q> | null>
+    }
+    return Promise.resolve(result).then(finish) as Result<K, QueryRow<M, Q> | null>
+  }
+
+  /** 按页读取记录并附带总数；limit 必填，page 默认从第 1 页开始。 */
+  function findPage<K extends QueryResultKind, Q extends QueryPageOptions<T, VT>>(
+    db: QueryDB<K>,
+    options: Q,
+  ) {
+    return query(db, { ...options, withTotal: true as const })
+  }
+
+  /** 插入单条或多条记录，按 VO 返回字段及写入数量；空数组返回空结果。 */
+  function insert<K extends QueryResultKind, O extends InsertOptions<T, VT>>(
+    db: QueryDB<K>,
+    options: O,
+  ): Result<K, InsertResults<M, O>> {
+    // 动态 VO 在执行层统一为列映射；对外结果仍根据调用方的 voType 精确推断。
+    const fields: Record<string, SqliteColType> =
+      options.voType === undefined ? getColumns(model.table) : model.getVO(options.voType)
+    const values = Array.isArray(options.values) ? options.values : [options.values]
+    const rows: unknown[] | Promise<unknown[]> = values.length
+      ? db
+          .insert(model.table)
+          .values(values as unknown as SQLiteInsertValue<T>[])
+          .returning(fields)
+          .all()
+      : []
+    const finish = (result: unknown[]) =>
+      ({
+        result,
+        meta: { count: values.length, affected: result.length },
+      }) as InsertResults<M, O>
+
+    if (db._.resultKind === 'sync') {
+      return finish(rows as unknown[]) as Result<K, InsertResults<M, O>>
+    }
+    return Promise.resolve(rows).then(finish) as Result<K, InsertResults<M, O>>
+  }
+
+  /** 按条件更新记录并返回 updated 数量；空更新字段、无条件更新均抛出异常。 */
+  function update<K extends QueryResultKind>(
+    db: QueryDB<K>,
+    options: UpdateOptions<T>,
+  ): Result<K, UpdateResults> {
+    const { value, conditions } = parseUpdateOptions(model, options)
+    const rows: unknown[] | Promise<unknown[]> = db
+      .update(model.table)
+      .set(value as SQLiteUpdateSetSource<T>)
+      .where(conditions)
+      .returning({ affected: sql<number>`1` })
+      .all()
+    const finish = (result: unknown[]): UpdateResults => ({ updated: result.length })
+
+    if (db._.resultKind === 'sync') {
+      return finish(rows as unknown[]) as Result<K, UpdateResults>
+    }
+    return Promise.resolve(rows).then(finish) as Result<K, UpdateResults>
+  }
+
+  /** 按条件删除记录并返回 deleted 数量；无条件删除抛出异常。 */
+  function deleteRecords<K extends QueryResultKind>(
+    db: QueryDB<K>,
+    options: DeleteOptions<T>,
+  ): Result<K, DeleteResults> {
+    const { conditions } = parseDeleteOptions(model, options)
+    const rows: unknown[] | Promise<unknown[]> = db
+      .delete(model.table)
+      .where(conditions)
+      .returning({ affected: sql<number>`1` })
+      .all()
+    const finish = (result: unknown[]): DeleteResults => ({ deleted: result.length })
+
+    if (db._.resultKind === 'sync') {
+      return finish(rows as unknown[]) as Result<K, DeleteResults>
+    }
+    return Promise.resolve(rows).then(finish) as Result<K, DeleteResults>
+  }
+
+  return { query, findOne, findPage, insert, update, deleteRecords }
+}

package/templates/hono-fullstack/apps/server/vite.config.ts

@@ -66,8 +66,8 @@ export default defineConfig(() => {
             }),
         nodejsEntry: './src/adapters/nodejs/entry.ts',
         cloudflareEntry: './src/adapters/cloudflare/entry.ts',
-        // Enable this entry together with PiscinaWorkRunner in the Node.js adapter.
-        // 'workers/example-worker': './src/infra/work-runner/example/worker-entry.ts',
+        // Enable this entry together with PiscinaWorkRunner in di-container.ts.
+        // 'workers/piscina-worker': './src/infra/work-runner/piscina/worker-entry.ts',
       },
       // deps: {
       //   neverBundle: [...builtinModules],

package/templates/hono-fullstack/apps/server/wrangler.jsonc

@@ -11,7 +11,7 @@
   "observability": {
     "logs": {
       "enabled": true,
-      "invocation_logs": true,
+      "invocation_logs": false,
     },
     "traces": {
       "enabled": false,

package/templates/hono-fullstack/apps/stack/frontend/assets/styles.css

@@ -0,0 +1,6 @@
+/* 已完成迁移，采用 Panda 默认层序；原 Tailwind 层序留作迁移记录。
+来源	默认层
+Panda	reset, base, tokens, recipes, utilities
+Tailwind	theme, base, components, utilities
+*/
+@layer reset, base, tokens, recipes, utilities;

package/templates/hono-fullstack/apps/stack/frontend/components/general/ErrorMessage.tsx

@@ -1,4 +1,6 @@
+import { Text } from '@repo/ui'
+
 export function ErrorMessage({ error }: { error: unknown }) {
   if (!error) return null
-  return <p className="text-red-400">{String(error)}</p>
+  return <Text color="red.fg.default">{String(error)}</Text>
 }

package/templates/hono-fullstack/apps/stack/frontend/components/layouts/AppLayout.tsx

@@ -1,9 +1,10 @@
 import type { ReactNode } from 'react'
+import { css } from 'styled-system/css'
 import { Header } from './Header'
 
 export function AppLayout({ children }: { children: ReactNode }) {
   return (
-    <div className="min-h-screen bg-zinc-950 text-zinc-100">
+    <div className={css({ minHeight: 'screen', bg: 'gray.bg.page', color: 'gray.fg.default' })}>
       <Header />
       {children}
     </div>

package/templates/hono-fullstack/apps/stack/frontend/components/layouts/Header.tsx

@@ -1,7 +1,19 @@
+import { Text } from '@repo/ui'
+import { css } from 'styled-system/css'
+
 export function Header() {
   return (
-    <header className="border-b border-zinc-800 px-8 py-4">
-      <strong>Hono fullstack</strong>
+    <header
+      className={css({
+        bg: 'gray.bg.surface',
+        borderBottomWidth: 'px',
+        borderColor: 'gray.border.subtle',
+        px: '8',
+        py: '4',
+      })}>
+      <Text as="strong" fontWeight="semibold">
+        Hono fullstack
+      </Text>
     </header>
   )
 }

package/templates/hono-fullstack/apps/stack/frontend/components/layouts/Page.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
+import { vstack } from 'styled-system/patterns'
 
 export function Page({ children }: { children: ReactNode }) {
-  return <section className="flex flex-col gap-6">{children}</section>
+  return <section className={vstack({ gap: '6', alignItems: 'stretch' })}>{children}</section>
 }

package/templates/hono-fullstack/apps/stack/frontend/components/layouts/PageContainer.tsx

@@ -1,5 +1,8 @@
 import type { ReactNode } from 'react'
+import { css } from 'styled-system/css'
 
 export function PageContainer({ children }: { children: ReactNode }) {
-  return <main className="mx-auto max-w-2xl p-8">{children}</main>
+  return (
+    <main className={css({ mx: 'auto', maxW: '2xl', p: { base: '4', md: '8' } })}>{children}</main>
+  )
 }

package/templates/hono-fullstack/apps/stack/frontend/modules/example/api.ts

@@ -1,13 +1,20 @@
 import type {
-  CreateExampleInput,
-  Example,
-  ProcessExampleInput,
-  ProcessExampleOutput,
+  IExampleCreateOne,
+  IExamplesListVO,
+  IExampleProcess,
+  IExampleProcessResult,
+  IExamplesIdVO,
 } from '@repo/definition/frontend'
 import { request } from '#/shared/network/client'
 
-export const apiExampleFindMany = () => request<Example[]>('examples')
-export const apiExampleCreateOne = (input: CreateExampleInput) =>
-  request<Example>('examples', { method: 'post', json: input })
-export const apiExampleProcess = (input: ProcessExampleInput) =>
-  request<ProcessExampleOutput>('examples/process', { method: 'post', json: input })
+export const apiExampleFindMany = () =>
+  request<{ results: IExamplesListVO[]; meta: { offset: number; limit: number; total: number } }>(
+    'examples',
+  )
+export const apiExampleCreateOne = (input: IExampleCreateOne) =>
+  request<{ result: IExamplesIdVO[]; meta: { count: number; affected: number } }>('examples', {
+    method: 'post',
+    json: input,
+  })
+export const apiExampleProcess = (input: IExampleProcess) =>
+  request<IExampleProcessResult>('examples/process', { method: 'post', json: input })

package/templates/hono-fullstack/apps/stack/frontend/modules/example/components/ExampleForm.tsx

@@ -1,4 +1,6 @@
+import { Button, Field, Input } from '@repo/ui'
 import type { FormEvent } from 'react'
+import { css } from 'styled-system/css'
 
 interface ExampleFormProps {
   message: string
@@ -23,23 +25,34 @@ export function ExampleForm({
   }
 
   return (
-    <form className="flex gap-2" onSubmit={submit}>
-      <input
-        className="min-w-0 flex-1 rounded border border-zinc-700 bg-zinc-900 px-3 py-2"
-        value={message}
-        onChange={(event) => onMessageChange(event.target.value)}
-        placeholder="Message"
-      />
-      <button className="rounded bg-blue-600 px-4 py-2" disabled={!message.trim() || saving}>
+    <form
+      className={css({ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', gap: '3' })}
+      onSubmit={submit}>
+      <Field.Root
+        className={css({
+          flex: '1',
+          minW: '0',
+          width: { base: 'full', sm: 'auto' },
+          flexBasis: { base: 'full', sm: '0' },
+        })}>
+        <Field.Label>Message</Field.Label>
+        <Input
+          value={message}
+          onChange={(event) => onMessageChange(event.target.value)}
+          placeholder="Message"
+        />
+      </Field.Root>
+      <Button type="submit" variant="solid" loading={saving} disabled={!message.trim() || saving}>
         Save
-      </button>
-      <button
-        className="rounded bg-emerald-600 px-4 py-2"
+      </Button>
+      <Button
         type="button"
+        variant="outline"
+        loading={processing}
         disabled={!message.trim() || processing}
         onClick={onProcess}>
         Process
-      </button>
+      </Button>
     </form>
   )
 }

package/templates/hono-fullstack/apps/stack/frontend/modules/example/components/ExampleList.tsx

@@ -1,10 +1,19 @@
-import type { Example } from '@repo/definition/frontend'
+import { css } from 'styled-system/css'
+import type { IExamplesListVO } from '@repo/definition/frontend'
 
-export function ExampleList({ examples }: { examples?: Example[] }) {
+export function ExampleList({ examples }: { examples?: IExamplesListVO[] }) {
   return (
-    <ul className="grid gap-2">
+    <ul className={css({ display: 'grid', gap: '2' })}>
       {examples?.map((example) => (
-        <li className="rounded border border-zinc-800 p-3" key={example.id}>
+        <li
+          className={css({
+            bg: 'gray.bg.surface',
+            borderRadius: 'md',
+            borderWidth: 'px',
+            borderColor: 'gray.border.subtle',
+            p: '3',
+          })}
+          key={example.id}>
           {example.message}
         </li>
       ))}

package/templates/hono-fullstack/apps/stack/frontend/modules/example/hooks/api-hooks.ts

@@ -1,4 +1,4 @@
-import type { CreateExampleInput, ProcessExampleInput } from '@repo/definition/frontend'
+import type { IExampleCreateOne, IExampleProcess } from '@repo/definition/frontend'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { defineMutationHook, defineQueryHook } from '#/shared/network/query-hooks'
 import { apiExampleCreateOne, apiExampleFindMany, apiExampleProcess } from '../api'
@@ -17,11 +17,11 @@ export const useExamplesQuery = defineQueryHook(() =>
 export const useCreateExampleMutation = defineMutationHook(() => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: (input: CreateExampleInput) => apiExampleCreateOne(input),
+    mutationFn: (input: IExampleCreateOne) => apiExampleCreateOne(input),
     onSuccess: () => queryClient.invalidateQueries({ queryKey: exampleQueryKeys.all }),
   })
 })
 
 export const useProcessExampleMutation = defineMutationHook(() =>
-  useMutation({ mutationFn: (input: ProcessExampleInput) => apiExampleProcess(input) }),
+  useMutation({ mutationFn: (input: IExampleProcess) => apiExampleProcess(input) }),
 )

package/templates/hono-fullstack/apps/stack/frontend/routes/__root.tsx

@@ -10,7 +10,7 @@ import {
 } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { Provider as JotaiProvider, type createStore } from 'jotai'
-import appCss from '../styles.css?url'
+import appCss from '../assets/styles.css?url'
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient

package/templates/hono-fullstack/apps/stack/frontend/routes/index.tsx

@@ -1,3 +1,5 @@
+import { Heading, Text } from '@repo/ui'
+import { css } from 'styled-system/css'
 import { createFileRoute } from '@tanstack/react-router'
 import { useAtom } from 'jotai'
 import { ErrorMessage } from '#/components/general/ErrorMessage'
@@ -36,8 +38,10 @@ function Home() {
       <PageContainer>
         <Page>
           <header>
-            <h1 className="text-3xl font-bold">Example workspace</h1>
-            <p className="text-zinc-400">Nitro mounts the independent Hono server under /api.</p>
+            <Heading as="h1" size="3xl">
+              Example workspace
+            </Heading>
+            <Text color="gray.fg.muted">Nitro mounts the independent Hono server under /api.</Text>
           </header>
           <ExampleForm
             message={message}
@@ -48,12 +52,20 @@ function Home() {
             onProcess={() => processExample({ message })}
           />
           {processedExample && (
-            <pre className="rounded bg-zinc-900 p-4">
+            <pre
+              className={css({
+                borderRadius: 'md',
+                bg: 'gray.bg.surface',
+                color: 'gray.fg.muted',
+                boxShadow: 'inset 0 0 0 1px token(colors.gray.border.subtle)',
+                p: '4',
+                overflowX: 'auto',
+              })}>
               {JSON.stringify(processedExample, null, 2)}
             </pre>
           )}
           <ErrorMessage error={create.error || processError || examplesError} />
-          <ExampleList examples={examples} />
+          <ExampleList examples={examples?.results} />
         </Page>
       </PageContainer>
     </AppLayout>

package/templates/hono-fullstack/apps/stack/package.json

@@ -19,15 +19,18 @@
     "preview:cloudflare": "DEPLOY_TARGET=cloudflare vp preview",
     "deploy:cloudflare": "pnpm build:cloudflare-chain && wrangler deploy",
     "db:migrate:cloudflare:local": "wrangler d1 migrations apply DB --local --config wrangler.jsonc --persist-to ../../.wrangler/state",
+    "db:warmup:cloudflare:local": "wrangler d1 execute DB --local --config wrangler.jsonc --persist-to ../../.wrangler/state --command \"SELECT 1\"",
     "cf:typegen": "wrangler types",
     "cf:typecheck": "wrangler types --check",
     "generate-routes": "tsr generate",
     "test": "vp test",
-    "check": "vp check"
+    "check": "pnpm codegen && vp check",
+    "codegen": "panda codegen"
   },
   "dependencies": {
     "@repo/definition": "workspace:*",
     "@repo/server": "workspace:*",
+    "@repo/ui": "workspace:*",
     "@tanstack/react-query": "catalog:frontend",
     "@tanstack/react-router": "catalog:frontend",
     "@tanstack/react-start": "catalog:frontend",
@@ -41,17 +44,19 @@
     "@cloudflare/vite-plugin": "catalog:",
     "@oyolincc/cli": "catalog:",
     "@oyolincc/dev-config": "catalog:",
+    "@pandacss/dev": "catalog:frontend",
+    "@pandacss/preset-base": "catalog:frontend",
+    "@pandacss/preset-panda": "catalog:frontend",
+    "@pandacss/vite": "catalog:frontend",
     "@rollup/pluginutils": "catalog:",
-    "@tailwindcss/vite": "catalog:frontend",
     "@tanstack/react-query-devtools": "catalog:frontend",
     "@tanstack/react-router-devtools": "catalog:frontend",
     "@tanstack/router-cli": "catalog:frontend",
     "@types/node": "catalog:",
     "@types/react": "catalog:frontend",
     "@types/react-dom": "catalog:frontend",
-    "@vitejs/plugin-react": "catalog:",
+    "@vitejs/plugin-react": "catalog:frontend",
     "fast-glob": "catalog:",
-    "tailwindcss": "catalog:frontend",
     "typescript": "catalog:",
     "vite-plus": "catalog:",
     "wrangler": "catalog:"

package/templates/hono-fullstack/apps/stack/panda.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from '@pandacss/dev'
+
+export default defineConfig({
+  designSystem: '@repo/ui',
+  // designSystem 自动注册样式入口；不要把 UI 组件入口映射为 Panda JSX，
+  // 否则启用源码转换时会将 Stack 等带行为的组件内联成原生元素。
+  // Stack 使用 UI 设计系统；应用侧负责 reset 与文档全局样式。
+  // Panda preflight 替代原有 reset，组件状态样式由 UI 配方提供。
+  preflight: true,
+  prefix: {
+    className: '',
+  },
+  globalCss: {
+    extend: {
+      'html, body': { minHeight: 'full', margin: '0' },
+      html: {
+        colorPalette: 'gray',
+      },
+      'html.dark': { colorScheme: 'dark' },
+      body: {
+        fontFamily: 'sans',
+        background: 'gray.bg.page',
+        color: 'gray.fg.default',
+      },
+    },
+  },
+  jsxFramework: 'react',
+  include: ['./frontend/**/*.{js,jsx,ts,tsx}'],
+  exclude: [],
+  outdir: 'styled-system',
+})

package/templates/hono-fullstack/apps/stack/tsconfig.json

@@ -5,6 +5,7 @@
     "jsx": "react-jsx",
     "paths": {
       "#/*": ["./frontend/*"],
+      "styled-system/*": ["./styled-system/*"],
       "@/*": ["./nitro/*"]
     }
   },

package/templates/hono-fullstack/apps/stack/turbo.json

@@ -0,0 +1,20 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "dev:node": {
+      "dependsOn": ["^build:dev"]
+    },
+    "dev:cloudflare": {
+      "dependsOn": ["^build:dev"]
+    },
+    "build": {
+      "inputs": ["$TURBO_EXTENDS$"]
+    },
+    "build:node": {
+      "inputs": ["$TURBO_EXTENDS$"]
+    },
+    "build:cloudflare": {
+      "inputs": ["$TURBO_EXTENDS$"]
+    }
+  }
+}