// 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_9e9ea353_307(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("## Setting up Convex\n\n- Set the `VITE_CONVEX_URL` and `CONVEX_DEPLOYMENT` environment variables in your `.env.local`. (Or run `")
  __append(getPackageManagerExecuteScript('convex', ['init']))
  __append("` to set them automatically.)\n- Run `")
  __append(getPackageManagerExecuteScript('convex', ['dev']))
  __append("` to start the Convex server.\n")
  return __output
}

const templateRenderers: Record<string, TemplateRenderer> = {
  "9e9ea353:307": __render_9e9ea353_307,
}

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": "Convex",
  "description": "Reactive document database with real-time queries and serverless functions.",
  "link": "https://convex.dev",
  "phase": "add-on",
  "type": "add-on",
  "category": "database",
  "exclusive": [
    "database",
    "orm"
  ],
  "color": "#EE342F",
  "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"
    }
  ],
  "id": "convex",
  "version": "0.0.0",
  "packageAdditions": {
    "dependencies": {
      "convex": "^1.32.0",
      "convex-solidjs": "^0.0.3",
      "lucide-solid": "^0.577.0"
    }
  },
  "readme": "## Setting up Convex\n\n- Set the `VITE_CONVEX_URL` and `CONVEX_DEPLOYMENT` environment variables in your `.env.local`. (Or run `<%- getPackageManagerExecuteScript('convex', ['init']) %>` to set them automatically.)\n- Run `<%- getPackageManagerExecuteScript('convex', ['dev']) %>` to start the Convex server.\n",
  "readmeIsEjs": true,
  "files": {
    "_dot_cursorrules.append": "This document serves as some special instructions when working with Convex.\n\n# Schemas\n\nWhen designing the schema please see this page on built in System fields and data types available: https://docs.convex.dev/database/types\n\nHere are some specifics that are often mishandled:\n\n## v (https://docs.convex.dev/api/modules/values#v)\n\nThe validator builder.\n\nThis builder allows you to build validators for Convex values.\n\nValidators can be used in schema definitions and as input validators for Convex functions.\n\nType declaration\nName\tType\nid\t<TableName>(tableName: TableName) => VId<GenericId<TableName>, \"required\">\nnull\t() => VNull<null, \"required\">\nnumber\t() => VFloat64<number, \"required\">\nfloat64\t() => VFloat64<number, \"required\">\nbigint\t() => VInt64<bigint, \"required\">\nint64\t() => VInt64<bigint, \"required\">\nboolean\t() => VBoolean<boolean, \"required\">\nstring\t() => VString<string, \"required\">\nbytes\t() => VBytes<ArrayBuffer, \"required\">\nliteral\t<T>(literal: T) => VLiteral<T, \"required\">\narray\t<T>(element: T) => VArray<T[\"type\"][], T, \"required\">\nobject\t<T>(fields: T) => VObject<Expand<{ [Property in string | number | symbol]?: Exclude<Infer<T[Property]>, undefined> } & { [Property in string | number | symbol]: Infer<T[Property]> }>, T, \"required\", { [Property in string | number | symbol]: Property | `${Property & string}.${T[Property][\"fieldPaths\"]}` }[keyof T] & string>\nrecord\t<Key, Value>(keys: Key, values: Value) => VRecord<Record<Infer<Key>, Value[\"type\"]>, Key, Value, \"required\", string>\nunion\t<T>(...members: T) => VUnion<T[number][\"type\"], T, \"required\", T[number][\"fieldPaths\"]>\nany\t() => VAny<any, \"required\", string>\noptional\t<T>(value: T) => VOptional<T>\n\n## System fields (https://docs.convex.dev/database/types#system-fields)\n\nEvery document in Convex has two automatically-generated system fields:\n\n_id: The document ID of the document.\n_creationTime: The time this document was created, in milliseconds since the Unix epoch.\n\nYou do not need to add indices as these are added automatically.\n\n## Example Schema\n\nThis is an example of a well crafted schema.\n\n```ts\nimport { defineSchema, defineTable } from \"convex/server\";\nimport { v } from \"convex/values\";\n\nexport default defineSchema(\n  {\n    users: defineTable({\n      name: v.string(),\n    }),\n    \n    sessions: defineTable({\n      userId: v.id(\"users\"),\n      sessionId: v.string(),\n    }).index(\"sessionId\", [\"sessionId\"]),\n    \n    threads: defineTable({\n      uuid: v.string(),\n      summary: v.optional(v.string()),\n      summarizer: v.optional(v.id(\"_scheduled_functions\")),\n    }).index(\"uuid\", [\"uuid\"]),\n\n    messages: defineTable({\n      message: v.string(),\n      threadId: v.id(\"threads\"),\n      author: v.union(\n        v.object({\n          role: v.literal(\"system\"),\n        }),\n        v.object({\n          role: v.literal(\"assistant\"),\n          context: v.array(v.id(\"messages\")),\n          model: v.optional(v.string()),\n        }),\n        v.object({\n          role: v.literal(\"user\"),\n          userId: v.id(\"users\"),\n        }),\n      ),\n    })\n      .index(\"threadId\", [\"threadId\"]),\n  },\n);\n```\n\nSourced from: https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/convex-cursorrules-prompt-file/.cursorrules\n",
    "_dot_env.local.append": "# Convex configuration, get this URL from your [Dashboard](dashboard.convex.dev)\nCONVEX_DEPLOYMENT=\nVITE_CONVEX_URL=\n",
    "convex/_generated/api.d.ts": "/* eslint-disable */\n/**\n * Generated `api` utility.\n *\n * THIS CODE IS AUTOMATICALLY GENERATED.\n *\n * To regenerate, run `npx convex dev`.\n * @module\n */\n\nimport type {\n  ApiFromModules,\n  FilterApi,\n  FunctionReference,\n} from \"convex/server\";\nimport type * as todos from \"../todos.js\";\n\n/**\n * A utility for referencing Convex functions in your app's API.\n *\n * Usage:\n * ```js\n * const myFunctionReference = api.myModule.myFunction;\n * ```\n */\ndeclare const fullApi: ApiFromModules<{\n  todos: typeof todos;\n}>;\nexport declare const api: FilterApi<\n  typeof fullApi,\n  FunctionReference<any, \"public\">\n>;\nexport declare const internal: FilterApi<\n  typeof fullApi,\n  FunctionReference<any, \"internal\">\n>;\n",
    "convex/_generated/api.js": "/* eslint-disable */\n/**\n * Generated `api` utility.\n *\n * THIS CODE IS AUTOMATICALLY GENERATED.\n *\n * To regenerate, run `npx convex dev`.\n * @module\n */\n\nimport { anyApi } from \"convex/server\";\n\n/**\n * A utility for referencing Convex functions in your app's API.\n *\n * Usage:\n * ```js\n * const myFunctionReference = api.myModule.myFunction;\n * ```\n */\nexport const api = anyApi;\nexport const internal = anyApi;\n",
    "convex/_generated/dataModel.d.ts": "/* eslint-disable */\n/**\n * Generated data model types.\n *\n * THIS CODE IS AUTOMATICALLY GENERATED.\n *\n * To regenerate, run `npx convex dev`.\n * @module\n */\n\nimport type {\n  DataModelFromSchemaDefinition,\n  DocumentByName,\n  TableNamesInDataModel,\n  SystemTableNames,\n} from \"convex/server\";\nimport type { GenericId } from \"convex/values\";\nimport schema from \"../schema.js\";\n\n/**\n * The names of all of your Convex tables.\n */\nexport type TableNames = TableNamesInDataModel<DataModel>;\n\n/**\n * The type of a document stored in Convex.\n *\n * @typeParam TableName - A string literal type of the table name (like \"users\").\n */\nexport type Doc<TableName extends TableNames> = DocumentByName<\n  DataModel,\n  TableName\n>;\n\n/**\n * An identifier for a document in Convex.\n *\n * Convex documents are uniquely identified by their `Id`, which is accessible\n * on the `_id` field. To learn more, see [Document IDs](https://docs.convex.dev/using/document-ids).\n *\n * Documents can be loaded using `db.get(id)` in query and mutation functions.\n *\n * IDs are just strings at runtime, but this type can be used to distinguish them from other\n * strings when type checking.\n *\n * @typeParam TableName - A string literal type of the table name (like \"users\").\n */\nexport type Id<TableName extends TableNames | SystemTableNames> =\n  GenericId<TableName>;\n\n/**\n * A type describing your Convex data model.\n *\n * This type includes information about what tables you have, the type of\n * documents stored in those tables, and the indexes defined on them.\n *\n * This type is used to parameterize methods like `queryGeneric` and\n * `mutationGeneric` to make them type-safe.\n */\nexport type DataModel = DataModelFromSchemaDefinition<typeof schema>;\n",
    "convex/_generated/server.d.ts": "/* eslint-disable */\n/**\n * Generated utilities for implementing server-side Convex query and mutation functions.\n *\n * THIS CODE IS AUTOMATICALLY GENERATED.\n *\n * To regenerate, run `npx convex dev`.\n * @module\n */\n\nimport {\n  ActionBuilder,\n  HttpActionBuilder,\n  MutationBuilder,\n  QueryBuilder,\n  GenericActionCtx,\n  GenericMutationCtx,\n  GenericQueryCtx,\n  GenericDatabaseReader,\n  GenericDatabaseWriter,\n} from \"convex/server\";\nimport type { DataModel } from \"./dataModel.js\";\n\n/**\n * Define a query in this Convex app's public API.\n *\n * This function will be allowed to read your Convex database and will be accessible from the client.\n *\n * @param func - The query function. It receives a {@link QueryCtx} as its first argument.\n * @returns The wrapped query. Include this as an `export` to name it and make it accessible.\n */\nexport declare const query: QueryBuilder<DataModel, \"public\">;\n\n/**\n * Define a query that is only accessible from other Convex functions (but not from the client).\n *\n * This function will be allowed to read from your Convex database. It will not be accessible from the client.\n *\n * @param func - The query function. It receives a {@link QueryCtx} as its first argument.\n * @returns The wrapped query. Include this as an `export` to name it and make it accessible.\n */\nexport declare const internalQuery: QueryBuilder<DataModel, \"internal\">;\n\n/**\n * Define a mutation in this Convex app's public API.\n *\n * This function will be allowed to modify your Convex database and will be accessible from the client.\n *\n * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.\n * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.\n */\nexport declare const mutation: MutationBuilder<DataModel, \"public\">;\n\n/**\n * Define a mutation that is only accessible from other Convex functions (but not from the client).\n *\n * This function will be allowed to modify your Convex database. It will not be accessible from the client.\n *\n * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.\n * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.\n */\nexport declare const internalMutation: MutationBuilder<DataModel, \"internal\">;\n\n/**\n * Define an action in this Convex app's public API.\n *\n * An action is a function which can execute any JavaScript code, including non-deterministic\n * code and code with side-effects, like calling third-party services.\n * They can be run in Convex's JavaScript environment or in Node.js using the \"use node\" directive.\n * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.\n *\n * @param func - The action. It receives an {@link ActionCtx} as its first argument.\n * @returns The wrapped action. Include this as an `export` to name it and make it accessible.\n */\nexport declare const action: ActionBuilder<DataModel, \"public\">;\n\n/**\n * Define an action that is only accessible from other Convex functions (but not from the client).\n *\n * @param func - The function. It receives an {@link ActionCtx} as its first argument.\n * @returns The wrapped function. Include this as an `export` to name it and make it accessible.\n */\nexport declare const internalAction: ActionBuilder<DataModel, \"internal\">;\n\n/**\n * Define an HTTP action.\n *\n * This function will be used to respond to HTTP requests received by a Convex\n * deployment if the requests matches the path and method where this action\n * is routed. Be sure to route your action in `convex/http.js`.\n *\n * @param func - The function. It receives an {@link ActionCtx} as its first argument.\n * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up.\n */\nexport declare const httpAction: HttpActionBuilder;\n\n/**\n * A set of services for use within Convex query functions.\n *\n * The query context is passed as the first argument to any Convex query\n * function run on the server.\n *\n * This differs from the {@link MutationCtx} because all of the services are\n * read-only.\n */\nexport type QueryCtx = GenericQueryCtx<DataModel>;\n\n/**\n * A set of services for use within Convex mutation functions.\n *\n * The mutation context is passed as the first argument to any Convex mutation\n * function run on the server.\n */\nexport type MutationCtx = GenericMutationCtx<DataModel>;\n\n/**\n * A set of services for use within Convex action functions.\n *\n * The action context is passed as the first argument to any Convex action\n * function run on the server.\n */\nexport type ActionCtx = GenericActionCtx<DataModel>;\n\n/**\n * An interface to read from the database within Convex query functions.\n *\n * The two entry points are {@link DatabaseReader.get}, which fetches a single\n * document by its {@link Id}, or {@link DatabaseReader.query}, which starts\n * building a query.\n */\nexport type DatabaseReader = GenericDatabaseReader<DataModel>;\n\n/**\n * An interface to read from and write to the database within Convex mutation\n * functions.\n *\n * Convex guarantees that all writes within a single mutation are\n * executed atomically, so you never have to worry about partial writes leaving\n * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control)\n * for the guarantees Convex provides your functions.\n */\nexport type DatabaseWriter = GenericDatabaseWriter<DataModel>;\n",
    "convex/_generated/server.js": "/* eslint-disable */\n/**\n * Generated utilities for implementing server-side Convex query and mutation functions.\n *\n * THIS CODE IS AUTOMATICALLY GENERATED.\n *\n * To regenerate, run `npx convex dev`.\n * @module\n */\n\nimport {\n  actionGeneric,\n  httpActionGeneric,\n  queryGeneric,\n  mutationGeneric,\n  internalActionGeneric,\n  internalMutationGeneric,\n  internalQueryGeneric,\n} from \"convex/server\";\n\n/**\n * Define a query in this Convex app's public API.\n *\n * This function will be allowed to read your Convex database and will be accessible from the client.\n *\n * @param func - The query function. It receives a {@link QueryCtx} as its first argument.\n * @returns The wrapped query. Include this as an `export` to name it and make it accessible.\n */\nexport const query = queryGeneric;\n\n/**\n * Define a query that is only accessible from other Convex functions (but not from the client).\n *\n * This function will be allowed to read from your Convex database. It will not be accessible from the client.\n *\n * @param func - The query function. It receives a {@link QueryCtx} as its first argument.\n * @returns The wrapped query. Include this as an `export` to name it and make it accessible.\n */\nexport const internalQuery = internalQueryGeneric;\n\n/**\n * Define a mutation in this Convex app's public API.\n *\n * This function will be allowed to modify your Convex database and will be accessible from the client.\n *\n * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.\n * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.\n */\nexport const mutation = mutationGeneric;\n\n/**\n * Define a mutation that is only accessible from other Convex functions (but not from the client).\n *\n * This function will be allowed to modify your Convex database. It will not be accessible from the client.\n *\n * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.\n * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.\n */\nexport const internalMutation = internalMutationGeneric;\n\n/**\n * Define an action in this Convex app's public API.\n *\n * An action is a function which can execute any JavaScript code, including non-deterministic\n * code and code with side-effects, like calling third-party services.\n * They can be run in Convex's JavaScript environment or in Node.js using the \"use node\" directive.\n * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.\n *\n * @param func - The action. It receives an {@link ActionCtx} as its first argument.\n * @returns The wrapped action. Include this as an `export` to name it and make it accessible.\n */\nexport const action = actionGeneric;\n\n/**\n * Define an action that is only accessible from other Convex functions (but not from the client).\n *\n * @param func - The function. It receives an {@link ActionCtx} as its first argument.\n * @returns The wrapped function. Include this as an `export` to name it and make it accessible.\n */\nexport const internalAction = internalActionGeneric;\n\n/**\n * Define a Convex HTTP action.\n *\n * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object\n * as its second.\n * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`.\n */\nexport const httpAction = httpActionGeneric;\n",
    "convex/schema.ts": "import { defineSchema, defineTable } from 'convex/server'\nimport { v } from 'convex/values'\n\nexport default defineSchema({\n  products: defineTable({\n    title: v.string(),\n    imageId: v.string(),\n    price: v.number(),\n  }),\n  todos: defineTable({\n    text: v.string(),\n    completed: v.boolean(),\n  }),\n})\n",
    "convex/todos.ts": "import { mutation, query } from './_generated/server'\nimport { v } from 'convex/values'\n\nexport const list = query({\n  args: {},\n  handler: async (ctx) => {\n    return await ctx.db\n      .query('todos')\n      .withIndex('by_creation_time')\n      .order('desc')\n      .collect()\n  },\n})\n\nexport const add = mutation({\n  args: { text: v.string() },\n  handler: async (ctx, args) => {\n    return await ctx.db.insert('todos', {\n      text: args.text,\n      completed: false,\n    })\n  },\n})\n\nexport const toggle = mutation({\n  args: { id: v.id('todos') },\n  handler: async (ctx, args) => {\n    const todo = await ctx.db.get(args.id)\n    if (!todo) {\n      throw new Error('Todo not found')\n    }\n    return await ctx.db.patch(args.id, {\n      completed: !todo.completed,\n    })\n  },\n})\n\nexport const remove = mutation({\n  args: { id: v.id('todos') },\n  handler: async (ctx, args) => {\n    return await ctx.db.delete(args.id)\n  },\n})\n",
    "convex/tsconfig.json": "{\n  /* This TypeScript project config describes the environment that\n   * Convex functions run in and is used to typecheck them.\n   * You can modify it, but some settings are required to use Convex.\n   */\n  \"compilerOptions\": {\n    /* These settings are not required by Convex and can be modified. */\n    \"allowJs\": true,\n    \"strict\": true,\n    \"moduleResolution\": \"Bundler\",\n    \"jsx\": \"react-jsx\",\n    \"skipLibCheck\": true,\n    \"allowSyntheticDefaultImports\": true,\n\n    /* These compiler options are required by Convex */\n    \"target\": \"ESNext\",\n    \"lib\": [\"ES2021\", \"dom\"],\n    \"forceConsistentCasingInFileNames\": true,\n    \"module\": \"ESNext\",\n    \"isolatedModules\": true,\n    \"noEmit\": true\n  },\n  \"include\": [\"./**/*\"],\n  \"exclude\": [\"./_generated\"]\n}\n",
    "src/integrations/convex/provider.tsx": "import { setupConvex, ConvexProvider } from 'convex-solidjs'\nimport type { JSXElement } from 'solid-js'\n\nconst CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL\nif (!CONVEX_URL) {\n  console.error('missing envar CONVEX_URL')\n}\nconst client = setupConvex(CONVEX_URL)\n\nexport default function AppConvexProvider(props: { children: JSXElement }) {\n  return <ConvexProvider client={client}>{props.children}</ConvexProvider>\n}\n",
    "src/routes/demo/convex.tsx": "import { createFileRoute } from '@tanstack/solid-router'\nimport { Trash2, Plus, Check, Circle } from 'lucide-solid'\n\nimport { api } from '../../../convex/_generated/api'\nimport type { Id } from '../../../convex/_generated/dataModel'\nimport { createSignal, For, Show } from 'solid-js'\nimport { useMutation, useQuery } from 'convex-solidjs'\n\nexport const Route = createFileRoute('/demo/convex')({\n  ssr: false,\n  component: ConvexTodos,\n})\n\nfunction ConvexTodos() {\n  const todos = useQuery(api.todos.list, () => ({}))\n  const addTodo = useMutation(api.todos.add)\n  const toggleTodo = useMutation(api.todos.toggle)\n  const removeTodo = useMutation(api.todos.remove)\n\n  const [newTodo, setNewTodo] = createSignal('')\n\n  const handleAddTodo = async () => {\n    if (newTodo().trim()) {\n      await addTodo.mutate({ text: newTodo().trim() })\n      setNewTodo('')\n    }\n  }\n\n  const handleToggleTodo = async (id: Id<'todos'>) => {\n    await toggleTodo.mutate({ id })\n  }\n  const handleRemoveTodo = async (id: Id<'todos'>) => {\n    await removeTodo.mutate({ id })\n  }\n\n  const completedCount = () =>\n    todos?.data()?.filter((todo) => todo.completed).length || 0\n  const totalCount = () => todos?.data()?.length || 0\n\n  return (\n    <main class=\"demo-page\">\n      <div class=\"mx-auto w-full max-w-2xl space-y-6\">\n        <section class=\"demo-panel\">\n          <div class=\"text-center\">\n            <p class=\"island-kicker mb-2\">Convex</p>\n            <h1 class=\"demo-title\">Todos</h1>\n            <p class=\"demo-muted mt-2\">Powered by real-time sync</p>\n            <Show when={totalCount() > 0}>\n              <div class=\"mt-4 flex justify-center space-x-6 text-sm\">\n                <span class=\"font-medium\">{completedCount()} completed</span>\n                <span class=\"demo-muted\">\n                  {totalCount() - completedCount()} remaining\n                </span>\n              </div>\n            </Show>\n          </div>\n        </section>\n\n        <section class=\"demo-card\">\n          <div class=\"flex gap-3\">\n            <input\n              type=\"text\"\n              value={newTodo()}\n              onInput={(e) => setNewTodo(e.target.value)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter') {\n                  handleAddTodo()\n                }\n              }}\n              placeholder=\"What needs to be done?\"\n              class=\"demo-input min-w-0 flex-1\"\n            />\n            <button\n              onClick={handleAddTodo}\n              disabled={!newTodo().trim()}\n              class=\"demo-button\"\n            >\n              <Plus size={20} />\n              Add\n            </button>\n          </div>\n        </section>\n\n        <section class=\"demo-card overflow-hidden p-0\">\n          <Show when={todos.isLoading()}>\n            <div class=\"p-8 text-center\">\n              <div class=\"mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-[var(--lagoon-deep)]\"></div>\n              <p class=\"demo-muted\">Loading todos...</p>\n            </div>\n          </Show>\n          <Show\n            when={todos.data()?.length !== 0}\n            fallback={\n              <div class=\"p-12 text-center\">\n                <Circle size={48} class=\"demo-muted mx-auto mb-4\" />\n                <h3 class=\"demo-section-title mb-2\">No todos yet</h3>\n                <p class=\"demo-muted\">\n                  Add your first todo above to get started!\n                </p>\n              </div>\n            }\n          >\n            <div class=\"divide-y divide-[var(--line)]\">\n              <For each={todos.data()}>\n                {(todo, index) => (\n                  <div\n                    class={`p-4 flex items-center gap-4 transition-colors hover:bg-[var(--link-bg-hover)] ${\n                      todo.completed ? 'opacity-75' : ''\n                    }`}\n                    style={{\n                      'animation-delay': `${index() * 50}ms`,\n                    }}\n                  >\n                    <button\n                      onClick={() => handleToggleTodo(todo._id)}\n                      class={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${\n                        todo.completed\n                          ? 'border-[var(--lagoon-deep)] bg-[var(--lagoon)] text-[var(--sea-ink)]'\n                          : 'border-[var(--line)] text-transparent hover:border-[var(--lagoon-deep)] hover:text-[var(--lagoon-deep)]'\n                      }`}\n                    >\n                      <Check size={14} />\n                    </button>\n\n                    <span\n                      class={`flex-1 text-lg transition-all duration-200 ${\n                        todo.completed\n                          ? 'line-through demo-muted'\n                          : 'text-[var(--sea-ink)]'\n                      }`}\n                    >\n                      {todo.text}\n                    </span>\n\n                    <button\n                      onClick={() => handleRemoveTodo(todo._id)}\n                      class=\"demo-button demo-button-danger flex-shrink-0 p-2\"\n                    >\n                      <Trash2 size={18} />\n                    </button>\n                  </div>\n                )}\n              </For>\n            </div>\n          </Show>\n        </section>\n\n        <div class=\"text-center mt-6\">\n          <p class=\"demo-muted text-sm\">\n            Built with Convex, real-time updates, and synced state.\n          </p>\n        </div>\n      </div>\n    </main>\n  )\n}\n"
  },
  "deletedFiles": [],
  "smallLogo": "<svg width=\"184\" height=\"188\" viewBox=\"0 0 184 188\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<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\"/>\n<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\"/>\n<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\"/>\n</svg>\n"
} satisfies AddOnCompiled