@tanstack/create 0.49.1

package/dist/frameworks/react/add-ons/convex/assets/src/routes/demo/convex.tsx

@@ -0,0 +1,172 @@
+import { useCallback, useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { useQuery, useMutation } from 'convex/react'
+import { Trash2, Plus, Check, Circle } from 'lucide-react'
+
+import { api } from '../../../convex/_generated/api'
+import { Id } from '../../../convex/_generated/dataModel'
+
+export const Route = createFileRoute('/demo/convex')({
+  ssr: false,
+  component: ConvexTodos,
+})
+
+function ConvexTodos() {
+  const todos = useQuery(api.todos.list)
+  const addTodo = useMutation(api.todos.add)
+  const toggleTodo = useMutation(api.todos.toggle)
+  const removeTodo = useMutation(api.todos.remove)
+
+  const [newTodo, setNewTodo] = useState('')
+
+  const handleAddTodo = useCallback(async () => {
+    if (newTodo.trim()) {
+      await addTodo({ text: newTodo.trim() })
+      setNewTodo('')
+    }
+  }, [addTodo, newTodo])
+
+  const handleToggleTodo = useCallback(
+    async (id: Id<'todos'>) => {
+      await toggleTodo({ id })
+    },
+    [toggleTodo],
+  )
+
+  const handleRemoveTodo = useCallback(
+    async (id: Id<'todos'>) => {
+      await removeTodo({ id })
+    },
+    [removeTodo],
+  )
+
+  const completedCount = todos?.filter((todo) => todo.completed).length || 0
+  const totalCount = todos?.length || 0
+
+  return (
+    <div
+      className="min-h-screen flex items-center justify-center p-4"
+      style={{
+        background:
+          'linear-gradient(135deg, #667a56 0%, #8fbc8f 25%, #90ee90 50%, #98fb98 75%, #f0fff0 100%)',
+      }}
+    >
+      <div className="w-full max-w-2xl">
+        {/* Header Card */}
+        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl border border-green-200/50 p-8 mb-6">
+          <div className="text-center">
+            <h1 className="text-4xl font-bold text-green-800 mb-2">
+              Convex Todos
+            </h1>
+            <p className="text-green-600 text-lg">Powered by real-time sync</p>
+            {totalCount > 0 && (
+              <div className="mt-4 flex justify-center space-x-6 text-sm">
+                <span className="text-green-700 font-medium">
+                  {completedCount} completed
+                </span>
+                <span className="text-gray-600">
+                  {totalCount - completedCount} remaining
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Add Todo Card */}
+        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 p-6 mb-6">
+          <div className="flex gap-3">
+            <input
+              type="text"
+              value={newTodo}
+              onChange={(e) => setNewTodo(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleAddTodo()
+                }
+              }}
+              placeholder="What needs to be done?"
+              className="flex-1 px-4 py-3 rounded-xl border-2 border-green-200 focus:border-green-400 focus:outline-none text-gray-800 placeholder-gray-500 bg-white/80 transition-colors"
+            />
+            <button
+              onClick={handleAddTodo}
+              disabled={!newTodo.trim()}
+              className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 disabled:from-gray-300 disabled:to-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl"
+            >
+              <Plus size={20} />
+              Add
+            </button>
+          </div>
+        </div>
+
+        {/* Todos List */}
+        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 overflow-hidden">
+          {!todos ? (
+            <div className="p-8 text-center">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500 mx-auto mb-4"></div>
+              <p className="text-green-600">Loading todos...</p>
+            </div>
+          ) : todos.length === 0 ? (
+            <div className="p-12 text-center">
+              <Circle size={48} className="text-green-300 mx-auto mb-4" />
+              <h3 className="text-xl font-semibold text-green-800 mb-2">
+                No todos yet
+              </h3>
+              <p className="text-green-600">
+                Add your first todo above to get started!
+              </p>
+            </div>
+          ) : (
+            <div className="divide-y divide-green-100">
+              {todos.map((todo, index) => (
+                <div
+                  key={todo._id}
+                  className={`p-4 flex items-center gap-4 hover:bg-green-50/50 transition-colors ${
+                    todo.completed ? 'opacity-75' : ''
+                  }`}
+                  style={{
+                    animationDelay: `${index * 50}ms`,
+                  }}
+                >
+                  <button
+                    onClick={() => handleToggleTodo(todo._id)}
+                    className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${
+                      todo.completed
+                        ? 'bg-green-500 border-green-500 text-white'
+                        : 'border-green-300 hover:border-green-400 text-transparent hover:text-green-400'
+                    }`}
+                  >
+                    <Check size={14} />
+                  </button>
+
+                  <span
+                    className={`flex-1 text-lg transition-all duration-200 ${
+                      todo.completed
+                        ? 'line-through text-gray-500'
+                        : 'text-gray-800'
+                    }`}
+                  >
+                    {todo.text}
+                  </span>
+
+                  <button
+                    onClick={() => handleRemoveTodo(todo._id)}
+                    className="flex-shrink-0 p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                  >
+                    <Trash2 size={18} />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="text-center mt-6">
+          <p className="text-green-700/80 text-sm">
+            Built with Convex • Real-time updates • Always in sync
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/frameworks/react/add-ons/convex/info.json

@@ -0,0 +1,27 @@
+{
+  "name": "Convex",
+  "description": "Add the Convex database to your application.",
+  "link": "https://convex.dev",
+  "phase": "add-on",
+  "type": "add-on",
+  "category": "database",
+  "exclusive": ["database", "orm"],
+  "color": "#EE342F",
+  "priority": 140,
+  "modes": ["file-router"],
+  "routes": [
+    {
+      "url": "/demo/convex",
+      "name": "Convex",
+      "path": "src/routes/demo.convex.tsx",
+      "jsName": "ConvexDemo"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "provider",
+      "path": "src/integrations/convex/provider.tsx",
+      "jsName": "ConvexProvider"
+    }
+  ]
+}

package/dist/frameworks/react/add-ons/convex/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "@convex-dev/react-query": "0.1.0",
+    "convex": "^1.27.3",
+    "lucide-react": "^0.561.0"
+  }
+}

package/dist/frameworks/react/add-ons/convex/small-logo.svg

@@ -0,0 +1,5 @@
+<svg width="184" height="188" viewBox="0 0 184 188" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M108.092 130.021C126.258 128.003 143.385 118.323 152.815 102.167C148.349 142.128 104.653 167.385 68.9858 151.878C65.6992 150.453 62.8702 148.082 60.9288 145.034C52.9134 132.448 50.2786 116.433 54.0644 101.899C64.881 120.567 86.8748 132.01 108.092 130.021Z" fill="#F3B01C"/>
+<path d="M53.4012 90.1735C46.0375 107.191 45.7186 127.114 54.7463 143.51C22.9759 119.608 23.3226 68.4578 54.358 44.7949C57.2286 42.6078 60.64 41.3097 64.2178 41.1121C78.9312 40.336 93.8804 46.0225 104.364 56.6193C83.0637 56.831 62.318 70.4756 53.4012 90.1735Z" fill="#8D2676"/>
+<path d="M114.637 61.8552C103.89 46.8701 87.0686 36.6684 68.6387 36.358C104.264 20.1876 148.085 46.4045 152.856 85.1654C153.3 88.7635 152.717 92.4322 151.122 95.6775C144.466 109.195 132.124 119.679 117.702 123.559C128.269 103.96 126.965 80.0151 114.637 61.8552Z" fill="#EE342F"/>
+</svg>

package/dist/frameworks/react/add-ons/db/assets/src/components/demo.chat-area.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react'
+
+import { useChat, useMessages } from '@/hooks/demo.useChat'
+
+import Messages from './demo.messages'
+
+export default function ChatArea() {
+  const { sendMessage } = useChat()
+
+  const messages = useMessages()
+
+  const [message, setMessage] = useState('')
+  const [user, setUser] = useState('Alice')
+
+  const postMessage = () => {
+    if (message.trim().length) {
+      sendMessage(message, user)
+      setMessage('')
+    }
+  }
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      postMessage()
+    }
+  }
+
+  return (
+    <>
+      <div className="px-4 py-6 space-y-4">
+        <Messages messages={messages} user={user} />
+      </div>
+
+      <div className="bg-white border-t border-gray-200 px-4 py-4">
+        <div className="flex items-center space-x-3">
+          <select
+            value={user}
+            onChange={(e) => setUser(e.target.value)}
+            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          >
+            <option value="Alice">Alice</option>
+            <option value="Bob">Bob</option>
+          </select>
+
+          <div className="flex-1 relative">
+            <input
+              type="text"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              onKeyDown={handleKeyPress}
+              placeholder="Type a message..."
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+          </div>
+
+          <button
+            onClick={postMessage}
+            disabled={message.trim() === ''}
+            className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}

package/dist/frameworks/react/add-ons/db/assets/src/components/demo.messages.tsx

@@ -0,0 +1,68 @@
+import type { Message } from '@/db-collections'
+
+export const getAvatarColor = (username: string) => {
+  const colors = [
+    'bg-blue-500',
+    'bg-green-500',
+    'bg-purple-500',
+    'bg-pink-500',
+    'bg-indigo-500',
+    'bg-red-500',
+    'bg-yellow-500',
+    'bg-teal-500',
+  ]
+  const index = username
+    .split('')
+    .reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  return colors[index % colors.length]
+}
+
+export default function Messages({
+  messages,
+  user,
+}: {
+  messages: Message[]
+  user: string
+}) {
+  return (
+    <>
+      {messages.map((msg: Message) => (
+        <div
+          key={msg.id}
+          className={`flex ${
+            msg.user === user ? 'justify-end' : 'justify-start'
+          }`}
+        >
+          <div
+            className={`flex items-start space-x-3 max-w-xs lg:max-w-md ${
+              msg.user === user ? 'flex-row-reverse space-x-reverse' : ''
+            }`}
+          >
+            <div
+              className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-medium ${getAvatarColor(
+                msg.user,
+              )}`}
+            >
+              {msg.user.charAt(0).toUpperCase()}
+            </div>
+
+            <div
+              className={`px-4 py-2 rounded-2xl ${
+                msg.user === user
+                  ? 'bg-blue-500 text-white rounded-br-md'
+                  : 'bg-white text-gray-800 border border-gray-200 rounded-bl-md'
+              }`}
+            >
+              {msg.user !== user && (
+                <p className="text-xs text-gray-500 mb-1 font-medium">
+                  {msg.user}
+                </p>
+              )}
+              <p className="text-sm">{msg.text}</p>
+            </div>
+          </div>
+        </div>
+      ))}
+    </>
+  )
+}

package/dist/frameworks/react/add-ons/db/assets/src/db-collections/index.js

@@ -0,0 +1,11 @@
+import { createCollection, localOnlyCollectionOptions, } from "@tanstack/react-db";
+import { z } from "zod";
+const MessageSchema = z.object({
+    id: z.number(),
+    text: z.string(),
+    user: z.string(),
+});
+export const messagesCollection = createCollection(localOnlyCollectionOptions({
+    getKey: (message) => message.id,
+    schema: MessageSchema,
+}));

package/dist/frameworks/react/add-ons/db/assets/src/hooks/demo.useChat.js

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'react';
+import { useLiveQuery } from '@tanstack/react-db';
+import { messagesCollection } from '@/db-collections';
+function useStreamConnection(url, collection) {
+    const loadedRef = useRef(false);
+    useEffect(() => {
+        const fetchData = async () => {
+            if (loadedRef.current)
+                return;
+            loadedRef.current = true;
+            const response = await fetch(url);
+            const reader = response.body?.getReader();
+            if (!reader) {
+                return;
+            }
+            const decoder = new TextDecoder();
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                for (const chunk of decoder
+                    .decode(value, { stream: true })
+                    .split('\n')
+                    .filter((chunk) => chunk.length > 0)) {
+                    collection.insert(JSON.parse(chunk));
+                }
+            }
+        };
+        fetchData();
+    }, []);
+}
+export function useChat() {
+    useStreamConnection('/demo/db-chat-api', messagesCollection);
+    const sendMessage = (message, user) => {
+        fetch('/demo/db-chat-api', {
+            method: 'POST',
+            body: JSON.stringify({ text: message.trim(), user: user.trim() }),
+        });
+    };
+    return { sendMessage };
+}
+export function useMessages() {
+    const { data: messages } = useLiveQuery((q) => q.from({ message: messagesCollection }).select(({ message }) => ({
+        ...message,
+    })));
+    return messages;
+}

package/dist/frameworks/react/add-ons/db/assets/src/routes/demo/db-chat-api.js

@@ -0,0 +1,68 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { json } from '@tanstack/react-start';
+import { createCollection, localOnlyCollectionOptions, } from '@tanstack/react-db';
+import { z } from 'zod';
+const IncomingMessageSchema = z.object({
+    user: z.string(),
+    text: z.string(),
+});
+const MessageSchema = IncomingMessageSchema.extend({
+    id: z.number(),
+});
+export const serverMessagesCollection = createCollection(localOnlyCollectionOptions({
+    getKey: (message) => message.id,
+    schema: MessageSchema,
+}));
+let id = 0;
+serverMessagesCollection.insert({
+    id: id++,
+    user: 'Alice',
+    text: 'Hello, how are you?',
+});
+serverMessagesCollection.insert({
+    id: id++,
+    user: 'Bob',
+    text: "I'm fine, thank you!",
+});
+const sendMessage = (message) => {
+    serverMessagesCollection.insert({
+        id: id++,
+        user: message.user,
+        text: message.text,
+    });
+};
+export const Route = createFileRoute('/demo/db-chat-api')({
+    server: {
+        handlers: {
+            GET: () => {
+                const stream = new ReadableStream({
+                    start(controller) {
+                        for (const [_id, message] of serverMessagesCollection.state) {
+                            controller.enqueue(JSON.stringify(message) + '\n');
+                        }
+                        serverMessagesCollection.subscribeChanges((changes) => {
+                            for (const change of changes) {
+                                if (change.type === 'insert') {
+                                    controller.enqueue(JSON.stringify(change.value) + '\n');
+                                }
+                            }
+                        });
+                    },
+                });
+                return new Response(stream, {
+                    headers: {
+                        'Content-Type': 'application/x-ndjson',
+                    },
+                });
+            },
+            POST: async ({ request }) => {
+                const message = IncomingMessageSchema.safeParse(await request.json());
+                if (!message.success) {
+                    return new Response(message.error.message, { status: 400 });
+                }
+                sendMessage(message.data);
+                return json(message.data);
+            },
+        },
+    },
+});

package/dist/frameworks/react/add-ons/db/assets/src/routes/demo/db-chat.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import ChatArea from '@/components/demo.chat-area'
+
+export const Route = createFileRoute('/demo/db-chat')({
+  component: App,
+})
+
+function App() {
+  return (
+    <div className="flex flex-col h-screen bg-gray-50">
+      <ChatArea />
+    </div>
+  )
+}

package/dist/frameworks/react/add-ons/db/info.json

@@ -0,0 +1,21 @@
+{
+  "name": "DB",
+  "description": "TanStack DB",
+  "phase": "add-on",
+  "type": "add-on",
+  "category": "tanstack",
+  "color": "#F97316",
+  "priority": 48,
+  "modes": ["file-router"],
+  "link": "https://tanstack.com/db/latest",
+  "dependsOn": ["tanstack-query", "start"],
+  "routes": [
+    {
+      "icon": "Database",
+      "url": "/demo/db-chat",
+      "name": "DB Chat",
+      "path": "src/routes/demo.db-chat.tsx",
+      "jsName": "DBChatDemo"
+    }
+  ]
+}

package/dist/frameworks/react/add-ons/db/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "@tanstack/query-db-collection": "^1.0.8",
+    "@tanstack/react-db": "^0.1.1",
+    "zod": "^4.0.14"
+  }
+}

package/dist/frameworks/react/add-ons/db/small-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 633 633"><defs><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="71.65%"><stop offset="0%" stop-color="#6BDAFF"/><stop offset="31.922%" stop-color="#F9FFB5"/><stop offset="70.627%" stop-color="#FFA770"/><stop offset="100%" stop-color="#FF7373"/></linearGradient><linearGradient id="d" x1="43.996%" x2="53.441%" y1="8.54%" y2="93.872%"><stop offset="0%" stop-color="#673800"/><stop offset="100%" stop-color="#B65E00"/></linearGradient><linearGradient id="e" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="f" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="g" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="h" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="i" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="j" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#2F8A00"/><stop offset="100%" stop-color="#90FF57"/></linearGradient><linearGradient id="k" x1="92.9%" x2="8.641%" y1="45.768%" y2="54.892%"><stop offset="0%" stop-color="#EE2700"/><stop offset="100%" stop-color="#FF008E"/></linearGradient><linearGradient id="l" x1="61.109%" x2="43.717%" y1="3.633%" y2="43.072%"><stop offset="0%" stop-color="#FFF400"/><stop offset="100%" stop-color="#3C8700"/></linearGradient><linearGradient id="m" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFDF00"/><stop offset="100%" stop-color="#FF9D00"/></linearGradient><linearGradient id="n" x1="127.279%" x2="0%" y1="49.778%" y2="50.222%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="o" x1="127.279%" x2="0%" y1="47.531%" y2="52.469%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="p" x1="127.279%" x2="0%" y1="46.195%" y2="53.805%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="q" x1="127.279%" x2="0%" y1="35.33%" y2="64.67%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="r" x1="127.279%" x2="0%" y1="4.875%" y2="95.125%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="s" x1="78.334%" x2="31.668%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="t" x1="57.913%" x2="44.88%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><linearGradient id="u" x1="50.495%" x2="49.68%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFA400"/><stop offset="100%" stop-color="#FF5E00"/></linearGradient><circle id="a" cx="308.5" cy="308.5" r="308.5"/><circle id="v" cx="307.5" cy="308.5" r="316.5"/></defs><g fill="none" fill-rule="evenodd" transform="translate(9 8)"><mask id="c" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a" fill="url(#b)"/><ellipse cx="81.5" cy="602.5" fill="#015064" stroke="#00CFE2" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="602.5" fill="#015064" stroke="#00CFE2" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="81.5" cy="640.5" fill="#015064" stroke="#00A8B8" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="640.5" fill="#015064" stroke="#00A8B8" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="81.5" cy="676.5" fill="#015064" stroke="#007782" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><ellipse cx="535.5" cy="676.5" fill="#015064" stroke="#007782" stroke-width="25" mask="url(#c)" rx="214.5" ry="185.968"/><g mask="url(#c)"><path fill="url(#d)" stroke="#6E3A00" stroke-width="6.088" d="M98.318 88.007c7.691 37.104 16.643 72.442 26.856 106.013 10.212 33.571 25.57 68.934 46.07 106.088l-51.903 11.67c-10.057-60.01-17.232-99.172-21.525-117.487-4.293-18.315-10.989-51.434-20.089-99.357l20.591-6.927" transform="scale(-1 1) rotate(25 -300.37 -553.013)"/><g stroke="#2F8A00"><path fill="url(#e)" stroke-width="9.343" d="M108.544 66.538s-13.54-21.305-37.417-27.785c-15.917-4.321-33.933.31-54.048 13.892C33.464 65.975 47.24 73.52 58.405 75.28c16.749 2.64 50.14-8.74 50.14-8.74Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#f)" stroke-width="9.343" d="M108.544 67.138s-47.187-5.997-81.077 19.936C4.873 104.362-3.782 137.794 1.502 187.369c28.42-29.22 48.758-50.836 61.016-64.846 18.387-21.016 46.026-55.385 46.026-55.385Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#g)" stroke-width="9.343" d="M108.544 66.538c-1.96-21.705 3.98-38.018 17.82-48.94C140.203 6.674 154.85.808 170.303 0c-4.865 21.527-12.373 36.314-22.524 44.361-10.151 8.048-23.23 15.44-39.236 22.177Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#h)" stroke-width="9.343" d="M108.544 67.138c29.838-31.486 61.061-42.776 93.669-33.869C234.82 42.176 253.749 60.785 259 89.096c-34.898-3.657-59.974-6.343-75.228-8.058-15.254-1.716-40.33-6.349-75.228-13.9Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#i)" stroke-width="9.343" d="M108.544 67.138c34.868-9.381 64.503-3.658 88.905 17.17 24.402 20.829 39.656 46.686 45.762 77.571-39.626-7.574-68.4-20.115-86.322-37.624a395.051 395.051 0 0 1-48.345-57.117Z" transform="rotate(1 -6061.691 5926.397)"/><path fill="url(#j)" stroke-width="9.343" d="M108.544 67.138C76.206 82.6 57.608 105.366 52.75 135.436c-4.858 30.07-.292 62.89 13.698 98.462 24.873-41.418 38.905-71.368 42.096-89.849 3.191-18.48 3.191-44.118 0-76.91Z" transform="rotate(1 -6061.691 5926.397)"/><path stroke-linecap="round" stroke-width="5.91" d="M211.284 173.477c-13.851 21.992-23.291 42.022-28.32 60.093-5.03 18.071-8.175 33.143-9.436 45.216"/><path stroke-linecap="round" stroke-width="5.91" d="M209.814 176.884c-23.982 2.565-42.792 10.469-56.428 23.714-13.639 13.245-23.483 26.136-29.536 38.674M219.045 167.299c29.028-7.723 50.972-10.173 65.831-7.352 14.859 2.822 26.807 7.659 35.842 14.51M211.31 172.618c20.29 9.106 38.353 19.052 54.186 29.837 15.833 10.786 27.714 20.99 35.643 30.617"/></g><path stroke="#830305" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="6.937" d="m409.379 398.157-23.176 18.556M328.04 375.516l-22.313 28.398M312.904 353.698l53.18 59.816"/><path fill="url(#k)" d="M67.585 27.463H5.68C1.893 28.148 0 30.38 0 34.16c0 3.78 1.893 6.211 5.68 7.293h67.17l41.751-30.356c2.488-2.646 2.794-5.315.92-8.006s-4.6-3.626-8.177-2.803l-39.76 27.174Z" transform="scale(-1 1) rotate(-9 2092.128 2856.854)"/><path fill="#D8D8D8" stroke="#FFF" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="4.414" d="m402.861 391.51.471-4.088M382.21 388.752l.472-4.087M361.546 385.404l.485-3.845M337.59 371.883l2.56-2.498M324.276 359.567l2.56-2.497"/></g><ellipse cx="308.5" cy="720.5" fill="url(#l)" mask="url(#c)" rx="266" ry="316.5"/><ellipse cx="308.5" cy="720.5" stroke="#6DA300" stroke-opacity=".502" stroke-width="26" mask="url(#c)" rx="253" ry="303.5"/><g mask="url(#c)"><g transform="translate(389 -32)"><circle cx="168.5" cy="113.5" r="113.5" fill="url(#m)"/><circle cx="168.5" cy="113.5" r="106" stroke="#FFC900" stroke-opacity=".529" stroke-width="15"/><path stroke="url(#n)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M30 113H0"/><path stroke="url(#o)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M33.5 79.5 7 74"/><path stroke="url(#p)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m34 146-29 8"/><path stroke="url(#q)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m45 177-24 13"/><path stroke="url(#r)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m67 204-20 19"/><path stroke="url(#s)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m94.373 227-13.834 22.847"/><path stroke="url(#t)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="M127.5 243.5 120 268"/><path stroke="url(#u)" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="12" d="m167.5 252.5.5 24.5"/></g></g><circle cx="307.5" cy="308.5" r="304" stroke="#000" stroke-width="25"/></g></svg>

package/dist/frameworks/react/add-ons/drizzle/assets/_dot_env.local.append.ejs

@@ -0,0 +1,7 @@
+<% if (addOnOption.drizzle.database === 'postgresql') { %>
+# Database URL for PostgreSQL
+DATABASE_URL="postgresql://username:password@localhost:5432/mydb"<% } else if (addOnOption.drizzle.database === 'mysql') { %>
+# Database URL for MySQL
+DATABASE_URL="mysql://username:password@localhost:3306/mydb"<% } else if (addOnOption.drizzle.database === 'sqlite') { %>
+# Database URL for SQLite
+DATABASE_URL="dev.db"<% } %>

package/dist/frameworks/react/add-ons/drizzle/assets/drizzle.config.ts.ejs

@@ -0,0 +1,13 @@
+import { config } from "dotenv";
+import { defineConfig } from 'drizzle-kit';
+
+config({ path: ['.env.local', '.env'] });
+
+export default defineConfig({
+  out: "./drizzle",
+  schema: "./src/db/schema.ts",
+  dialect: '<%= addOnOption.drizzle.database %>',
+  dbCredentials: {
+    url: process.env.DATABASE_URL,
+  },
+});

package/dist/frameworks/react/add-ons/drizzle/assets/public/drizzle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" fill="none" viewBox="0 0 160 160"><rect width="9.631" height="40.852" fill="#C5F74F" rx="4.816" transform="matrix(.87303 .48767 -.49721 .86763 43.48 67.304)"/><rect width="9.631" height="40.852" fill="#C5F74F" rx="4.816" transform="matrix(.87303 .48767 -.49721 .86763 76.94 46.534)"/><rect width="9.631" height="40.852" fill="#C5F74F" rx="4.816" transform="matrix(.87303 .48767 -.49721 .86763 128.424 46.535)"/><rect width="9.631" height="40.852" fill="#C5F74F" rx="4.816" transform="matrix(.87303 .48767 -.49721 .86763 94.957 67.304)"/></svg>

package/dist/frameworks/react/add-ons/drizzle/assets/src/db/index.ts.ejs

@@ -0,0 +1,10 @@
+import { drizzle } from <% if (addOnOption.drizzle.database === 'postgresql') { %>
+'drizzle-orm/node-postgres';
+<% } else if (addOnOption.drizzle.database === 'mysql') {%>
+'drizzle-orm/mysql2';
+<% } else if (addOnOption.drizzle.database === 'sqlite') {%>
+'drizzle-orm/better-sqlite3';
+<% } %>
+import * as schema from './schema.ts'
+
+export const db = drizzle(process.env.DATABASE_URL!, { schema<% if (addOnOption.drizzle.database === 'mysql') {%>, mode: 'default'<% } %>});

package/dist/frameworks/react/add-ons/drizzle/assets/src/db/schema.ts.ejs

@@ -0,0 +1,32 @@
+<% if (addOnOption.drizzle.database === 'postgresql') { %>
+import { pgTable, serial, text, timestamp } from
+'drizzle-orm/pg-core';
+
+export const todos = pgTable('todos', {
+  id: serial().primaryKey(),
+  title: text().notNull(),
+  createdAt: timestamp('created_at').defaultNow(),
+});
+<% } else if (addOnOption.drizzle.database === 'mysql') {
+%>
+import { mysqlTable, int, text, timestamp } from
+'drizzle-orm/mysql-core';
+
+export const todos = mysqlTable('todos', {
+  id: int().primaryKey().autoincrement(),
+  title: text().notNull(),
+  createdAt: timestamp('created_at', { mode: 'date' }).defaultNow(),
+});
+<% } else if (addOnOption.drizzle.database === 'sqlite') {
+%>
+import { sqliteTable, integer, text } from
+'drizzle-orm/sqlite-core';
+import { sql } from 'drizzle-orm';
+
+export const todos = sqliteTable('todos', {
+  id: integer({ mode: 'number' }).primaryKey({
+autoIncrement: true }),
+  title: text().notNull(),
+  createdAt: integer('created_at', { mode: 'timestamp' }).default(sql`(unixepoch())`),
+});
+<% } %>