// Generated by scripts/generate-manifest.mjs. Do not edit by hand.
import type { AddOnCompiled } from '../../../../../types.js'

type TemplateRecord = Record<string, any>
type TemplateAddOn = TemplateRecord & {
  integrations?: Array<TemplateRecord>
  routes?: Array<TemplateRecord>
}

type TemplateRenderContext = {
  [key: string]: any
  packageManager: any
  projectName: any
  typescript: any
  tailwind: any
  blank: any
  js: any
  jsx: any
  fileRouter: any
  codeRouter: any
  routerOnly: any
  includeExamples: any
  addOnEnabled: Record<string, any>
  addOnOption: Record<string, any>
  addOns: Array<TemplateAddOn>
  integrations: Array<TemplateRecord>
  routes: Array<TemplateRecord>
  getPackageManagerAddScript: (...args: Array<any>) => string
  getPackageManagerRunScript: (...args: Array<any>) => string
  getPackageManagerExecuteScript: (...args: Array<any>) => string
  relativePath: (...args: Array<any>) => string
  integrationImportContent: (...args: Array<any>) => string
  integrationImportCode: (...args: Array<any>) => string | undefined
  renderTemplate: (content: string) => string
  ignoreFile: () => never
}

type TemplateRenderer = (context: TemplateRenderContext) => string | undefined

function __escapeXML(value: unknown) {
  if (value === undefined || value === null) {
    return ''
  }
  return String(value).replace(/[&<>'"]/g, (character) => {
    switch (character) {
      case '&':
        return '&amp;'
      case '<':
        return '&lt;'
      case '>':
        return '&gt;'
      case '"':
        return '&#34;'
      case "'":
        return '&#39;'
      default:
        return character
    }
  })
}

export function getManifestTemplateKey(template: string) {
  let hash = 0x811c9dc5
  for (let i = 0; i < template.length; i++) {
    hash ^= template.charCodeAt(i)
    hash = Math.imul(hash, 0x01000193) >>> 0
  }

  return `${hash.toString(16).padStart(8, '0')}:${template.length}`
}

function __render_07e79a91_473(context: TemplateRenderContext) {
  const {
    packageManager,
    projectName,
    typescript,
    tailwind,
    blank,
    js,
    jsx,
    fileRouter,
    codeRouter,
    routerOnly,
    includeExamples,
    addOnEnabled,
    addOnOption,
    addOns,
    integrations,
    routes,
    getPackageManagerAddScript,
    getPackageManagerRunScript,
    getPackageManagerExecuteScript,
    relativePath,
    integrationImportContent,
    integrationImportCode,
    renderTemplate,
    ignoreFile,
  } = context
  let __output = ''
  const __append = (value: unknown) => {
    if (value !== undefined && value !== null) {
      __output += String(value)
    }
  }
  __append("import { drizzle } from ")
 if (addOnOption.drizzle.database === 'postgresql') { 
  __append("\n'drizzle-orm/node-postgres';\n")
 } else if (addOnOption.drizzle.database === 'mysql') {
  __append("\n'drizzle-orm/mysql2';\n")
 } else if (addOnOption.drizzle.database === 'sqlite') {
  __append("\n'drizzle-orm/better-sqlite3';\n")
 } 
  __append("\nimport * as schema from './schema.ts'\n\nexport const db = drizzle(process.env.DATABASE_URL!, { schema")
 if (addOnOption.drizzle.database === 'mysql') {
  __append(", mode: 'default'")
 } 
  __append("});\n")
  return __output
}

function __render_2f4e1dd0_4210(context: TemplateRenderContext) {
  const {
    packageManager,
    projectName,
    typescript,
    tailwind,
    blank,
    js,
    jsx,
    fileRouter,
    codeRouter,
    routerOnly,
    includeExamples,
    addOnEnabled,
    addOnOption,
    addOns,
    integrations,
    routes,
    getPackageManagerAddScript,
    getPackageManagerRunScript,
    getPackageManagerExecuteScript,
    relativePath,
    integrationImportContent,
    integrationImportCode,
    renderTemplate,
    ignoreFile,
  } = context
  let __output = ''
  const __append = (value: unknown) => {
    if (value !== undefined && value !== null) {
      __output += String(value)
    }
  }
  __append("import { createFileRoute, useRouter } from '@tanstack/react-router'\nimport { createServerFn } from '@tanstack/react-start'\nimport { db } from '#/db/index'\nimport { desc } from 'drizzle-orm'\nimport { todos } from '#/db/schema'\n\nconst getTodos = createServerFn({\n  method: 'GET',\n}).handler(async () => {\n  return await db.query.todos.findMany({\n    orderBy: [desc(todos.createdAt)],\n  })\n})\n\nconst createTodo = createServerFn({\n  method: 'POST',\n})\n  .inputValidator((data: { title: string }) => data)\n  .handler(async ({ data }) => {\n    await db.insert(todos).values({ title: data.title })\n    return { success: true }\n  })\n\nexport const Route = createFileRoute('/demo/drizzle')({\n  component: DemoDrizzle,\n  loader: async () => await getTodos(),\n})\n\nfunction DemoDrizzle() {\n  const router = useRouter()\n  const todos = Route.useLoaderData()\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.target as HTMLFormElement)\n    const title = formData.get('title') as string\n\n    if (!title) return\n\n    try {\n      await createTodo({ data: { title } })\n      router.invalidate()\n      ;(e.target as HTMLFormElement).reset()\n    } catch (error) {\n      console.error('Failed to create todo:', error)\n    }\n  }\n\n  return (\n    <main className=\"demo-page demo-center\">\n      <section className=\"demo-panel w-full max-w-2xl\">\n        <header className=\"mb-8 flex items-center gap-4\">\n          <span className=\"demo-card flex h-14 w-14 items-center justify-center p-3\">\n            <img src=\"/drizzle.svg\" alt=\"Drizzle Logo\" className=\"h-8 w-8\" />\n          </span>\n          <div>\n            <p className=\"island-kicker mb-2\">Database</p>\n            <h1 className=\"demo-title\">Drizzle Demo</h1>\n          </div>\n        </header>\n\n        <h2 className=\"demo-section-title mb-4\">Todos</h2>\n\n        <ul className=\"space-y-3 mb-6\">\n          {todos.map((todo) => (\n            <li\n              key={todo.id}\n              className=\"demo-list-item\"\n            >\n              <div className=\"flex items-center justify-between\">\n                <span className=\"font-medium\">{todo.title}</span>\n                <span className=\"demo-muted text-xs\">#{todo.id}</span>\n              </div>\n            </li>\n          ))}\n          {todos.length === 0 && (\n            <li className=\"demo-list-item text-center demo-muted\">\n              No todos yet. Create one below!\n            </li>\n          )}\n        </ul>\n\n        <form onSubmit={handleSubmit} className=\"flex flex-col gap-2 sm:flex-row\">\n          <input\n            type=\"text\"\n            name=\"title\"\n            placeholder=\"Add a new todo...\"\n            className=\"demo-input min-w-0 flex-1\"\n          />\n          <button\n            type=\"submit\"\n            className=\"demo-button whitespace-nowrap\"\n          >\n            Add Todo\n          </button>\n        </form>\n\n        <div className=\"demo-card mt-8\">\n          <h3 className=\"demo-section-title mb-2\">\n            Powered by Drizzle ORM\n          </h3>\n          <p className=\"demo-muted mb-4 text-sm\">\n            Next-generation ORM for Node.js & TypeScript with PostgreSQL\n          </p>\n          <div className=\"space-y-2 text-sm\">\n            <p className=\"font-medium\">Setup Instructions:</p>\n            <ol className=\"demo-muted list-inside list-decimal space-y-2\">\n              <li>\n                Configure your{' '}\n                <code>DATABASE_URL</code>{' '}\n                in .env.local\n              </li>\n              <li>\n                Run:{' '}\n                <code>\n                  ")
  __append(getPackageManagerExecuteScript('drizzle-kit', ['generate']))
  __append("\n                </code>\n              </li>\n              <li>\n                Run:{' '}\n                <code>\n                  ")
  __append(getPackageManagerExecuteScript('drizzle-kit', ['migrate']))
  __append("\n                </code>\n              </li>\n              <li>\n                Optional:{' '}\n                <code>\n                  ")
  __append(getPackageManagerExecuteScript('drizzle-kit', ['studio']))
  __append("\n                </code>\n              </li>\n            </ol>\n          </div>\n        </div>\n      </section>\n    </main>\n  )\n}\n")
  return __output
}

function __render_6cd21925_416(context: TemplateRenderContext) {
  const {
    packageManager,
    projectName,
    typescript,
    tailwind,
    blank,
    js,
    jsx,
    fileRouter,
    codeRouter,
    routerOnly,
    includeExamples,
    addOnEnabled,
    addOnOption,
    addOns,
    integrations,
    routes,
    getPackageManagerAddScript,
    getPackageManagerRunScript,
    getPackageManagerExecuteScript,
    relativePath,
    integrationImportContent,
    integrationImportCode,
    renderTemplate,
    ignoreFile,
  } = context
  let __output = ''
  const __append = (value: unknown) => {
    if (value !== undefined && value !== null) {
      __output += String(value)
    }
  }
 if (addOnOption.drizzle.database === 'postgresql') { 
  __append("\n# Database URL for PostgreSQL\nDATABASE_URL=\"postgresql://username:password@localhost:5432/mydb\"")
 } else if (addOnOption.drizzle.database === 'mysql') { 
  __append("\n# Database URL for MySQL\nDATABASE_URL=\"mysql://username:password@localhost:3306/mydb\"")
 } else if (addOnOption.drizzle.database === 'sqlite') { 
  __append("\n# Database URL for SQLite\nDATABASE_URL=\"dev.db\"")
 } 
  return __output
}

function __render_7bee555e_1013(context: TemplateRenderContext) {
  const {
    packageManager,
    projectName,
    typescript,
    tailwind,
    blank,
    js,
    jsx,
    fileRouter,
    codeRouter,
    routerOnly,
    includeExamples,
    addOnEnabled,
    addOnOption,
    addOns,
    integrations,
    routes,
    getPackageManagerAddScript,
    getPackageManagerRunScript,
    getPackageManagerExecuteScript,
    relativePath,
    integrationImportContent,
    integrationImportCode,
    renderTemplate,
    ignoreFile,
  } = context
  let __output = ''
  const __append = (value: unknown) => {
    if (value !== undefined && value !== null) {
      __output += String(value)
    }
  }
 if (addOnOption.drizzle.database === 'postgresql') { 
  __append("\nimport { pgTable, serial, text, timestamp } from\n'drizzle-orm/pg-core';\n\nexport const todos = pgTable('todos', {\n  id: serial().primaryKey(),\n  title: text().notNull(),\n  createdAt: timestamp('created_at').defaultNow(),\n});\n")
 } else if (addOnOption.drizzle.database === 'mysql') {

  __append("\nimport { mysqlTable, int, text, timestamp } from\n'drizzle-orm/mysql-core';\n\nexport const todos = mysqlTable('todos', {\n  id: int().primaryKey().autoincrement(),\n  title: text().notNull(),\n  createdAt: timestamp('created_at', { mode: 'date' }).defaultNow(),\n});\n")
 } else if (addOnOption.drizzle.database === 'sqlite') {

  __append("\nimport { sqliteTable, integer, text } from\n'drizzle-orm/sqlite-core';\nimport { sql } from 'drizzle-orm';\n\nexport const todos = sqliteTable('todos', {\n  id: integer({ mode: 'number' }).primaryKey({\nautoIncrement: true }),\n  title: text().notNull(),\n  createdAt: integer('created_at', { mode: 'timestamp' }).default(sql`(unixepoch())`),\n});\n")
 } 
  return __output
}

function __render_8c7cf38c_960(context: TemplateRenderContext) {
  const {
    packageManager,
    projectName,
    typescript,
    tailwind,
    blank,
    js,
    jsx,
    fileRouter,
    codeRouter,
    routerOnly,
    includeExamples,
    addOnEnabled,
    addOnOption,
    addOns,
    integrations,
    routes,
    getPackageManagerAddScript,
    getPackageManagerRunScript,
    getPackageManagerExecuteScript,
    relativePath,
    integrationImportContent,
    integrationImportCode,
    renderTemplate,
    ignoreFile,
  } = context
  let __output = ''
  const __append = (value: unknown) => {
    if (value !== undefined && value !== null) {
      __output += String(value)
    }
  }
  __append("{\n  \"dependencies\": {\n    \"drizzle-orm\": \"^0.45.1\",\n    \"drizzle-kit\": \"^0.31.9\"")
 if (addOnOption.drizzle.database === 'postgresql') { 
  __append(",\n    \"pg\": \"^8.16.3\"")
 } 
 if (addOnOption.drizzle.database === 'mysql') { 
  __append(",\n    \"mysql2\": \"^3.15.3\"")
 } 
 if (addOnOption.drizzle.database === 'sqlite') { 
  __append(",\n    \"better-sqlite3\": \"^12.6.2\"")
 } 
  __append("\n  },\n  \"devDependencies\": {\n    \"dotenv\": \"^17.3.1\",\n    \"tsx\": \"^4.21.0\"")
 if (addOnOption.drizzle.database === 'postgresql') { 
  __append(",\n    \"@types/pg\": \"^8.15.6\"")
 } 
 if (addOnOption.drizzle.database === 'sqlite') { 
  __append(",\n    \"@types/better-sqlite3\": \"^7.6.0\"")
 } 
  __append("\n  },\n  \"scripts\": {\n    \"db:generate\": \"drizzle-kit generate\",\n    \"db:migrate\": \"drizzle-kit migrate\",\n    \"db:push\": \"drizzle-kit push\",\n    \"db:pull\": \"drizzle-kit pull\",\n    \"db:studio\": \"drizzle-kit studio\"\n  }")
 if (addOnOption.drizzle.database === 'sqlite') { 
  __append(",\n  \"pnpm\": {\n    \"onlyBuiltDependencies\": [\"better-sqlite3\"]\n  }\n  ")
 } 
  __append("\n}\n")
  return __output
}

function __render_ee98c04f_316(context: TemplateRenderContext) {
  const {
    packageManager,
    projectName,
    typescript,
    tailwind,
    blank,
    js,
    jsx,
    fileRouter,
    codeRouter,
    routerOnly,
    includeExamples,
    addOnEnabled,
    addOnOption,
    addOns,
    integrations,
    routes,
    getPackageManagerAddScript,
    getPackageManagerRunScript,
    getPackageManagerExecuteScript,
    relativePath,
    integrationImportContent,
    integrationImportCode,
    renderTemplate,
    ignoreFile,
  } = context
  let __output = ''
  const __append = (value: unknown) => {
    if (value !== undefined && value !== null) {
      __output += String(value)
    }
  }
  __append("import { config } from \"dotenv\";\nimport { defineConfig } from 'drizzle-kit';\n\nconfig({ path: ['.env.local', '.env'] });\n\nexport default defineConfig({\n  out: \"./drizzle\",\n  schema: \"./src/db/schema.ts\",\n  dialect: '")
  __append(__escapeXML(addOnOption.drizzle.database))
  __append("',\n  dbCredentials: {\n    url: process.env.DATABASE_URL,\n  },\n});\n")
  return __output
}

const templateRenderers: Record<string, TemplateRenderer> = {
  "07e79a91:473": __render_07e79a91_473,
  "2f4e1dd0:4210": __render_2f4e1dd0_4210,
  "6cd21925:416": __render_6cd21925_416,
  "7bee555e:1013": __render_7bee555e_1013,
  "8c7cf38c:960": __render_8c7cf38c_960,
  "ee98c04f:316": __render_ee98c04f_316,
}

export function hasManifestTemplate(template: string) {
  return getManifestTemplateKey(template) in templateRenderers
}

export function renderManifestTemplate(
  template: string,
  context: TemplateRenderContext,
) {
  const key = getManifestTemplateKey(template)
  const renderer = templateRenderers[key]
  if (!renderer) {
    throw new Error(`Template ${key} was not precompiled into the manifest`)
  }
  return renderer(context) ?? ''
}


export const addOn = {
  "name": "Drizzle",
  "description": "Type-safe SQL query builder for Postgres, SQLite, or MySQL.",
  "phase": "add-on",
  "type": "add-on",
  "category": "orm",
  "exclusive": [
    "orm"
  ],
  "color": "#C026D3",
  "priority": 46,
  "link": "https://orm.drizzle.team/",
  "modes": [
    "file-router"
  ],
  "options": {
    "database": {
      "type": "select",
      "label": "Database Provider",
      "description": "Choose your database provider",
      "default": "postgresql",
      "options": [
        {
          "value": "postgresql",
          "label": "PostgreSQL"
        },
        {
          "value": "sqlite",
          "label": "SQLite"
        },
        {
          "value": "mysql",
          "label": "MySQL"
        }
      ]
    }
  },
  "routes": [
    {
      "icon": "Database",
      "url": "/demo/drizzle",
      "name": "Drizzle",
      "path": "src/routes/demo/drizzle.tsx",
      "jsName": "DemoDrizzle"
    }
  ],
  "id": "drizzle",
  "version": "0.0.0",
  "packageAdditions": {},
  "packageTemplate": "{\n  \"dependencies\": {\n    \"drizzle-orm\": \"^0.45.1\",\n    \"drizzle-kit\": \"^0.31.9\"<% if (addOnOption.drizzle.database === 'postgresql') { %>,\n    \"pg\": \"^8.16.3\"<% } %><% if (addOnOption.drizzle.database === 'mysql') { %>,\n    \"mysql2\": \"^3.15.3\"<% } %><% if (addOnOption.drizzle.database === 'sqlite') { %>,\n    \"better-sqlite3\": \"^12.6.2\"<% } %>\n  },\n  \"devDependencies\": {\n    \"dotenv\": \"^17.3.1\",\n    \"tsx\": \"^4.21.0\"<% if (addOnOption.drizzle.database === 'postgresql') { %>,\n    \"@types/pg\": \"^8.15.6\"<% } %><% if (addOnOption.drizzle.database === 'sqlite') { %>,\n    \"@types/better-sqlite3\": \"^7.6.0\"<% } %>\n  },\n  \"scripts\": {\n    \"db:generate\": \"drizzle-kit generate\",\n    \"db:migrate\": \"drizzle-kit migrate\",\n    \"db:push\": \"drizzle-kit push\",\n    \"db:pull\": \"drizzle-kit pull\",\n    \"db:studio\": \"drizzle-kit studio\"\n  }<% if (addOnOption.drizzle.database === 'sqlite') { %>,\n  \"pnpm\": {\n    \"onlyBuiltDependencies\": [\"better-sqlite3\"]\n  }\n  <% } %>\n}\n",
  "readmeIsEjs": false,
  "files": {
    "_dot_env.local.append.ejs": "<% if (addOnOption.drizzle.database === 'postgresql') { %>\n# Database URL for PostgreSQL\nDATABASE_URL=\"postgresql://username:password@localhost:5432/mydb\"<% } else if (addOnOption.drizzle.database === 'mysql') { %>\n# Database URL for MySQL\nDATABASE_URL=\"mysql://username:password@localhost:3306/mydb\"<% } else if (addOnOption.drizzle.database === 'sqlite') { %>\n# Database URL for SQLite\nDATABASE_URL=\"dev.db\"<% } %>",
    "drizzle.config.ts.ejs": "import { config } from \"dotenv\";\nimport { defineConfig } from 'drizzle-kit';\n\nconfig({ path: ['.env.local', '.env'] });\n\nexport default defineConfig({\n  out: \"./drizzle\",\n  schema: \"./src/db/schema.ts\",\n  dialect: '<%= addOnOption.drizzle.database %>',\n  dbCredentials: {\n    url: process.env.DATABASE_URL,\n  },\n});\n",
    "public/drizzle.svg": "base64::PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTYwIDE2MCI+PHJlY3Qgd2lkdGg9IjkuNjMxIiBoZWlnaHQ9IjQwLjg1MiIgZmlsbD0iI0M1Rjc0RiIgcng9IjQuODE2IiB0cmFuc2Zvcm09Im1hdHJpeCguODczMDMgLjQ4NzY3IC0uNDk3MjEgLjg2NzYzIDQzLjQ4IDY3LjMwNCkiLz48cmVjdCB3aWR0aD0iOS42MzEiIGhlaWdodD0iNDAuODUyIiBmaWxsPSIjQzVGNzRGIiByeD0iNC44MTYiIHRyYW5zZm9ybT0ibWF0cml4KC44NzMwMyAuNDg3NjcgLS40OTcyMSAuODY3NjMgNzYuOTQgNDYuNTM0KSIvPjxyZWN0IHdpZHRoPSI5LjYzMSIgaGVpZ2h0PSI0MC44NTIiIGZpbGw9IiNDNUY3NEYiIHJ4PSI0LjgxNiIgdHJhbnNmb3JtPSJtYXRyaXgoLjg3MzAzIC40ODc2NyAtLjQ5NzIxIC44Njc2MyAxMjguNDI0IDQ2LjUzNSkiLz48cmVjdCB3aWR0aD0iOS42MzEiIGhlaWdodD0iNDAuODUyIiBmaWxsPSIjQzVGNzRGIiByeD0iNC44MTYiIHRyYW5zZm9ybT0ibWF0cml4KC44NzMwMyAuNDg3NjcgLS40OTcyMSAuODY3NjMgOTQuOTU3IDY3LjMwNCkiLz48L3N2Zz4=",
    "src/db/index.ts.ejs": "import { drizzle } from <% if (addOnOption.drizzle.database === 'postgresql') { %>\n'drizzle-orm/node-postgres';\n<% } else if (addOnOption.drizzle.database === 'mysql') {%>\n'drizzle-orm/mysql2';\n<% } else if (addOnOption.drizzle.database === 'sqlite') {%>\n'drizzle-orm/better-sqlite3';\n<% } %>\nimport * as schema from './schema.ts'\n\nexport const db = drizzle(process.env.DATABASE_URL!, { schema<% if (addOnOption.drizzle.database === 'mysql') {%>, mode: 'default'<% } %>});\n",
    "src/db/schema.ts.ejs": "<% if (addOnOption.drizzle.database === 'postgresql') { %>\nimport { pgTable, serial, text, timestamp } from\n'drizzle-orm/pg-core';\n\nexport const todos = pgTable('todos', {\n  id: serial().primaryKey(),\n  title: text().notNull(),\n  createdAt: timestamp('created_at').defaultNow(),\n});\n<% } else if (addOnOption.drizzle.database === 'mysql') {\n%>\nimport { mysqlTable, int, text, timestamp } from\n'drizzle-orm/mysql-core';\n\nexport const todos = mysqlTable('todos', {\n  id: int().primaryKey().autoincrement(),\n  title: text().notNull(),\n  createdAt: timestamp('created_at', { mode: 'date' }).defaultNow(),\n});\n<% } else if (addOnOption.drizzle.database === 'sqlite') {\n%>\nimport { sqliteTable, integer, text } from\n'drizzle-orm/sqlite-core';\nimport { sql } from 'drizzle-orm';\n\nexport const todos = sqliteTable('todos', {\n  id: integer({ mode: 'number' }).primaryKey({\nautoIncrement: true }),\n  title: text().notNull(),\n  createdAt: integer('created_at', { mode: 'timestamp' }).default(sql`(unixepoch())`),\n});\n<% } %>",
    "src/routes/demo/drizzle.tsx.ejs": "import { createFileRoute, useRouter } from '@tanstack/react-router'\nimport { createServerFn } from '@tanstack/react-start'\nimport { db } from '#/db/index'\nimport { desc } from 'drizzle-orm'\nimport { todos } from '#/db/schema'\n\nconst getTodos = createServerFn({\n  method: 'GET',\n}).handler(async () => {\n  return await db.query.todos.findMany({\n    orderBy: [desc(todos.createdAt)],\n  })\n})\n\nconst createTodo = createServerFn({\n  method: 'POST',\n})\n  .inputValidator((data: { title: string }) => data)\n  .handler(async ({ data }) => {\n    await db.insert(todos).values({ title: data.title })\n    return { success: true }\n  })\n\nexport const Route = createFileRoute('/demo/drizzle')({\n  component: DemoDrizzle,\n  loader: async () => await getTodos(),\n})\n\nfunction DemoDrizzle() {\n  const router = useRouter()\n  const todos = Route.useLoaderData()\n\n  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const formData = new FormData(e.target as HTMLFormElement)\n    const title = formData.get('title') as string\n\n    if (!title) return\n\n    try {\n      await createTodo({ data: { title } })\n      router.invalidate()\n      ;(e.target as HTMLFormElement).reset()\n    } catch (error) {\n      console.error('Failed to create todo:', error)\n    }\n  }\n\n  return (\n    <main className=\"demo-page demo-center\">\n      <section className=\"demo-panel w-full max-w-2xl\">\n        <header className=\"mb-8 flex items-center gap-4\">\n          <span className=\"demo-card flex h-14 w-14 items-center justify-center p-3\">\n            <img src=\"/drizzle.svg\" alt=\"Drizzle Logo\" className=\"h-8 w-8\" />\n          </span>\n          <div>\n            <p className=\"island-kicker mb-2\">Database</p>\n            <h1 className=\"demo-title\">Drizzle Demo</h1>\n          </div>\n        </header>\n\n        <h2 className=\"demo-section-title mb-4\">Todos</h2>\n\n        <ul className=\"space-y-3 mb-6\">\n          {todos.map((todo) => (\n            <li\n              key={todo.id}\n              className=\"demo-list-item\"\n            >\n              <div className=\"flex items-center justify-between\">\n                <span className=\"font-medium\">{todo.title}</span>\n                <span className=\"demo-muted text-xs\">#{todo.id}</span>\n              </div>\n            </li>\n          ))}\n          {todos.length === 0 && (\n            <li className=\"demo-list-item text-center demo-muted\">\n              No todos yet. Create one below!\n            </li>\n          )}\n        </ul>\n\n        <form onSubmit={handleSubmit} className=\"flex flex-col gap-2 sm:flex-row\">\n          <input\n            type=\"text\"\n            name=\"title\"\n            placeholder=\"Add a new todo...\"\n            className=\"demo-input min-w-0 flex-1\"\n          />\n          <button\n            type=\"submit\"\n            className=\"demo-button whitespace-nowrap\"\n          >\n            Add Todo\n          </button>\n        </form>\n\n        <div className=\"demo-card mt-8\">\n          <h3 className=\"demo-section-title mb-2\">\n            Powered by Drizzle ORM\n          </h3>\n          <p className=\"demo-muted mb-4 text-sm\">\n            Next-generation ORM for Node.js & TypeScript with PostgreSQL\n          </p>\n          <div className=\"space-y-2 text-sm\">\n            <p className=\"font-medium\">Setup Instructions:</p>\n            <ol className=\"demo-muted list-inside list-decimal space-y-2\">\n              <li>\n                Configure your{' '}\n                <code>DATABASE_URL</code>{' '}\n                in .env.local\n              </li>\n              <li>\n                Run:{' '}\n                <code>\n                  <%- getPackageManagerExecuteScript('drizzle-kit', ['generate']) %>\n                </code>\n              </li>\n              <li>\n                Run:{' '}\n                <code>\n                  <%- getPackageManagerExecuteScript('drizzle-kit', ['migrate']) %>\n                </code>\n              </li>\n              <li>\n                Optional:{' '}\n                <code>\n                  <%- getPackageManagerExecuteScript('drizzle-kit', ['studio']) %>\n                </code>\n              </li>\n            </ol>\n          </div>\n        </div>\n      </section>\n    </main>\n  )\n}\n"
  },
  "deletedFiles": [],
  "smallLogo": "<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=\"#121212\" rx=\"4.816\" transform=\"matrix(.87303 .48767 -.49721 .86763 43.48 67.304)\"/><rect width=\"9.631\" height=\"40.852\" fill=\"#121212\" rx=\"4.816\" transform=\"matrix(.87303 .48767 -.49721 .86763 76.94 46.534)\"/><rect width=\"9.631\" height=\"40.852\" fill=\"#121212\" rx=\"4.816\" transform=\"matrix(.87303 .48767 -.49721 .86763 128.424 46.535)\"/><rect width=\"9.631\" height=\"40.852\" fill=\"#121212\" rx=\"4.816\" transform=\"matrix(.87303 .48767 -.49721 .86763 94.957 67.304)\"/></svg>"
} satisfies AddOnCompiled