create-next-imagicma 0.1.13 → 0.1.15

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

@@ -1,427 +1,11 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");
 @import "tailwindcss";
+@import "./theme/default-theme.css";
 @config "../../tailwind.config.mjs";
 
 .backdrop {
   display: none;
 }
 
-: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;
-
-  /* Core theme tokens (HSL triples) */
-  --background: 0 0% 100%;
-  --foreground: 240 10% 3.9%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 240 10% 3.9%;
-
-  --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 3.9%;
-
-  --primary: 240 5.9% 10%;
-  --primary-foreground: 0 0% 98%;
-
-  --secondary: 240 4.8% 95.9%;
-  --secondary-foreground: 240 5.9% 10%;
-
-  --muted: 240 4.8% 95.9%;
-  --muted-foreground: 240 3.8% 46.1%;
-
-  --accent: 240 4.8% 95.9%;
-  --accent-foreground: 240 5.9% 10%;
-
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-
-  --border: 240 5.9% 90%;
-  --input: 240 5.9% 90%;
-  --ring: 240 5.9% 10%;
-
-  --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);
-  --popover-border: var(--border);
-  --sidebar: var(--background);
-  --sidebar-foreground: var(--foreground);
-  --sidebar-border: var(--border);
-  --sidebar-ring: var(--ring);
-
-  --chart-1: 220 70% 50%;
-  --chart-2: 160 60% 45%;
-  --chart-3: 30 80% 55%;
-  --chart-4: 280 65% 60%;
-  --chart-5: 340 75% 55%;
-
-  /* Border colors expected by template classnames */
-  --primary-border: hsl(var(--primary) / 0.18);
-  --secondary-border: hsl(var(--border));
-  --muted-border: hsl(var(--border));
-  --accent-border: hsl(var(--border));
-  --destructive-border: hsl(var(--destructive) / 0.25);
-
-  --button-outline: hsl(var(--border));
-  --badge-outline: hsl(var(--border));
-}
-
-.dark {
-  --background: 240 10% 3.9%;
-  --foreground: 0 0% 98%;
-
-  --card: 240 10% 3.9%;
-  --card-foreground: 0 0% 98%;
-
-  --popover: 240 10% 3.9%;
-  --popover-foreground: 0 0% 98%;
-
-  --primary: 0 0% 98%;
-  --primary-foreground: 240 5.9% 10%;
-
-  --secondary: 240 3.7% 15.9%;
-  --secondary-foreground: 0 0% 98%;
-
-  --muted: 240 3.7% 15.9%;
-  --muted-foreground: 240 5% 64.9%;
-
-  --accent: 240 3.7% 15.9%;
-  --accent-foreground: 0 0% 98%;
-
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-
-  --border: 240 3.7% 15.9%;
-  --input: 240 3.7% 15.9%;
-  --ring: 240 4.9% 83.9%;
-
-  --card-border: var(--border);
-  --popover-border: var(--border);
-  --sidebar: var(--background);
-  --sidebar-foreground: var(--foreground);
-  --sidebar-border: var(--border);
-  --sidebar-ring: var(--ring);
-
-  --primary-border: hsl(var(--primary) / 0.15);
-  --secondary-border: hsl(var(--border));
-  --muted-border: hsl(var(--border));
-  --accent-border: hsl(var(--border));
-  --destructive-border: hsl(var(--destructive) / 0.35);
-
-  --button-outline: hsl(var(--border));
-  --badge-outline: hsl(var(--border));
-}
-
-/* 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="nomad"] {
-  --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: 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"] {
-  --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%;
-}
-
 @layer base {
   * {
     border-color: hsl(var(--border));

package/template-hono/client/src/lib/ai-ui-stream.ts

@@ -0,0 +1,64 @@
+export type AiUiStreamPart =
+  | { type: "start" | "start-step" | "finish-step" | "finish"; [key: string]: unknown }
+  | { type: "text-start"; id?: string; [key: string]: unknown }
+  | { type: "text-delta"; id?: string; delta: string; [key: string]: unknown }
+  | { type: "text-end"; id?: string; [key: string]: unknown }
+  | { type: "error"; errorText?: string; [key: string]: unknown };
+
+export async function readAiUiMessageStream(
+  stream: ReadableStream<Uint8Array>,
+  options?: {
+    onPart?: (part: AiUiStreamPart) => void;
+    onTextDelta?: (delta: string, fullText: string) => void;
+  },
+) {
+  const reader = stream.getReader();
+  const decoder = new TextDecoder();
+  let buffer = "";
+  let text = "";
+
+  const consumeEvent = (eventText: string) => {
+    const dataLines = eventText
+      .split("\n")
+      .map((line) => line.trim())
+      .filter((line) => line.startsWith("data:"))
+      .map((line) => line.slice(5).trim());
+
+    if (dataLines.length === 0) return;
+
+    const payload = dataLines.join("\n");
+    if (!payload || payload === "[DONE]") return;
+
+    const part = JSON.parse(payload) as AiUiStreamPart;
+    options?.onPart?.(part);
+
+    if (part.type === "error") {
+      throw new Error(part.errorText || "AI stream failed");
+    }
+
+    if (part.type === "text-delta") {
+      text += part.delta;
+      options?.onTextDelta?.(part.delta, text);
+    }
+  };
+
+  while (true) {
+    const { value, done } = await reader.read();
+    if (value) {
+      buffer += decoder.decode(value, { stream: true });
+      const events = buffer.split("\n\n");
+      buffer = events.pop() ?? "";
+      for (const eventText of events) {
+        consumeEvent(eventText);
+      }
+    }
+
+    if (done) break;
+  }
+
+  if (buffer.trim()) {
+    consumeEvent(buffer);
+  }
+
+  return text;
+}

package/template-hono/client/src/providers.tsx

@@ -9,7 +9,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
   const [queryClient] = React.useState(() => makeQueryClient());
 
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <ThemeProvider attribute="class" defaultTheme="light">
       <QueryClientProvider client={queryClient}>
         <TooltipProvider>
           <Toaster />