kaddidlehopper 0.5.0 → 0.6.0

package/add-ons/ai/info.json

@@ -1,22 +0,0 @@
-{
-  "name": "AI Chat",
-  "phase": "add-on",
-  "description": "Add AI chat capabilities with multi-vendor support (OpenAI, Anthropic, Gemini, Ollama). Includes a chat page and pop-up assistant.",
-  "link": "https://tanstack.com/ai",
-  "modes": ["file-router"],
-  "type": "add-on",
-  "priority": 20,
-  "routes": [{"icon": "MessagesSquare", "url": "/chat", "name": "Chat", "path": "src/routes/chat.tsx", "jsName": "ChatPage"}],
-  "features": ["tanstack-ai"],
-  "integrations": [{"type": "header-user", "path": "src/components/AIAssistant.tsx", "jsName": "AIAssistant"}],
-  "dependsOn": [],
-  "variables": [],
-  "packageFileDescriptions": {
-    "src/lib/ai-hook.ts": "useAIChat hook: useChat with fetchServerSentEvents connection to /api/chat.",
-    "src/routes/chat.tsx": "Chat page route (/chat): Weather Chat UI with messages, input form, send/stop.",
-    "src/routes/api.chat.ts": "POST handler for /api/chat: multi-provider AI (Anthropic, OpenAI, Gemini, Ollama) with getWeather tool and SSE streaming.",
-    "src/lib/weather-tools.ts": "TanStack AI getWeather tool definition; server returns mock temperature, condition, humidity for a city.",
-    "src/routes/chat.css": "Chat page styles: prose/markdown, scrollbar, message animations.",
-    "src/components/AIAssistant.tsx": "Pop-up AI assistant component for header; toggleable chat panel with useAIChat."
-  }
-}

package/add-ons/ai/package.json

@@ -1,17 +0,0 @@
-{
-  "dependencies": {
-    "@tanstack/ai": "0.2.2",
-    "@tanstack/ai-anthropic": "0.2.0",
-    "@tanstack/ai-client": "0.2.2",
-    "@tanstack/ai-gemini": "0.3.2",
-    "@tanstack/ai-ollama": "0.3.0",
-    "@tanstack/ai-openai": "0.3.0",
-    "@tanstack/ai-react": "0.2.2",
-    "@tanstack/react-store": "^0.8.0",
-    "@tanstack/store": "^0.8.0",
-    "highlight.js": "^11.11.1",
-    "streamdown": "^2.1.0",
-    "lucide-react": "^0.563.0",
-    "zod": "^4.3.5"
-  }
-}

package/add-ons/ai/small-logo.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M12 8V4H8"/>
-  <rect width="16" height="12" x="4" y="8" rx="2"/>
-  <path d="M2 14h2"/>
-  <path d="M20 14h2"/>
-  <path d="M15 13v2"/>
-  <path d="M9 13v2"/>
-</svg>

package/add-ons/db/assets/AGENTS.md.append

@@ -1,22 +0,0 @@
-### Netlify DB Integration
-
-Guestbook demo powered by Netlify DB (Neon Postgres) with Drizzle ORM.
-
-**Setup:**
-1. Link project: `netlify login` then `netlify init`
-2. Provision database: `netlify db init` (creates Neon Postgres, sets `DATABASE_URL`)
-3. Push schema: `npx drizzle-kit push` (creates `guestbook` table from `src/db/schema.ts`)
-4. Run locally: `netlify dev` (visit `/db-example`)
-
-**Key files:**
-- `src/db/schema.ts` - Guestbook table (id, name, message, createdAt)
-- `src/server/guestbook.functions.ts` - Server functions: `getEntries`, `addEntry`
-- `drizzle.config.ts` - Drizzle Kit config for migrations
-
-**Dependencies:** drizzle-orm, @neondatabase/serverless, drizzle-kit
-
-## Environment Variables
-
-```
-DATABASE_URL=...  # Auto-set by netlify db init; pull with netlify env:pull
-```

package/add-ons/db/assets/DB-SETUP.md

@@ -1,65 +0,0 @@
-# Netlify DB Setup
-
-After scaffolding your project with the DB add-on, follow these steps to get Netlify DB running.
-
-## Prerequisites
-
-- A [Netlify](https://www.netlify.com/) account
-- The [Netlify CLI](https://docs.netlify.com/cli/get-started/) installed (`npm install -g netlify-cli`)
-
-## 1. Link Your Project to Netlify
-
-If you haven't already, link your local project to a Netlify site:
-
-```sh
-netlify login
-netlify init
-```
-
-Follow the prompts to create a new site or link to an existing one.
-
-## 2. Initialize the Database
-
-Run the Netlify DB initialization command to provision a Postgres database for your site:
-
-```sh
-netlify db init
-```
-
-This creates a Neon Postgres database attached to your Netlify site and sets the `DATABASE_URL` environment variable automatically.
-
-## 3. Push the Schema to the Database
-
-Use Drizzle Kit to push your schema to the database:
-
-```sh
-npx drizzle-kit push
-```
-
-This creates the `guestbook` table defined in `src/db/schema.ts`.
-
-## 4. Run the Dev Server
-
-Start local development via the Netlify CLI:
-
-```sh
-netlify dev
-```
-
-Then visit [http://localhost:8888/db-example](http://localhost:8888/db-example) to see the guestbook demo.
-
-## 5. Deploy
-
-When you're ready, deploy to Netlify:
-
-```sh
-netlify deploy --build --prod
-```
-
-Or push to your git remote and Netlify will build and deploy automatically if continuous deployment is configured.
-
-## Troubleshooting
-
-- **`DATABASE_URL` not set** — Make sure you've run `netlify db:init` and `netlify env:pull`.
-- **Table not found errors** — Run `npx drizzle-kit push` to ensure the schema is applied.
-- **Connection errors locally** — Confirm `.env.local` has the correct `DATABASE_URL` and that your IP is not blocked by the Neon project settings.

package/add-ons/db/assets/_dot_env.local.append

@@ -1,2 +0,0 @@
-# Netlify DB - run `netlify db:init` to set up your database
-# DATABASE_URL is automatically set by Netlify after initialization

package/add-ons/db/assets/drizzle.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from "drizzle-kit";
-
-export default defineConfig({
-  schema: "./src/db/schema.ts",
-  out: "./drizzle",
-  dialect: "postgresql",
-  dbCredentials: {
-    url: process.env.DATABASE_URL!,
-  },
-});

package/add-ons/db/assets/src/db/index.ts

@@ -1,8 +0,0 @@
-import { drizzle } from "drizzle-orm/neon-http";
-import { neon } from "@neondatabase/serverless";
-import * as schema from "./schema";
-
-const sql = neon(process.env.DATABASE_URL!);
-export const db = drizzle(sql, { schema });
-
-export { schema };

package/add-ons/db/assets/src/db/schema.ts

@@ -1,8 +0,0 @@
-import { pgTable, serial, text, timestamp } from "drizzle-orm/pg-core";
-
-export const guestbook = pgTable("guestbook", {
-  id: serial("id").primaryKey(),
-  name: text("name").notNull(),
-  message: text("message").notNull(),
-  createdAt: timestamp("created_at").defaultNow().notNull(),
-});

package/add-ons/db/assets/src/routes/db-example.tsx

@@ -1,118 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useRouter } from "@tanstack/react-router";
-import { useState } from "react";
-import { getEntries, addEntry } from "@/server/guestbook.functions";
-
-export const Route = createFileRoute("/db-example")({
-  loader: async () => {
-    const entries = await getEntries();
-    return { entries };
-  },
-  component: DBExample,
-});
-
-function DBExample() {
-  const { entries } = Route.useLoaderData();
-  const router = useRouter();
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const form = e.currentTarget;
-    setIsSubmitting(true);
-
-    const formData = new FormData(form);
-    const name = formData.get("name") as string;
-    const message = formData.get("message") as string;
-
-    try {
-      await addEntry({ data: { name, message } });
-      form.reset();
-      await router.invalidate();
-    } catch (error) {
-      console.error("Failed to add entry:", error);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-linear-to-br from-teal-900 via-emerald-800 to-cyan-900 flex items-center justify-center">
-      <div className="w-full max-w-lg px-4 py-12">
-        <h1 className="text-4xl md:text-5xl font-black text-white mb-2 tracking-tight">
-          Guestbook
-        </h1>
-        <p className="text-teal-100/80 mb-8">
-          Sign the guestbook — powered by Netlify DB with Drizzle ORM.
-        </p>
-
-        <form onSubmit={handleSubmit} className="space-y-6 mb-12">
-          <div>
-            <label
-              htmlFor="name"
-              className="block text-sm font-medium text-teal-200 mb-2"
-            >
-              Name
-            </label>
-            <input
-              type="text"
-              id="name"
-              name="name"
-              required
-              className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-teal-300/50 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent"
-              placeholder="Your name"
-            />
-          </div>
-
-          <div>
-            <label
-              htmlFor="message"
-              className="block text-sm font-medium text-teal-200 mb-2"
-            >
-              Message
-            </label>
-            <textarea
-              id="message"
-              name="message"
-              required
-              rows={3}
-              className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-teal-300/50 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent resize-none"
-              placeholder="Leave a message..."
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            className="w-full px-8 py-3 bg-teal-500 hover:bg-teal-600 disabled:bg-teal-500/50 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-teal-500/30"
-          >
-            {isSubmitting ? "Signing..." : "Sign Guestbook"}
-          </button>
-        </form>
-
-        <div className="space-y-4">
-          <h2 className="text-xl font-bold text-white">
-            {entries.length === 0
-              ? "No entries yet — be the first!"
-              : `${entries.length} ${entries.length === 1 ? "entry" : "entries"}`}
-          </h2>
-
-          {entries.map((entry) => (
-            <div
-              key={entry.id}
-              className="rounded-lg bg-white/10 border border-white/10 p-4"
-            >
-              <div className="flex items-baseline justify-between mb-1">
-                <span className="font-semibold text-white">{entry.name}</span>
-                <span className="text-xs text-teal-300/60">
-                  {new Date(entry.createdAt).toLocaleDateString()}
-                </span>
-              </div>
-              <p className="text-teal-100/80 text-sm">{entry.message}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

package/add-ons/db/assets/src/server/guestbook.functions.ts

@@ -1,23 +0,0 @@
-import { createServerFn } from "@tanstack/react-start";
-import { db, schema } from "@/db";
-import { desc } from "drizzle-orm";
-
-export const getEntries = createServerFn({ method: "POST" }).handler(
-  async () => {
-    const entries = await db
-      .select()
-      .from(schema.guestbook)
-      .orderBy(desc(schema.guestbook.createdAt));
-    return entries;
-  }
-);
-
-export const addEntry = createServerFn({ method: "POST" })
-  .inputValidator((data: { name: string; message: string }) => data)
-  .handler(async ({ data }) => {
-    const result = await db
-      .insert(schema.guestbook)
-      .values({ name: data.name, message: data.message })
-      .returning();
-    return result[0];
-  });

package/add-ons/db/info.json

@@ -1,22 +0,0 @@
-{
-  "name": "Netlify DB",
-  "phase": "add-on",
-  "description": "Add a guestbook demo powered by Netlify DB (Postgres) with Drizzle ORM. Demonstrates full CRUD with a serverless database.",
-  "link": "https://docs.netlify.com/database/overview/",
-  "modes": ["file-router"],
-  "type": "add-on",
-  "priority": 20,
-  "routes": [{"icon": "Database", "url": "/db-example", "name": "DB Example", "path": "src/routes/db-example.tsx", "jsName": "DBExample"}],
-  "features": ["netlify-db"],
-  "integrations": [],
-  "dependsOn": [],
-  "variables": [],
-  "packageFileDescriptions": {
-    "DB-SETUP.md": "Setup guide: link to Netlify, run netlify db init, configure DATABASE_URL.",
-    "src/routes/db-example.tsx": "Guestbook route (/db-example): form to add entries, list from getEntries/addEntry.",
-    "src/server/guestbook.functions.ts": "Server functions: getEntries (list), addEntry (create) for guestbook via Drizzle.",
-    "src/db/index.ts": "Drizzle + Neon client; exports db and schema.",
-    "src/db/schema.ts": "Guestbook table schema: id, name, message, createdAt.",
-    "drizzle.config.ts": "Drizzle Kit config for migrations; postgres, schema path, DATABASE_URL."
-  }
-}

package/add-ons/db/package.json

@@ -1,10 +0,0 @@
-{
-  "dependencies": {
-    "drizzle-orm": "^0.44.0",
-    "@neondatabase/serverless": "^1.0.0",
-    "@netlify/neon": "^0.1.2"
-  },
-  "devDependencies": {
-    "drizzle-kit": "^0.31.0"
-  }
-}

package/add-ons/forms/assets/AGENTS.md.append

@@ -1,13 +0,0 @@
-### Netlify Forms Integration
-
-Signup form powered by Netlify Forms with honeypot spam protection. No server-side code required.
-
-**How it works:**
-- Form submissions are handled by Netlify at build/deploy
-- Add `data-netlify="true"` to the form
-- Spam protection: `netlify-honeypot="bot-field"` + hidden input with `name="bot-field"`
-- `public/form-example.html` declares the form (hidden) so Netlify detects it during build
-
-**Route:** `/form-example` - Signup form (name, email)
-
-No environment variables required. Works after deploy to Netlify.

package/add-ons/forms/assets/public/form-example.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>Form</title>
-</head>
-<body>
-  <form name="signup" method="POST" data-netlify="true" netlify-honeypot="bot-field" hidden>
-    <input type="text" name="name" />
-    <input type="email" name="email" />
-    <input name="bot-field" />
-  </form>
-</body>
-</html>

package/add-ons/forms/assets/src/routes/form-example.tsx

@@ -1,76 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/form-example')({
-  component: FormExample,
-})
-
-function FormExample() {
-  return (
-    <div className="min-h-screen bg-linear-to-br from-teal-900 via-emerald-800 to-cyan-900 flex items-center justify-center">
-      <div className="w-full max-w-md px-4">
-        <h1 className="text-4xl md:text-5xl font-black text-white mb-2 tracking-tight">
-          Sign up
-        </h1>
-        <p className="text-teal-100/80 mb-8">
-          Enter your name and email to get started.
-        </p>
-
-        <form
-          name="signup"
-          method="POST"
-          data-netlify="true"
-          netlify-honeypot="bot-field"
-          className="space-y-6"
-        >
-          <input type="hidden" name="form-name" value="signup" />
-          <p className="hidden" style={{ display: 'none' }}>
-            <label>
-              Don&apos;t fill this out: <input name="bot-field" />
-            </label>
-          </p>
-
-          <div>
-            <label
-              htmlFor="name"
-              className="block text-sm font-medium text-teal-200 mb-2"
-            >
-              Name
-            </label>
-            <input
-              type="text"
-              id="name"
-              name="name"
-              required
-              className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-teal-300/50 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent"
-              placeholder="Your name"
-            />
-          </div>
-
-          <div>
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-teal-200 mb-2"
-            >
-              Email
-            </label>
-            <input
-              type="email"
-              id="email"
-              name="email"
-              required
-              className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-teal-300/50 focus:outline-none focus:ring-2 focus:ring-teal-400 focus:border-transparent"
-              placeholder="you@example.com"
-            />
-          </div>
-
-          <button
-            type="submit"
-            className="w-full px-8 py-3 bg-teal-500 hover:bg-teal-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-teal-500/30"
-          >
-            Submit
-          </button>
-        </form>
-      </div>
-    </div>
-  )
-}

package/add-ons/forms/info.json

@@ -1,18 +0,0 @@
-{
-  "name": "Netlify Forms",
-  "phase": "add-on",
-  "description": "Add a signup form powered by Netlify Forms with spam protection via honeypot field. No server-side code required.",
-  "link": "https://docs.netlify.com/forms/setup/",
-  "modes": ["file-router"],
-  "type": "add-on",
-  "priority": 20,
-  "routes": [{"icon": "FormInput", "url": "/form-example", "name": "Form Example", "path": "src/routes/form-example.tsx", "jsName": "FormExample"}],
-  "features": ["netlify-forms"],
-  "integrations": [],
-  "dependsOn": [],
-  "variables": [],
-  "packageFileDescriptions": {
-    "src/routes/form-example.tsx": "Form example route (/form-example): Netlify Forms signup with honeypot spam protection.",
-    "public/form-example.html": "Static HTML form declaration for Netlify Forms; name, email, bot-field."
-  }
-}

package/add-ons/forms/package.json

@@ -1,3 +0,0 @@
-{
-  "dependencies": {}
-}

package/examples/ai-chat/README.md

@@ -1,36 +0,0 @@
-# AI Chat Example
-
-A weather chat assistant built with TanStack Start and TanStack AI for Netlify deployment.
-
-## Features
-
-- **AI Chat Interface**: Conversational weather assistant with streaming responses
-- **Multi-Provider Support**: Works with Anthropic, OpenAI, Gemini, or Ollama
-- **Tool Calling**: AI uses a getWeather tool to fetch weather data
-- **Markdown Rendering**: Rich message formatting with syntax highlighting
-
-## Project Structure
-
-```
-├── src/
-│   ├── lib/
-│   │   ├── ai-hook.ts          # Chat hook setup
-│   │   └── weather-tools.ts    # Weather tool definition
-│   └── routes/
-│       ├── __root.tsx           # Root layout
-│       ├── index.tsx            # Chat UI
-│       └── api.chat.ts          # Chat API endpoint
-```
-
-## Development
-
-```bash
-npm run dev
-```
-
-Set one of these environment variables to use a cloud provider:
-- `ANTHROPIC_API_KEY`
-- `OPENAI_API_KEY`
-- `GEMINI_API_KEY`
-
-Falls back to Ollama (local) if no API key is set.

package/examples/ai-chat/assets/AGENTS.md.append

@@ -1,24 +0,0 @@
-### AI Integration
-
-Multi-provider AI chat with fallback chain:
-
-1. Anthropic Claude (preferred)
-2. OpenAI GPT-4o
-3. Google Gemini
-4. Ollama (local)
-
-**Tools available to AI:**
-- `getWeather` - Get the current weather for a city. Returns temperature, condition, and humidity.
-
-## Environment Variables
-
-For AI functionality, set one or more:
-
-```
-ANTHROPIC_API_KEY=...
-OPENAI_API_KEY=...
-GOOGLE_GENERATIVE_AI_API_KEY=...
-OLLAMA_BASE_URL=...
-```
-
-The application uses the first available provider in the fallback chain.

package/examples/ai-chat/assets/src/lib/ai-hook.ts

@@ -1,21 +0,0 @@
-import {
-  fetchServerSentEvents,
-  useChat,
-  createChatClientOptions,
-} from '@tanstack/ai-react'
-import type { InferChatMessages } from '@tanstack/ai-react'
-
-// Default chat options for simple usage
-const defaultChatOptions = createChatClientOptions({
-  connection: fetchServerSentEvents('/api/chat'),
-})
-
-export type ChatMessages = InferChatMessages<typeof defaultChatOptions>
-
-export const useAIChat = () => {
-  const chatOptions = createChatClientOptions({
-    connection: fetchServerSentEvents('/api/chat'),
-  })
-
-  return useChat(chatOptions)
-}

package/examples/ai-chat/assets/src/lib/weather-tools.ts

@@ -1,30 +0,0 @@
-import { toolDefinition } from '@tanstack/ai'
-import { z } from 'zod'
-
-// Tool definition for getting weather
-export const getWeatherToolDef = toolDefinition({
-  name: 'getWeather',
-  description:
-    'Get the current weather for a city. Returns temperature, condition, and humidity.',
-  inputSchema: z.object({
-    city: z.string().describe('The city to get weather for'),
-  }),
-  outputSchema: z.object({
-    city: z.string(),
-    temperature: z.number(),
-    condition: z.string(),
-    humidity: z.number(),
-  }),
-})
-
-// Server implementation - mock weather data
-export const getWeather = getWeatherToolDef.server(({ city }) => {
-  // Mock weather data - in a real app, call a weather API
-  const conditions = ['sunny', 'cloudy', 'rainy', 'partly cloudy', 'windy']
-  return {
-    city,
-    temperature: Math.floor(Math.random() * 30) + 5,
-    condition: conditions[Math.floor(Math.random() * conditions.length)],
-    humidity: Math.floor(Math.random() * 50) + 30,
-  }
-})

package/examples/ai-chat/assets/src/routes/__root.tsx

@@ -1,57 +0,0 @@
-import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
-
-import appCss from '../styles.css?url'
-
-export const Route = createRootRoute({
-  head: () => ({
-    meta: [
-      {
-        charSet: 'utf-8',
-      },
-      {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1',
-      },
-      {
-        title: 'Weather Chat',
-      },
-    ],
-    links: [
-      {
-        rel: 'stylesheet',
-        href: appCss,
-      },
-    ],
-  }),
-  shellComponent: RootDocument,
-})
-
-function RootDocument({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <HeadContent />
-      </head>
-      <body>
-        <header className="p-4 flex items-center justify-between bg-gray-800 text-white shadow-lg">
-          <h1 className="text-xl font-semibold">Weather Chat</h1>
-        </header>
-        {children}
-        <TanStackDevtools
-          config={{
-            position: 'bottom-right',
-          }}
-          plugins={[
-            {
-              name: 'Tanstack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-          ]}
-        />
-        <Scripts />
-      </body>
-    </html>
-  )
-}