create-next-imagicma 0.1.13 → 0.1.14

package/template-hono/client/src/theme/default-theme.css

@@ -0,0 +1,482 @@
+:root {
+  /* Fonts */
+  --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;
+
+  /* Shape defaults */
+  --radius: 1rem;
+  --radius-lg-token: 2rem;
+  --radius-xl-token: 3rem;
+  --radius-full-token: 9999px;
+
+  /* Design tokens */
+  --background-base: 200 69.2% 97.5%;
+  --on-background: 193.3 17% 10.4%;
+  --surface: 200 69.2% 97.5%;
+  --surface-bright: 200 69.2% 97.5%;
+  --surface-dim: 193.3 11.7% 84.9%;
+  --surface-container-lowest: 0 0% 100%;
+  --surface-container-low: 193.3 36% 95.1%;
+  --surface-container: 193.3 24.3% 92.7%;
+  --surface-container-high: 198 20.8% 90.6%;
+  --surface-container-highest: 193.3 15.3% 88.4%;
+  --surface-variant: 193.3 15.3% 88.4%;
+  --surface-tint: 167.7 100% 21%;
+  --on-surface: 193.3 17% 10.4%;
+  --on-surface-variant: 154.3 10.4% 26.3%;
+
+  --primary: 167.7 100% 21%;
+  --on-primary: 0 0% 100%;
+  --primary-container: 168.3 100% 36.1%;
+  --on-primary-container: 166.4 100% 12.9%;
+  --primary-fixed: 163 93.4% 70.4%;
+  --primary-fixed-dim: 164.4 68.2% 58%;
+  --on-primary-fixed: 165 100% 6.3%;
+  --on-primary-fixed-variant: 167.4 100% 15.9%;
+  --inverse-primary: 164.4 68.2% 58%;
+
+  --secondary: 358.4 51.4% 43.5%;
+  --on-secondary: 0 0% 100%;
+  --secondary-container: 0.4 100% 72.9%;
+  --on-secondary-container: 353.6 82.4% 24.5%;
+  --secondary-fixed: 3.1 100% 92.4%;
+  --secondary-fixed-dim: 2.3 100% 84.5%;
+  --on-secondary-fixed: 354.5 100% 12.7%;
+  --on-secondary-fixed-variant: 356.1 64.8% 32.4%;
+
+  --tertiary: 244.5 36.8% 50.4%;
+  --on-tertiary: 0 0% 100%;
+  --tertiary-container: 244.2 90.8% 78.6%;
+  --on-tertiary-container: 246.4 53.4% 34.5%;
+  --tertiary-fixed: 247.5 100% 93.7%;
+  --tertiary-fixed-dim: 244.8 100% 87.6%;
+  --on-tertiary-fixed: 251.7 100% 20.2%;
+  --on-tertiary-fixed-variant: 245.2 44.9% 40.6%;
+
+  --error: 0 75.5% 41.6%;
+  --on-error: 0 0% 100%;
+  --error-container: 5.9 100% 92%;
+  --on-error-container: 355.9 100% 28.8%;
+
+  --outline: 154.3 6.1% 45.1%;
+  --outline-variant: 152 12.4% 76.3%;
+  --inverse-surface: 193.3 9.5% 18.6%;
+  --inverse-on-surface: 193.3 29% 93.9%;
+
+  /* Semantic aliases consumed by the current app */
+  --background: var(--background-base);
+  --foreground: var(--on-background);
+
+  --card: var(--surface-container-lowest);
+  --card-foreground: var(--on-surface);
+
+  --popover: var(--surface-container-low);
+  --popover-foreground: var(--on-surface);
+
+  --primary-foreground: var(--on-primary);
+  --secondary-foreground: var(--on-secondary);
+
+  --muted: var(--surface-container);
+  --muted-foreground: var(--on-surface-variant);
+
+  --accent: var(--secondary-container);
+  --accent-foreground: var(--on-secondary-container);
+
+  --destructive: var(--error);
+  --destructive-foreground: var(--on-error);
+
+  --border: var(--outline-variant);
+  --input: var(--surface-variant);
+  --ring: var(--primary);
+
+  /* Visual system tokens for showcase pages */
+  --surface-1: var(--surface-container-lowest);
+  --surface-2: var(--surface-container-low);
+  --brand-accent: var(--tertiary-container);
+  --brand-success: var(--primary-container);
+  --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(--outline-variant);
+  --popover-border: var(--outline-variant);
+  --sidebar: var(--surface-container-low);
+  --sidebar-foreground: var(--on-surface);
+  --sidebar-border: var(--outline-variant);
+  --sidebar-ring: var(--primary);
+  --sidebar-accent: var(--secondary-container);
+  --sidebar-accent-foreground: var(--on-secondary-container);
+
+  --chart-1: var(--primary);
+  --chart-2: var(--secondary);
+  --chart-3: var(--tertiary);
+  --chart-4: var(--primary-container);
+  --chart-5: var(--error);
+
+  /* Border colors expected by template classnames */
+  --primary-border: hsl(var(--primary) / 0.18);
+  --secondary-border: hsl(var(--outline-variant));
+  --muted-border: hsl(var(--outline-variant));
+  --accent-border: hsl(var(--secondary-container) / 0.4);
+  --destructive-border: hsl(var(--error) / 0.25);
+
+  --button-outline: hsl(var(--outline-variant));
+  --badge-outline: hsl(var(--outline-variant));
+}
+
+.dark {
+  /* Design tokens */
+  --background-base: 193.3 9.5% 18.6%;
+  --on-background: 193.3 29% 93.9%;
+  --surface: 193.3 9.5% 18.6%;
+  --surface-bright: 193.3 8.5% 24%;
+  --surface-dim: 193.3 10% 12%;
+  --surface-container-lowest: 193.3 11% 8%;
+  --surface-container-low: 193.3 10% 12%;
+  --surface-container: 193.3 10% 16%;
+  --surface-container-high: 193.3 10% 20%;
+  --surface-container-highest: 193.3 10.4% 26.3%;
+  --surface-variant: 154.3 10.4% 26.3%;
+  --surface-tint: 164.4 68.2% 58%;
+  --on-surface: 193.3 29% 93.9%;
+  --on-surface-variant: 152 12.4% 76.3%;
+
+  --primary: 164.4 68.2% 58%;
+  --on-primary: 165 100% 6.3%;
+  --primary-container: 167.4 100% 15.9%;
+  --on-primary-container: 163 93.4% 70.4%;
+  --primary-fixed: 163 93.4% 70.4%;
+  --primary-fixed-dim: 164.4 68.2% 58%;
+  --on-primary-fixed: 165 100% 6.3%;
+  --on-primary-fixed-variant: 167.4 100% 15.9%;
+  --inverse-primary: 167.7 100% 21%;
+
+  --secondary: 2.3 100% 84.5%;
+  --on-secondary: 354.5 100% 12.7%;
+  --secondary-container: 356.1 64.8% 32.4%;
+  --on-secondary-container: 3.1 100% 92.4%;
+  --secondary-fixed: 3.1 100% 92.4%;
+  --secondary-fixed-dim: 2.3 100% 84.5%;
+  --on-secondary-fixed: 354.5 100% 12.7%;
+  --on-secondary-fixed-variant: 356.1 64.8% 32.4%;
+
+  --tertiary: 244.8 100% 87.6%;
+  --on-tertiary: 251.7 100% 20.2%;
+  --tertiary-container: 245.2 44.9% 40.6%;
+  --on-tertiary-container: 247.5 100% 93.7%;
+  --tertiary-fixed: 247.5 100% 93.7%;
+  --tertiary-fixed-dim: 244.8 100% 87.6%;
+  --on-tertiary-fixed: 251.7 100% 20.2%;
+  --on-tertiary-fixed-variant: 245.2 44.9% 40.6%;
+
+  --error: 0 62.8% 30.6%;
+  --on-error: 0 0% 98%;
+  --error-container: 355.9 100% 28.8%;
+  --on-error-container: 5.9 100% 92%;
+
+  --outline: 152 12.4% 60%;
+  --outline-variant: 154.3 10.4% 26.3%;
+  --inverse-surface: 200 69.2% 97.5%;
+  --inverse-on-surface: 193.3 17% 10.4%;
+
+  /* Semantic aliases consumed by the current app */
+  --background: var(--background-base);
+  --foreground: var(--on-background);
+
+  --card: var(--surface-container-low);
+  --card-foreground: var(--on-surface);
+
+  --popover: var(--surface-container);
+  --popover-foreground: var(--on-surface);
+
+  --primary-foreground: var(--on-primary);
+  --secondary-foreground: var(--on-secondary);
+
+  --muted: var(--surface-container-high);
+  --muted-foreground: var(--on-surface-variant);
+
+  --accent: var(--secondary-container);
+  --accent-foreground: var(--on-secondary-container);
+
+  --destructive: var(--error);
+  --destructive-foreground: var(--on-error);
+
+  --border: var(--outline-variant);
+  --input: var(--surface-container-high);
+  --ring: var(--primary);
+
+  /* Visual system tokens for showcase pages */
+  --surface-1: var(--surface-container-low);
+  --surface-2: var(--surface-container);
+  --brand-accent: var(--tertiary-fixed-dim);
+  --brand-success: var(--primary-fixed-dim);
+
+  /* Extra tokens used by the migrated shadcn components */
+  --card-border: var(--outline-variant);
+  --popover-border: var(--outline-variant);
+  --sidebar: var(--surface-container-low);
+  --sidebar-foreground: var(--on-surface);
+  --sidebar-border: var(--outline-variant);
+  --sidebar-ring: var(--primary);
+  --sidebar-accent: var(--secondary-container);
+  --sidebar-accent-foreground: var(--on-secondary-container);
+
+  --chart-1: var(--primary-fixed-dim);
+  --chart-2: var(--secondary-fixed-dim);
+  --chart-3: var(--tertiary-fixed-dim);
+  --chart-4: var(--primary-fixed);
+  --chart-5: var(--error-container);
+
+  /* Border colors expected by template classnames */
+  --primary-border: hsl(var(--primary) / 0.15);
+  --secondary-border: hsl(var(--outline-variant));
+  --muted-border: hsl(var(--outline-variant));
+  --accent-border: hsl(var(--secondary-fixed-dim) / 0.35);
+  --destructive-border: hsl(var(--error-container) / 0.35);
+
+  --button-outline: hsl(var(--outline-variant));
+  --badge-outline: hsl(var(--outline-variant));
+}
+
+/* Theme style presets (used by html[data-theme-style="<preset>"]) */
+:root[data-theme-style="quadratic"] {
+  --background: 246 33% 96%;
+  --foreground: 233 24% 17%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 233 24% 17%;
+  --popover: 0 0% 100%;
+  --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: 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="honey"] {
+  --background: 49 38.1% 91.8%;
+  --foreground: 40 52.9% 27.5%;
+
+  --card: 49 42% 95%;
+  --card-foreground: 40 52.9% 27.5%;
+  --popover: 49 42% 95%;
+  --popover-foreground: 40 52.9% 27.5%;
+
+  --primary: 40 72.8% 68.2%;
+  --primary-foreground: 40 52.9% 18%;
+  --secondary: 63 20.8% 79.2%;
+  --secondary-foreground: 40 52.9% 27.5%;
+  --muted: 49 30% 88%;
+  --muted-foreground: 40 24% 38%;
+  --accent: 63 20.8% 79.2%;
+  --accent-foreground: 40 52.9% 27.5%;
+
+  --border: 52 22% 74%;
+  --input: 52 22% 74%;
+  --ring: 40 72.8% 68.2%;
+
+  --chart-1: 40 72.8% 55%;
+  --chart-2: 63 30% 45%;
+  --chart-3: 173 25% 42%;
+  --chart-4: 18 56% 50%;
+  --chart-5: 240 16% 52%;
+}
+
+.dark[data-theme-style="honey"] {
+  --background: 36 38% 10%;
+  --foreground: 49 30% 88%;
+
+  --card: 34 30% 14%;
+  --card-foreground: 49 30% 88%;
+  --popover: 34 30% 14%;
+  --popover-foreground: 49 30% 88%;
+
+  --primary: 40 72.8% 68.2%;
+  --primary-foreground: 36 38% 10%;
+  --secondary: 38 20% 20%;
+  --secondary-foreground: 49 30% 88%;
+  --muted: 38 18% 18%;
+  --muted-foreground: 49 18% 70%;
+  --accent: 38 18% 18%;
+  --accent-foreground: 49 30% 88%;
+
+  --border: 38 18% 26%;
+  --input: 38 18% 26%;
+  --ring: 40 72.8% 68.2%;
+
+  --chart-1: 40 72.8% 68.2%;
+  --chart-2: 63 35% 58%;
+  --chart-3: 173 30% 56%;
+  --chart-4: 20 56% 64%;
+  --chart-5: 240 22% 70%;
+}
+
+:root[data-theme-style="zen-garden"] {
+  --background: 84 9.8% 90%;
+  --foreground: 225 18.2% 8.6%;
+
+  --card: 84 12% 94%;
+  --card-foreground: 225 18.2% 8.6%;
+  --popover: 84 12% 94%;
+  --popover-foreground: 225 18.2% 8.6%;
+
+  --primary: 173 24.7% 62%;
+  --primary-foreground: 225 18.2% 8.6%;
+  --secondary: 289 32.9% 72%;
+  --secondary-foreground: 225 18.2% 8.6%;
+  --muted: 84 10% 86%;
+  --muted-foreground: 225 10% 36%;
+  --accent: 289 32.9% 72%;
+  --accent-foreground: 225 18.2% 8.6%;
+
+  --border: 84 8% 78%;
+  --input: 84 8% 78%;
+  --ring: 173 24.7% 62%;
+
+  --chart-1: 173 24.7% 48%;
+  --chart-2: 289 32.9% 58%;
+  --chart-3: 40 68% 56%;
+  --chart-4: 220 26% 50%;
+  --chart-5: 0 55% 58%;
+}
+
+.dark[data-theme-style="zen-garden"] {
+  --background: 225 18.2% 8.6%;
+  --foreground: 84 9.8% 90%;
+
+  --card: 225 16% 12%;
+  --card-foreground: 84 9.8% 90%;
+  --popover: 225 16% 12%;
+  --popover-foreground: 84 9.8% 90%;
+
+  --primary: 173 30% 66%;
+  --primary-foreground: 225 18.2% 8.6%;
+  --secondary: 225 12% 18%;
+  --secondary-foreground: 84 9.8% 90%;
+  --muted: 225 10% 15%;
+  --muted-foreground: 84 8% 72%;
+  --accent: 225 10% 15%;
+  --accent-foreground: 84 9.8% 90%;
+
+  --border: 225 10% 24%;
+  --input: 225 10% 24%;
+  --ring: 173 30% 66%;
+
+  --chart-1: 173 30% 66%;
+  --chart-2: 289 36% 70%;
+  --chart-3: 40 68% 64%;
+  --chart-4: 220 30% 70%;
+  --chart-5: 355 65% 68%;
+}
+
+:root[data-theme-style="highlighter"] {
+  --background: 228 23.8% 95.9%;
+  --foreground: 223 18.9% 7.3%;
+
+  --card: 228 24% 98%;
+  --card-foreground: 223 18.9% 7.3%;
+  --popover: 228 24% 98%;
+  --popover-foreground: 223 18.9% 7.3%;
+
+  --primary: 97 70.5% 64.1%;
+  --primary-foreground: 223 18.9% 7.3%;
+  --secondary: 249 35.6% 88.4%;
+  --secondary-foreground: 223 18.9% 7.3%;
+  --muted: 228 20% 92%;
+  --muted-foreground: 223 10% 35%;
+  --accent: 249 35.6% 88.4%;
+  --accent-foreground: 223 18.9% 7.3%;
+
+  --border: 238 20% 84%;
+  --input: 238 20% 84%;
+  --ring: 97 70.5% 64.1%;
+
+  --chart-1: 97 70.5% 48%;
+  --chart-2: 249 45% 56%;
+  --chart-3: 202 72% 54%;
+  --chart-4: 339 78% 58%;
+  --chart-5: 40 78% 58%;
+}
+
+.dark[data-theme-style="highlighter"] {
+  --background: 223 18.9% 7.3%;
+  --foreground: 228 23.8% 95.9%;
+
+  --card: 223 16% 11%;
+  --card-foreground: 228 23.8% 95.9%;
+  --popover: 223 16% 11%;
+  --popover-foreground: 228 23.8% 95.9%;
+
+  --primary: 97 74% 66%;
+  --primary-foreground: 223 18.9% 7.3%;
+  --secondary: 223 12% 18%;
+  --secondary-foreground: 228 23.8% 95.9%;
+  --muted: 223 10% 15%;
+  --muted-foreground: 228 14% 72%;
+  --accent: 223 10% 15%;
+  --accent-foreground: 228 23.8% 95.9%;
+
+  --border: 223 10% 24%;
+  --input: 223 10% 24%;
+  --ring: 97 74% 66%;
+
+  --chart-1: 97 74% 66%;
+  --chart-2: 249 50% 72%;
+  --chart-3: 202 78% 70%;
+  --chart-4: 339 80% 70%;
+  --chart-5: 40 78% 68%;
+}

package/template-hono/drizzle.config.ts

@@ -1,45 +1,12 @@
 import { defineConfig } from "drizzle-kit";
-import fs from "node:fs";
-import path from "node:path";
-import { ensureDatabaseUrl } from "./server/database-path";
+import { requireDatabaseUrl } from "./server/env";
 
-function tryLoadEnvFile(file: string) {
-  const filepath = path.resolve(process.cwd(), file);
-  if (!fs.existsSync(filepath)) return;
-
-  const content = fs.readFileSync(filepath, "utf8");
-
-  for (const rawLine of content.split(/\r?\n/u)) {
-    const line = rawLine.trim();
-    if (!line || line.startsWith("#")) continue;
-
-    const match = /^([A-Za-z_][A-Za-z0-9_]*)=(.*)$/u.exec(line);
-    if (!match) continue;
-
-    const key = match[1];
-    let value = match[2] ?? "";
-
-    if (
-      (value.startsWith('"') && value.endsWith('"')) ||
-      (value.startsWith("'") && value.endsWith("'"))
-    ) {
-      value = value.slice(1, -1);
-    }
-
-    if (process.env[key] === undefined) {
-      process.env[key] = value;
-    }
-  }
-}
-
-tryLoadEnvFile(".env.local");
-tryLoadEnvFile(".env");
-const databaseUrl = ensureDatabaseUrl();
+const databaseUrl = requireDatabaseUrl();
 
 export default defineConfig({
   out: "./migrations",
   schema: "./shared/schema.ts",
-  dialect: "sqlite",
+  dialect: "postgresql",
   dbCredentials: {
     url: databaseUrl,
   },

package/template-hono/package.json

@@ -13,9 +13,10 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@ai-sdk/openai": "^2.0.102",
+    "@ai-sdk/openai-compatible": "^1.0.13",
     "@hono/node-server": "^1.19.9",
     "@hono/zod-validator": "^0.7.6",
-    "@libsql/client": "^0.17.0",
     "@radix-ui/react-accordion": "^1.2.4",
     "@radix-ui/react-alert-dialog": "^1.1.7",
     "@radix-ui/react-aspect-ratio": "^1.1.3",
@@ -44,6 +45,7 @@
     "@radix-ui/react-toggle-group": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.2.0",
     "@tanstack/react-query": "^5.60.5",
+    "ai": "^5.0.172",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -55,6 +57,7 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^0.453.0",
     "next-themes": "^0.4.6",
+    "pg": "^8.20.0",
     "react": "19.2.3",
     "react-day-picker": "^9.13.0",
     "react-dom": "19.2.3",
@@ -70,6 +73,7 @@
     "@hono/vite-dev-server": "^0.25.0",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
+    "@types/pg": "^8.20.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5.1.0",