create-next-imagicma 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-next-imagicma",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "bin": {
     "create-next-imagicma": "./bin/create-next-imagicma.mjs"

package/template/opencode.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "plugin": [
+    "file:///Users/alexliu/Project/oh-my-imagicma/dist/index.js"
+  ],
+  "default_agent": "ibuild"
+}

package/template/package.json

@@ -59,7 +59,7 @@
     "recharts": "^2.15.2",
     "tailwind-merge": "^2.6.0",
     "vaul": "^1.1.2",
-    "zod": "^3.24.2"
+    "zod": "^4.1.5"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

package/template/pnpm-lock.yaml

@@ -106,7 +106,7 @@ importers:
         version: 0.39.3(pg@8.18.0)
       drizzle-zod:
         specifier: ^0.7.0
-        version: 0.7.1(drizzle-orm@0.39.3(pg@8.18.0))(zod@3.25.76)
+        version: 0.7.1(drizzle-orm@0.39.3(pg@8.18.0))(zod@4.3.6)
       embla-carousel-react:
         specifier: ^8.6.0
         version: 8.6.0(react@19.2.3)
@@ -153,8 +153,8 @@ importers:
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.13))(@types/react@19.2.13)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       zod:
-        specifier: ^3.24.2
-        version: 3.25.76
+        specifier: ^4.1.5
+        version: 4.3.6
     devDependencies:
       '@tailwindcss/postcss':
         specifier: ^4
@@ -3534,8 +3534,8 @@ packages:
     peerDependencies:
       zod: ^3.25.0 || ^4.0.0
 
-  zod@3.25.76:
-    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+  zod@4.3.6:
+    resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
 
 snapshots:
 
@@ -5339,10 +5339,10 @@ snapshots:
     optionalDependencies:
       pg: 8.18.0
 
-  drizzle-zod@0.7.1(drizzle-orm@0.39.3(pg@8.18.0))(zod@3.25.76):
+  drizzle-zod@0.7.1(drizzle-orm@0.39.3(pg@8.18.0))(zod@4.3.6):
     dependencies:
       drizzle-orm: 0.39.3(pg@8.18.0)
-      zod: 3.25.76
+      zod: 4.3.6
 
   dunder-proto@1.0.1:
     dependencies:
@@ -5645,8 +5645,8 @@ snapshots:
       '@babel/parser': 7.29.0
       eslint: 9.39.2(jiti@2.6.1)
       hermes-parser: 0.25.1
-      zod: 3.25.76
-      zod-validation-error: 4.0.2(zod@3.25.76)
+      zod: 4.3.6
+      zod-validation-error: 4.0.2(zod@4.3.6)
     transitivePeerDependencies:
       - supports-color
 
@@ -6930,8 +6930,8 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
-  zod-validation-error@4.0.2(zod@3.25.76):
+  zod-validation-error@4.0.2(zod@4.3.6):
     dependencies:
-      zod: 3.25.76
+      zod: 4.3.6
 
-  zod@3.25.76: {}
+  zod@4.3.6: {}

package/template-hono/AGENTS.md

@@ -2,23 +2,28 @@
 
 默认使用中文沟通与输出（除非用户明确要求其他语言）。
 
+## 目标
+
+你需要一次性交付可运行、可预览、可验证、可演示的完整应用，而不是半成品。
+
 ## 技术栈与约束
 
 - 框架：Hono（Node runtime）+ Vite（单进程开发）
 - 前端：React 19 + React Router + Tailwind v4 + shadcn/ui
 - 请求层：React Query + fetch
 - 契约：Zod（`shared/routes.ts`）
-- 数据库：Postgres + Drizzle
+- 数据库：优先 Postgres + Drizzle；若 `DATABASE_URL` 缺失，默认走 SQLite（零配置）并保持 API 契约不变
 
 ## 目录约定
 
+- `client/index.html`：Vite 前端入口 HTML
+- `client/public/`：前端静态资源
 - `client/src/`：前端应用入口、页面、Provider、错误边界
+- `client/src/components/ui/`：shadcn/ui 组件
+- `client/src/hooks/`：客户端 hooks
+- `client/src/lib/`：通用工具
 - `server/`：Hono 入口、路由、存储、DB
-- `components/ui/`：shadcn/ui 组件
-- `hooks/`：客户端 hooks
-- `lib/`：通用工具
 - `shared/`：前后端共享 schema/契约
-- `public/`：静态资源（由 Vite/Hono 提供）
 
 ## 常用命令
 
@@ -29,11 +34,54 @@
 - `pnpm lint`：ESLint
 - `pnpm db:push`：同步数据库结构
 
-## 开发规则
+## 执行硬规则
+
+- 不阻塞就不要问用户，直接推进到完成。
+- 不要要求用户发送“继续执行/不要停在总结”之类控制语句，把持续推进作为默认行为。
+- 进度反馈用自然里程碑播报，不使用突兀命令式话术。
+- 仅在真实阻塞时才提问，并附已尝试步骤与日志证据。
+- 未达到完成标准前，不得用“文档总结/状态总结”代替执行。
+- 不得只做前端占位，必须打通真实 API 与数据读写链路。
+- 每次代码改动后必须重启服务并验证页面/接口。
+- 关键改动后必须跑端到端验证（如 `run_test`）并检查日志。
+- 禁止递归调用测试代理或无限循环调用同一工具。
+- 如果 `run_test` 结果不是 `[run_test] ok`，必须视为未通过，继续修复。
+- `run_test` 卡住或无进展时要快速失败并给出证据，禁止长时间空转重试。
+- 不允许“口头完成”。完成声明必须有工具证据支撑。
+- SQLite 路径必须保持单一 schema 真相源，禁止手写临时 SQL 与 ORM schema 并行漂移。
+
+## 状态文件写入规则
+
+- 若维护 `docs/project_state.json`，每次写入前先读取最新版本。
+- 若写入报冲突（文件已变更），必须重新读取后重试，不得忽略。
+- `quality_gates.typecheck=true` 仅在构建命令真实通过后设置。
+
+## UI 质量门禁（必须全部满足）
+
+- 首页不得空白，不得仅显示默认模板文案。
+- 视觉风格必须明确：字体、颜色、间距、动效要统一。
+- 禁止“紫色渐变 + 白底默认感”模板化输出。
+- 必须定义可复用设计 token（颜色、圆角、阴影、间距等级）。
+- 至少覆盖桌面与移动端关键断点，不允许内容溢出。
+- 交互状态完整：hover/focus/disabled/loading/error/success。
+- 在 `<Button>` 上使用自定义背景色类（如 `bg-*`）时，必须同时显式声明文本色类（如 `text-*`）；禁止只改背景不改文字色。
+- Todo 类页面优先采用单主轴布局（标题区 + 输入区 + 列表区），避免信息噪音过载。
+- 优先复用 `Input/Button/Card/Checkbox/Select` 的默认视觉语言，必要时只做局部增强，不要重写整套样式。
+- 列表增删改状态建议加入轻量动效（如 `framer-motion` 的入场/退出），并提供失败反馈（toast 或 inline alert）。
+
+## 数据与安全
 
 - 服务端数据库逻辑放在 `server/`，不要泄漏到客户端。
 - API 响应必须经过 `shared/routes.ts` 的 Zod schema 校验。
 - 不提交 `.env.local`、数据库密钥。
-- 优先复用 `components/ui` 与已有 hooks，避免重复造轮子。
+- 优先复用 `client/src/components/ui` 与 `client/src/hooks`，避免重复造轮子。
+
+## 完成标准
 
+只有以下全部满足才允许结束：
 
+- `pnpm build` 通过（无 pnpm 时 `npm run build` 通过）
+- 页面可在本地端口访问并完成核心流程
+- `run_test` 返回 `[run_test] ok`
+- 关键日志无阻塞级错误
+- UI 达到可演示级（非“功能可用但观感粗糙”）

package/template-hono/README.md

@@ -9,6 +9,16 @@
 - 数据层：Drizzle ORM + PostgreSQL (`pg`)
 - 校验契约：Zod（`shared/routes.ts`）
 
+## 目录结构（重点）
+
+- `client/index.html`：前端入口 HTML
+- `client/public/`：前端静态资源
+- `client/src/components/ui/`：shadcn/ui 组件
+- `client/src/hooks/`：前端 hooks
+- `client/src/lib/`：前端通用工具
+- `server/`：Hono 后端入口与路由
+- `shared/`：前后端共享契约与 schema
+
 ## 开发
 
 ```bash

package/template-hono/{index.html → client/index.html}

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="zh-CN" data-theme-style="quadratic">
+<html lang="zh-CN" data-theme-style="nomad">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,6 +8,6 @@
   </head>
   <body class="antialiased">
     <div id="root"></div>
-    <script type="module" src="/client/src/main.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/template-hono/{components → client/src/components}/ui/alert-dialog.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import type { VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
@@ -98,13 +99,18 @@ const AlertDialogDescription = React.forwardRef<
 AlertDialogDescription.displayName =
   AlertDialogPrimitive.Description.displayName
 
+type AlertDialogActionProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Action
+> &
+  VariantProps<typeof buttonVariants>
+
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
+  AlertDialogActionProps
+>(({ className, variant, size, ...props }, ref) => (
   <AlertDialogPrimitive.Action
     ref={ref}
-    className={cn(buttonVariants(), className)}
+    className={cn(buttonVariants({ variant, size }), className)}
     {...props}
   />
 ))

package/template-hono/{components → client/src/components}/ui/button.tsx

@@ -7,31 +7,28 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0" +
-  " hover-elevate active-elevate-2",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold tracking-[0.01em] transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground border border-primary-border",
+          "bg-primary text-primary-foreground border border-primary/45 shadow-[0_10px_24px_hsl(var(--primary)/0.38)] hover:-translate-y-0.5 hover:shadow-[0_14px_30px_hsl(var(--primary)/0.46)] active:translate-y-0",
         destructive:
-          "bg-destructive text-destructive-foreground border border-destructive-border",
+          "bg-destructive text-destructive-foreground border border-destructive/45 shadow-[0_10px_22px_hsl(var(--destructive)/0.3)] hover:brightness-105",
         outline:
-          // Shows the background color of whatever card / sidebar / accent background it is inside of.
-          // Inherits the current text color.
-          " border [border-color:var(--button-outline)]  shadow-xs active:shadow-none ",
-        secondary: "border bg-secondary text-secondary-foreground border border-secondary-border ",
+          "border border-input/80 bg-white/75 text-foreground shadow-[0_4px_12px_rgba(15,23,42,0.08)] hover:bg-white hover:border-ring/35",
+        secondary: "border border-secondary-border bg-secondary/90 text-secondary-foreground shadow-sm hover:bg-secondary",
         // Add a transparent border so that when someone toggles a border on later, it doesn't shift layout/size.
-        ghost: "border border-transparent",
+        ghost: "border border-transparent text-foreground/80 hover:bg-accent/75 hover:text-foreground",
       },
       // Heights are set as "min" heights, because sometimes Ai will place large amount of content
       // inside buttons. With a min-height they will look appropriate with small amounts of content,
       // but will expand to fit large amounts of content.
       size: {
-        default: "min-h-9 px-4 py-2",
-        sm: "min-h-8 rounded-md px-3 text-xs",
-        lg: "min-h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: "min-h-10 px-4 py-2",
+        sm: "min-h-8 rounded-lg px-3 text-xs",
+        lg: "min-h-11 rounded-xl px-8",
+        icon: "h-10 w-10 rounded-xl",
       },
     },
     defaultVariants: {

package/template-hono/{components → client/src/components}/ui/card.tsx

@@ -11,7 +11,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "shadcn-card rounded-xl border bg-card border-card-border text-card-foreground shadow-sm",
+      "shadcn-card rounded-2xl border border-white/70 bg-card/84 text-card-foreground shadow-[0_18px_42px_rgba(15,23,42,0.1)] backdrop-blur",
       className
     )}
     {...props}
@@ -25,7 +25,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn("flex flex-col space-y-1.5 p-5 sm:p-6", className)}
     {...props}
   />
 ));
@@ -38,7 +38,7 @@ const CardTitle = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
+      "text-xl font-semibold leading-tight tracking-tight sm:text-2xl",
       className
     )}
     {...props}

package/template-hono/{components → client/src/components}/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-5 w-5 shrink-0 rounded-full border-2 border-primary/45 bg-white shadow-[0_1px_3px_rgba(15,23,42,0.18)] ring-offset-background transition-[background-color,border-color,box-shadow] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:shadow-[0_8px_16px_hsl(var(--primary)/0.35)]",
       className
     )}
     {...props}
@@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <Check className="h-4 w-4" />
+      <Check className="h-3.5 w-3.5" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))

package/template-hono/client/src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    // h-9 to match icon buttons and default buttons.
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-11 w-full rounded-2xl border border-input/85 bg-white/82 px-4 py-2 text-[15px] text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.86),0_1px_2px_rgba(15,23,42,0.06)] ring-offset-background transition-[border-color,box-shadow,background-color] duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none focus-visible:border-primary/55 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/template-hono/{components → client/src/components}/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-11 w-full items-center justify-between rounded-2xl border border-input/85 bg-white/82 px-4 py-2 text-sm text-foreground shadow-[inset_0_1px_0_rgba(255,255,255,0.86),0_1px_2px_rgba(15,23,42,0.06)] ring-offset-background transition-[border-color,box-shadow,background-color] duration-200 data-[placeholder]:text-muted-foreground/70 focus:outline-none focus:border-primary/55 focus:bg-white focus:ring-2 focus:ring-ring/30 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-xl border border-white/70 bg-popover/95 text-popover-foreground shadow-[0_16px_36px_rgba(15,23,42,0.18)] backdrop-blur data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -118,7 +118,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent/85 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}

package/template-hono/client/src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[96px] w-full rounded-2xl border border-input/85 bg-white/82 px-4 py-3 text-[15px] shadow-[inset_0_1px_0_rgba(255,255,255,0.86),0_1px_2px_rgba(15,23,42,0.06)] ring-offset-background transition-[border-color,box-shadow,background-color] duration-200 placeholder:text-muted-foreground/70 focus-visible:outline-none focus-visible:border-primary/55 focus-visible:bg-white focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/template-hono/client/src/globals.css

@@ -1,14 +1,16 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");
 @import "tailwindcss";
 @config "../../tailwind.config.mjs";
 
 :root {
   /* Fonts */
-  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
-    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", sans-serif;
-  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+  --font-sans: "Poppins", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "Noto Sans SC", "Helvetica Neue", sans-serif;
+  --font-display: "Poppins", "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", sans-serif;
+  --font-serif: "Poppins", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "Noto Sans SC", "Helvetica Neue", sans-serif;
+  --font-mono: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
 
   /* Core theme tokens (HSL triples) */
@@ -40,7 +42,19 @@
   --input: 240 5.9% 90%;
   --ring: 240 5.9% 10%;
 
-  --radius: 0.5rem;
+  --radius: 0.8rem;
+
+  /* Visual system tokens for showcase pages */
+  --surface-1: 224 40% 98%;
+  --surface-2: 220 35% 95%;
+  --brand-accent: 201 92% 56%;
+  --brand-success: 156 72% 40%;
+  --elevation-soft: 0 14px 34px rgba(15, 23, 42, 0.12);
+  --elevation-strong: 0 22px 56px rgba(15, 23, 42, 0.18);
+  --space-xs: 0.625rem;
+  --space-sm: 0.875rem;
+  --space-md: 1.125rem;
+  --space-lg: 1.625rem;
 
   /* Extra tokens used by the migrated shadcn components */
   --card-border: var(--border);
@@ -115,119 +129,119 @@
 
 /* Theme style presets (used by html[data-theme-style="<preset>"]) */
 :root[data-theme-style="quadratic"] {
-  --background: 240 8.3% 95.3%;
-  --foreground: 225 14.3% 5.5%;
+  --background: 246 33% 96%;
+  --foreground: 233 24% 17%;
 
   --card: 0 0% 100%;
-  --card-foreground: 225 14.3% 5.5%;
+  --card-foreground: 233 24% 17%;
   --popover: 0 0% 100%;
-  --popover-foreground: 225 14.3% 5.5%;
-
-  --primary: 240 8.6% 93.1%;
-  --primary-foreground: 225 14.3% 5.5%;
-  --secondary: 240 7% 86.1%;
-  --secondary-foreground: 225 14.3% 5.5%;
-  --muted: 240 8.6% 93.1%;
-  --muted-foreground: 225 7% 35%;
-  --accent: 240 7% 86.1%;
-  --accent-foreground: 225 14.3% 5.5%;
-
-  --border: 240 7% 82%;
-  --input: 240 7% 82%;
-  --ring: 225 14.3% 5.5%;
-
-  --chart-1: 225 14.3% 35%;
-  --chart-2: 240 8% 55%;
-  --chart-3: 220 40% 55%;
-  --chart-4: 270 20% 62%;
-  --chart-5: 190 30% 52%;
+  --popover-foreground: 233 24% 17%;
+
+  --primary: 258 84% 63%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 250 44% 92%;
+  --secondary-foreground: 233 24% 20%;
+  --muted: 246 36% 93%;
+  --muted-foreground: 230 12% 42%;
+  --accent: 257 62% 88%;
+  --accent-foreground: 234 24% 24%;
+
+  --border: 246 24% 86%;
+  --input: 246 24% 84%;
+  --ring: 258 84% 63%;
+
+  --chart-1: 258 78% 56%;
+  --chart-2: 201 84% 56%;
+  --chart-3: 172 65% 45%;
+  --chart-4: 338 74% 58%;
+  --chart-5: 39 84% 58%;
 }
 
 .dark[data-theme-style="quadratic"] {
-  --background: 225 14.3% 5.5%;
-  --foreground: 240 8.3% 95.3%;
-
-  --card: 225 12% 9%;
-  --card-foreground: 240 8.3% 95.3%;
-  --popover: 225 12% 9%;
-  --popover-foreground: 240 8.3% 95.3%;
-
-  --primary: 240 8.6% 93.1%;
-  --primary-foreground: 225 14.3% 5.5%;
-  --secondary: 225 8% 15%;
-  --secondary-foreground: 240 8.3% 95.3%;
-  --muted: 225 8% 12%;
-  --muted-foreground: 240 7% 70%;
-  --accent: 225 8% 12%;
-  --accent-foreground: 240 8.3% 95.3%;
-
-  --border: 225 8% 22%;
-  --input: 225 8% 22%;
-  --ring: 240 8.6% 93.1%;
-
-  --chart-1: 240 8.6% 70%;
-  --chart-2: 220 30% 65%;
-  --chart-3: 190 30% 60%;
-  --chart-4: 270 20% 65%;
-  --chart-5: 45 20% 62%;
+  --background: 233 22% 11%;
+  --foreground: 246 33% 96%;
+
+  --card: 232 20% 14%;
+  --card-foreground: 246 33% 96%;
+  --popover: 232 20% 14%;
+  --popover-foreground: 246 33% 96%;
+
+  --primary: 258 90% 70%;
+  --primary-foreground: 233 22% 11%;
+  --secondary: 235 16% 20%;
+  --secondary-foreground: 246 30% 94%;
+  --muted: 234 14% 18%;
+  --muted-foreground: 240 15% 76%;
+  --accent: 235 16% 20%;
+  --accent-foreground: 246 30% 94%;
+
+  --border: 234 14% 26%;
+  --input: 234 14% 26%;
+  --ring: 258 90% 70%;
+
+  --chart-1: 258 90% 70%;
+  --chart-2: 201 78% 68%;
+  --chart-3: 172 58% 62%;
+  --chart-4: 338 76% 72%;
+  --chart-5: 39 78% 70%;
 }
 
 :root[data-theme-style="nomad"] {
-  --background: 240 9.1% 95.7%;
-  --foreground: 220 12.5% 9.4%;
-
-  --card: 240 12% 98%;
-  --card-foreground: 220 12.5% 9.4%;
-  --popover: 240 12% 98%;
-  --popover-foreground: 220 12.5% 9.4%;
-
-  --primary: 339 89.8% 53.9%;
-  --primary-foreground: 220 12.5% 9.4%;
-  --secondary: 231 10.4% 86.9%;
-  --secondary-foreground: 220 12.5% 9.4%;
-  --muted: 240 9% 92%;
-  --muted-foreground: 220 8% 35%;
-  --accent: 231 10.4% 86.9%;
-  --accent-foreground: 220 12.5% 9.4%;
-
-  --border: 231 10% 82%;
-  --input: 231 10% 82%;
-  --ring: 339 89.8% 53.9%;
-
-  --chart-1: 339 89.8% 53.9%;
-  --chart-2: 220 28% 40%;
-  --chart-3: 40 72% 60%;
-  --chart-4: 173 25% 45%;
-  --chart-5: 280 45% 60%;
+  --background: 0 0% 94.1%;
+  --foreground: 0 0% 10.2%;
+
+  --card: 0 0% 98.8%;
+  --card-foreground: 0 0% 0%;
+  --popover: 45 25% 96.9%;
+  --popover-foreground: 0 0% 10.2%;
+
+  --primary: 341.9 85.1% 52.5%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 76.9%;
+  --secondary-foreground: 0 0% 10.2%;
+  --muted: 0 0% 89%;
+  --muted-foreground: 0 0% 12.9%;
+  --accent: 0 0% 100%;
+  --accent-foreground: 0 0% 10.2%;
+
+  --border: 0 0% 91%;
+  --input: 0 0% 71%;
+  --ring: 0 0% 42%;
+
+  --chart-1: 203.9 88.3% 53.1%;
+  --chart-2: 159.8 100% 36.1%;
+  --chart-3: 42 92.8% 56.3%;
+  --chart-4: 147.1 78.5% 42%;
+  --chart-5: 341.5 75.2% 51%;
 }
 
 .dark[data-theme-style="nomad"] {
-  --background: 220 12.5% 9.4%;
-  --foreground: 240 9.1% 95.7%;
-
-  --card: 220 12% 12%;
-  --card-foreground: 240 9.1% 95.7%;
-  --popover: 220 12% 12%;
-  --popover-foreground: 240 9.1% 95.7%;
-
-  --primary: 339 90% 62%;
-  --primary-foreground: 220 12.5% 9.4%;
-  --secondary: 220 10% 17%;
-  --secondary-foreground: 240 9.1% 95.7%;
-  --muted: 220 9% 14%;
-  --muted-foreground: 240 7% 70%;
-  --accent: 220 9% 14%;
-  --accent-foreground: 240 9.1% 95.7%;
-
-  --border: 220 8% 22%;
-  --input: 220 8% 22%;
-  --ring: 339 90% 62%;
-
-  --chart-1: 339 90% 66%;
-  --chart-2: 40 72% 65%;
-  --chart-3: 173 30% 58%;
-  --chart-4: 280 50% 72%;
-  --chart-5: 220 18% 72%;
+  --background: 0 0% 10%;
+  --foreground: 0 0% 96%;
+
+  --card: 0 0% 13%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 8%;
+  --popover-foreground: 0 0% 96%;
+
+  --primary: 341.9 85.1% 60%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 26%;
+  --secondary-foreground: 0 0% 96%;
+  --muted: 0 0% 18%;
+  --muted-foreground: 0 0% 72%;
+  --accent: 0 0% 22%;
+  --accent-foreground: 0 0% 96%;
+
+  --border: 0 0% 24%;
+  --input: 0 0% 34%;
+  --ring: 0 0% 62%;
+
+  --chart-1: 203.9 88.3% 62%;
+  --chart-2: 159.8 100% 44%;
+  --chart-3: 42 92.8% 64%;
+  --chart-4: 147.1 78.5% 50%;
+  --chart-5: 341.5 75.2% 59%;
 }
 
 :root[data-theme-style="honey"] {
@@ -412,10 +426,40 @@
   body {
     @apply bg-background text-foreground antialiased;
     font-family: var(--font-sans);
+    line-height: 1.5;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-display);
+    letter-spacing: -0.02em;
+  }
+
+  ::selection {
+    background: hsl(var(--primary) / 0.22);
   }
 }
 
 @layer utilities {
+  @keyframes showcase-rise-in {
+    0% {
+      opacity: 0;
+      transform: translateY(12px) scale(0.992);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  .showcase-rise {
+    animation: showcase-rise-in 560ms cubic-bezier(0.2, 0.72, 0.24, 1) both;
+  }
   .hover-elevate {
     transition: transform 150ms ease, box-shadow 150ms ease;
   }

package/template-hono/{lib → client/src/lib}/theme/default-theme.ts

@@ -8,4 +8,4 @@ export const THEME_STYLES = [
 
 export type ThemeStyle = (typeof THEME_STYLES)[number];
 
-export const DEFAULT_THEME_STYLE: ThemeStyle = "quadratic";
+export const DEFAULT_THEME_STYLE: ThemeStyle = "nomad";

package/template-hono/opencode.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "plugin": [
+    "file:///Users/alexliu/Project/oh-my-imagicma/dist/index.js"
+  ],
+  "default_agent": "ibuild-omega"
+}

package/template-hono/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@hono/node-server": "^1.19.9",
+    "@hono/zod-validator": "^0.7.6",
     "@radix-ui/react-accordion": "^1.2.4",
     "@radix-ui/react-alert-dialog": "^1.1.7",
     "@radix-ui/react-aspect-ratio": "^1.1.3",
@@ -63,7 +64,7 @@
     "recharts": "^2.15.2",
     "tailwind-merge": "^2.6.0",
     "vaul": "^1.1.2",
-    "zod": "^3.24.2"
+    "zod": "^4.1.5"
   },
   "devDependencies": {
     "@hono/vite-dev-server": "^0.25.0",

package/template-hono/pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@hono/node-server':
         specifier: ^1.19.9
         version: 1.19.9(hono@4.11.9)
+      '@hono/zod-validator':
+        specifier: ^0.7.6
+        version: 0.7.6(hono@4.11.9)(zod@4.3.6)
       '@radix-ui/react-accordion':
         specifier: ^1.2.4
         version: 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.13))(@types/react@19.2.13)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -109,7 +112,7 @@ importers:
         version: 0.39.3(pg@8.18.0)
       drizzle-zod:
         specifier: ^0.7.0
-        version: 0.7.1(drizzle-orm@0.39.3(pg@8.18.0))(zod@3.25.76)
+        version: 0.7.1(drizzle-orm@0.39.3(pg@8.18.0))(zod@4.3.6)
       embla-carousel-react:
         specifier: ^8.6.0
         version: 8.6.0(react@19.2.3)
@@ -159,8 +162,8 @@ importers:
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.13))(@types/react@19.2.13)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       zod:
-        specifier: ^3.24.2
-        version: 3.25.76
+        specifier: ^4.1.5
+        version: 4.3.6
     devDependencies:
       '@hono/vite-dev-server':
         specifier: ^0.25.0
@@ -822,6 +825,12 @@ packages:
       wrangler:
         optional: true
 
+  '@hono/zod-validator@0.7.6':
+    resolution: {integrity: sha512-Io1B6d011Gj1KknV4rXYz4le5+5EubcWEU/speUjuw9XMMIaP3n78yXLhjd2A3PXaXaUwEAluOiAyLqhBEJgsw==}
+    peerDependencies:
+      hono: '>=3.9.0'
+      zod: ^3.25.0 || ^4.0.0
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -2850,8 +2859,8 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  zod@3.25.76:
-    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+  zod@4.3.6:
+    resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
 
 snapshots:
 
@@ -3280,6 +3289,11 @@ snapshots:
       hono: 4.11.9
       minimatch: 9.0.5
 
+  '@hono/zod-validator@0.7.6(hono@4.11.9)(zod@4.3.6)':
+    dependencies:
+      hono: 4.11.9
+      zod: 4.3.6
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -4396,10 +4410,10 @@ snapshots:
     optionalDependencies:
       pg: 8.18.0
 
-  drizzle-zod@0.7.1(drizzle-orm@0.39.3(pg@8.18.0))(zod@3.25.76):
+  drizzle-zod@0.7.1(drizzle-orm@0.39.3(pg@8.18.0))(zod@4.3.6):
     dependencies:
       drizzle-orm: 0.39.3(pg@8.18.0)
-      zod: 3.25.76
+      zod: 4.3.6
 
   electron-to-chromium@1.5.286: {}
 
@@ -5159,4 +5173,4 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
-  zod@3.25.76: {}
+  zod@4.3.6: {}

package/template-hono/tailwind.config.mjs

@@ -4,11 +4,8 @@ import animate from "tailwindcss-animate";
 const config = {
   darkMode: ["class"],
   content: [
-    "./index.html",
+    "./client/index.html",
     "./client/src/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./hooks/**/*.{ts,tsx}",
-    "./lib/**/*.{ts,tsx}",
     "./shared/**/*.{ts,tsx}",
   ],
   theme: {

package/template-hono/tsconfig.json

@@ -15,19 +15,13 @@
     "incremental": true,
     "types": ["node", "vite/client"],
     "paths": {
-      "@/*": ["./*"],
+      "@/*": ["./client/src/*"],
       "@shared/*": ["./shared/*"]
     }
   },
   "include": [
     "client/src/**/*.ts",
     "client/src/**/*.tsx",
-    "components/**/*.ts",
-    "components/**/*.tsx",
-    "hooks/**/*.ts",
-    "hooks/**/*.tsx",
-    "lib/**/*.ts",
-    "lib/**/*.tsx",
     "shared/**/*.ts",
     "shared/**/*.tsx",
     "server/**/*.ts",

package/template-hono/vite.config.ts

@@ -84,6 +84,7 @@ export default defineConfig(async ({ command }) => {
   }
 
   return {
+    root: path.resolve(__dirname, "client"),
     server: {
       host: "0.0.0.0",
       port: lockedPort,
@@ -92,7 +93,7 @@ export default defineConfig(async ({ command }) => {
     plugins: [
       react(),
       devServer({
-        entry: "server/dev-app.ts",
+        entry: path.resolve(__dirname, "server/dev-app.ts"),
         adapter: nodeAdapter,
         exclude: [/^\/(?!api(?:\/|$)).*/, ...defaultOptions.exclude],
       }),
@@ -113,7 +114,7 @@ export default defineConfig(async ({ command }) => {
     ],
     resolve: {
       alias: {
-        "@": path.resolve(__dirname, "."),
+        "@": path.resolve(__dirname, "client/src"),
         "@shared": path.resolve(__dirname, "shared"),
       },
     },

package/template-hono/.imagicma/AGENTS.md

@@ -1,7 +0,0 @@
-
-## 开发规则
-
-- `/.imagicma/port.json` 是初始化生成的锁定端口文件，禁止修改。
-- 禁止修改 `scripts/` 下的受保护启动文件：`imagicma-common.mjs`、`imagicma-guard.mjs`、`imagicma-dev.mjs`、`imagicma-start.mjs`。
-- 禁止修改 `package.json` 中 `scripts.dev` 与 `scripts.start`（以及对应 `predev`、`prestart`）命令。
-- 禁止直接执行 `vite` 或 `node dist/server/index.js` 启动项目；只能通过 `pnpm dev` / `pnpm start` 启动。

package/template-hono/.imagicma/port.json

@@ -1,5 +0,0 @@
-{
-  "port": 5001,
-  "locked": true,
-  "version": 1
-}

package/template-hono/components/ui/input.tsx

@@ -1,25 +0,0 @@
-"use client";
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
-    // h-9 to match icon buttons and default buttons.
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }

package/template-hono/components/ui/textarea.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
->(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
-Textarea.displayName = "Textarea"
-
-export { Textarea }