kaddidlehopper 0.5.0 → 0.6.0

package/examples/marketing/assets/src/data/motorcycles.ts.ejs

@@ -1,77 +0,0 @@
-export interface Motorcycle {
-  id: number;
-  name: string;
-  image: string;
-  description: string;
-  shortDescription: string;
-  price: number;
-  engineSize: number; // in CCs
-  type: "scooter" | "cruiser" | "adventure" | "sport" | "supersport";
-}
-
-const motorcycles: Array<Motorcycle> = [
-  {
-    id: 1,
-    name: "Luna-C Urbanite",
-    image: "/motorcycle-scooter.jpg",
-    description:
-      "The Luna-C Urbanite is the perfect city companion, combining style and practicality in a compact package. With its 125cc engine, it delivers excellent fuel efficiency while maintaining enough power for urban commuting. The comfortable seating position and lightweight frame make it easy to maneuver through city traffic, while the under-seat storage provides ample space for your daily essentials.",
-    shortDescription:
-      "A stylish and practical 125cc scooter perfect for urban commuting with excellent fuel efficiency.",
-    price: 3000,
-    engineSize: 125,
-    type: "scooter",
-  },
-<% if (!addOnOption.project?.bareBones) { %>
-  {
-    id: 2,
-    name: "Luna-C Voyager",
-    image: "/motorcycle-cruiser.jpg",
-    description:
-      "The Luna-C Voyager is a classic cruiser that combines comfort with style. Its 750cc engine provides smooth, reliable power for long-distance rides, while the ergonomic design ensures comfort even on extended journeys. The classic cruiser styling with modern touches makes it stand out on any road.",
-    shortDescription:
-      "A comfortable 750cc cruiser perfect for long-distance rides with classic styling.",
-    price: 12000,
-    engineSize: 750,
-    type: "cruiser",
-  },
-  {
-    id: 3,
-    name: "Luna-C Explorer",
-    image: "/motorcycle-adventure.jpg",
-    description:
-      "The Luna-C Explorer is built for adventure, whether you're tackling city streets or exploring off-road trails. Its 850cc engine provides the perfect balance of power and control, while the dual-sport suspension system ensures a smooth ride in any condition. The upright riding position and comfortable seat make it ideal for long journeys.",
-    shortDescription:
-      "An 850cc adventure bike designed for both on-road and off-road exploration.",
-    price: 15000,
-    engineSize: 850,
-    type: "adventure",
-  },
-  {
-    id: 4,
-    name: "Luna-C Velocity",
-    image: "/motorcycle-sport.jpg",
-    description:
-      "The Luna-C Velocity is a high-performance sport bike that delivers thrilling acceleration and precise handling. Its 1000cc engine provides exceptional power, while the aerodynamic design and advanced suspension system ensure optimal performance on the track or the open road. The aggressive styling and premium components make it a true performance machine.",
-    shortDescription:
-      "A high-performance 1000cc sport bike with exceptional power and handling.",
-    price: 20000,
-    engineSize: 1000,
-    type: "sport",
-  },
-  {
-    id: 5,
-    name: "Luna-C Supersport",
-    image: "/motorcycle-supersport.jpg",
-    description:
-      "The Luna-C Supersport represents the pinnacle of motorcycle engineering. Its 1300cc engine delivers breathtaking power and acceleration, while the cutting-edge aerodynamics and race-inspired components ensure maximum performance. This machine is designed for experienced riders who demand the ultimate in speed and handling.",
-    shortDescription:
-      "The ultimate 1300cc supersport machine with race-inspired performance and aerodynamics.",
-    price: 25000,
-    engineSize: 1300,
-    type: "supersport",
-  },
-<% } %>
-];
-
-export default motorcycles;

package/examples/marketing/assets/src/lib/motorcycle-ai-hook.ts

@@ -1,24 +0,0 @@
-import {
-  fetchServerSentEvents,
-  useChat,
-  createChatClientOptions,
-} from "@tanstack/ai-react";
-import type { InferChatMessages } from "@tanstack/ai-react";
-import { clientTools } from "@tanstack/ai-client";
-
-import { recommendMotorcycleToolDef } from "@/lib/motorcycle-tools";
-
-const recommendMotorcycleToolClient = recommendMotorcycleToolDef.client(
-  ({ id }) => ({
-    id: +id,
-  })
-);
-
-const chatOptions = createChatClientOptions({
-  connection: fetchServerSentEvents("/api/motorcycle-chat"),
-  tools: clientTools(recommendMotorcycleToolClient),
-});
-
-export type ChatMessages = InferChatMessages<typeof chatOptions>;
-
-export const useMotorcycleChat = () => useChat(chatOptions);

package/examples/marketing/assets/src/lib/motorcycle-tools.ts

@@ -1,42 +0,0 @@
-import { toolDefinition } from "@tanstack/ai";
-import { z } from "zod";
-import motorcycles from "@/data/motorcycles";
-
-// Tool definition for getting motorcycles
-export const getMotorcyclesToolDef = toolDefinition({
-  name: "getMotorcycles",
-  description: "Get all motorcycles from the database",
-  inputSchema: z.object({}),
-  outputSchema: z.array(
-    z.object({
-      id: z.number(),
-      name: z.string(),
-      image: z.string(),
-      description: z.string(),
-      shortDescription: z.string(),
-      price: z.number(),
-      engineSize: z.number(),
-      type: z.enum(["scooter", "cruiser", "adventure", "sport", "supersport"]),
-    })
-  ),
-});
-
-// Server implementation
-export const getMotorcycles = getMotorcyclesToolDef.server(() => motorcycles);
-
-// Tool definition for motorcycle recommendation
-export const recommendMotorcycleToolDef = toolDefinition({
-  name: "recommendMotorcycle",
-  description:
-    "REQUIRED tool to display a motorcycle recommendation to the user. This tool MUST be used whenever recommending a motorcycle - do NOT write recommendations yourself. This displays the motorcycle in a special appealing format with a view details button.",
-  inputSchema: z.object({
-    id: z
-      .union([z.string(), z.number()])
-      .describe(
-        "The ID of the motorcycle to recommend (from the getMotorcycles results)"
-      ),
-  }),
-  outputSchema: z.object({
-    id: z.number(),
-  }),
-});

package/examples/marketing/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 Header from '@/components/Header'
-
-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: 'Luna-C Motorcycles',
-      },
-    ],
-    links: [
-      {
-        rel: 'stylesheet',
-        href: appCss,
-      },
-    ],
-  }),
-  shellComponent: RootDocument,
-})
-
-function RootDocument({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <HeadContent />
-      </head>
-      <body className="bg-black">
-        <Header />
-        {children}
-        <TanStackDevtools
-          config={{
-            position: 'bottom-right',
-          }}
-          plugins={[
-            {
-              name: 'Tanstack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-          ]}
-        />
-        <Scripts />
-      </body>
-    </html>
-  )
-}

package/examples/marketing/assets/src/routes/api.motorcycle-chat.ts

@@ -1,78 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { chat, maxIterations, toServerSentEventsResponse } from "@tanstack/ai";
-import { anthropicText } from "@tanstack/ai-anthropic";
-
-import {
-  getMotorcycles,
-  recommendMotorcycleToolDef,
-} from "@/lib/motorcycle-tools";
-
-const SYSTEM_PROMPT = `You are a helpful assistant for a store that sells motorcycles.
-
-You are also a motorcycle enthusiast who is passionate about our products and how they can bring joy to people's lives, the excitement of the open road and adventure. Emphasize these aspects in your responses.
-
-CRITICAL INSTRUCTIONS - YOU MUST FOLLOW THIS EXACT WORKFLOW:
-
-When a user asks for a motorcycle recommendation:
-1. FIRST: Use the getMotorcycles tool (no parameters needed)
-2. SECOND: Use the recommendMotorcycle tool with the ID of the motorcycle you want to recommend
-3. NEVER write a recommendation directly - ALWAYS use the recommendMotorcycle tool
-
-IMPORTANT:
-- The recommendMotorcycle tool will display the motorcycle in a special, appealing format
-- You MUST use recommendMotorcycle for ANY motorcycle recommendation
-- ONLY recommend motorcycles from our inventory (use getMotorcycles first)
-- The recommendMotorcycle tool has a view details button - this is how customers can learn more
-- Do NOT describe the motorcycle yourself - let the recommendMotorcycle tool do it
-`;
-
-export const Route = createFileRoute("/api/motorcycle-chat")({
-  server: {
-    handlers: {
-      POST: async ({ request }) => {
-        // Capture request signal before reading body (it may be aborted after body is consumed)
-        const requestSignal = request.signal;
-
-        // If request is already aborted, return early
-        if (requestSignal.aborted) {
-          return new Response(null, { status: 499 }); // 499 = Client Closed Request
-        }
-
-        const abortController = new AbortController();
-
-        try {
-          const body = await request.json();
-          const { messages } = body;
-
-          const adapter = anthropicText("claude-haiku-4-5");
-
-          const stream = chat({
-            adapter,
-            tools: [
-              getMotorcycles, // Server tool
-              recommendMotorcycleToolDef, // No server execute - client will handle
-            ],
-            systemPrompts: [SYSTEM_PROMPT],
-            agentLoopStrategy: maxIterations(5),
-            messages,
-            abortController,
-          });
-
-          return toServerSentEventsResponse(stream, { abortController });
-        } catch (error: any) {
-          // If request was aborted, return early (don't send error response)
-          if (error.name === "AbortError" || abortController.signal.aborted) {
-            return new Response(null, { status: 499 }); // 499 = Client Closed Request
-          }
-          return new Response(
-            JSON.stringify({ error: "Failed to process chat request" }),
-            {
-              status: 500,
-              headers: { "Content-Type": "application/json" },
-            }
-          );
-        }
-      },
-    },
-  },
-});

package/examples/marketing/assets/src/routes/index.tsx

@@ -1,72 +0,0 @@
-import { Link, createFileRoute } from '@tanstack/react-router'
-import motorcycles from '@/data/motorcycles'
-
-export const Route = createFileRoute('/')({
-  component: MotorcyclesIndex,
-})
-
-function MotorcyclesIndex() {
-  return (
-    <div className="bg-black text-white p-5">
-      <h1 className="text-3xl font-bold mb-16 text-center">
-        Luna-C Motorcycles
-      </h1>
-      <div className="max-w-7xl mx-auto">
-        {motorcycles.map((motorcycle, index) => (
-          <div
-            key={motorcycle.id}
-            className={`relative flex flex-col md:flex-row items-stretch gap-8 mb-32 ${
-              index % 2 === 1 ? 'md:flex-row-reverse' : ''
-            }`}
-          >
-            <div className="w-full md:w-[60%] relative">
-              <Link
-                to="/motorcycles/$motorcycleId"
-                params={{
-                  motorcycleId: motorcycle.id.toString(),
-                }}
-                className="group block relative"
-              >
-                <div className="relative z-0 w-full aspect-[4/3]">
-                  <div className="w-full h-full overflow-hidden rounded-2xl border border-gray-800/50 shadow-2xl">
-                    <img
-                      src={motorcycle.image}
-                      alt={motorcycle.name}
-                      className="w-full h-full object-cover motorcycle-image group-hover:scale-105 transition-transform duration-500"
-                    />
-                    <div className="absolute inset-0 bg-linear-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                  </div>
-                  <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-emerald-500/80 text-white px-4 py-2 rounded-full text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 backdrop-blur-sm">
-                    View Details
-                  </div>
-                </div>
-              </Link>
-            </div>
-
-            <div
-              className={`w-full md:w-[50%] relative ${index % 2 === 0 ? 'md:-ml-24' : 'md:-mr-24'} md:my-12`}
-            >
-              <div className="bg-gray-900/40 backdrop-blur-xl rounded-2xl p-8 border border-gray-500/20 shadow-2xl relative z-10">
-                <div className="absolute inset-0 rounded-2xl bg-linear-to-br from-white/5 to-white/0"></div>
-                <div className="relative z-10">
-                  <h2 className="text-2xl font-bold mb-3">{motorcycle.name}</h2>
-                  <p className="text-gray-300 mb-2 font-medium">
-                    {motorcycle.engineSize}cc •{' '}
-                    {motorcycle.type.charAt(0).toUpperCase() +
-                      motorcycle.type.slice(1)}
-                  </p>
-                  <p className="text-gray-100 mb-4 leading-relaxed">
-                    {motorcycle.shortDescription}
-                  </p>
-                  <div className="text-2xl font-bold text-emerald-400">
-                    ${motorcycle.price.toLocaleString()}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}

package/examples/marketing/assets/src/routes/motorcycles/$motorcycleId.tsx

@@ -1,56 +0,0 @@
-import { Link, createFileRoute } from "@tanstack/react-router";
-import motorcycles from "../../data/motorcycles";
-
-export const Route = createFileRoute("/motorcycles/$motorcycleId")({
-  component: RouteComponent,
-  loader: async ({ params }) => {
-    const motorcycle = motorcycles.find(
-      (motorcycle) => motorcycle.id === +params.motorcycleId
-    );
-    if (!motorcycle) {
-      throw new Error("Motorcycle not found");
-    }
-    return motorcycle;
-  },
-});
-
-function RouteComponent() {
-  const motorcycle = Route.useLoaderData();
-
-  return (
-    <div className="relative min-h-[100vh] flex items-center bg-black text-white p-5">
-      <div className="relative z-10 w-[60%] bg-gray-900/60 backdrop-blur-md rounded-2xl p-8 border border-gray-800/50 shadow-xl">
-        <Link
-          to="/"
-          className="inline-block mb-4 text-emerald-400 hover:text-emerald-300"
-        >
-          &larr; Back to all motorcycles
-        </Link>
-        <h1 className="text-3xl font-bold mb-2">{motorcycle.name}</h1>
-        <p className="text-gray-400 mb-2">
-          {motorcycle.engineSize}cc •{" "}
-          {motorcycle.type.charAt(0).toUpperCase() + motorcycle.type.slice(1)}
-        </p>
-        <p className="text-gray-300 mb-6">{motorcycle.description}</p>
-        <div className="flex items-center justify-between">
-          <div className="text-2xl font-bold text-emerald-400">
-            ${motorcycle.price.toLocaleString()}
-          </div>
-          <button className="bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-2 rounded-lg transition-colors">
-            Add to Cart
-          </button>
-        </div>
-      </div>
-
-      <div className="absolute top-0 right-0 w-[55%] h-full z-0">
-        <div className="w-full h-full overflow-hidden rounded-2xl border-4 border-gray-800 shadow-2xl">
-          <img
-            src={motorcycle.image}
-            alt={motorcycle.name}
-            className="w-full h-full object-cover motorcycle-image"
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

package/examples/marketing/assets/src/store/motorcycle-assistant.ts

@@ -1,3 +0,0 @@
-import { Store } from '@tanstack/store'
-
-export const showMotorcycleAIAssistant = new Store(false)

package/examples/marketing/assets/src/styles.css

@@ -1,212 +0,0 @@
-@import "tailwindcss";
-@import "highlight.js/styles/github-dark.css";
-
-/* Custom scrollbar styles */
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(156, 163, 175, 0.5);
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(156, 163, 175, 0.7);
-}
-
-/* Smooth transitions for dark mode */
-html {
-  transition: background-color 0.3s ease;
-}
-
-/* Markdown content styles */
-.prose {
-  max-width: none;
-  color: #e5e7eb; /* text-gray-200 */
-}
-
-.prose code {
-  color: #e5e7eb;
-  background-color: rgba(31, 41, 55, 0.5);
-  padding: 0.2em 0.4em;
-  border-radius: 0.375rem;
-  font-size: 0.875em;
-}
-
-.prose pre {
-  background-color: rgba(31, 41, 55, 0.5);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin: 1.25em 0;
-  overflow-x: auto;
-}
-
-.prose pre code {
-  background-color: transparent;
-  padding: 0;
-  border-radius: 0;
-  color: inherit;
-}
-
-.prose h1, .prose h2, .prose h3, .prose h4 {
-  color: #f9fafb; /* text-gray-50 */
-}
-
-.prose ul, .prose ol {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-  padding-left: 1.625em;
-}
-
-.prose li {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.prose blockquote {
-  border-left-color: #f97316; /* orange-500 */
-  background-color: rgba(249, 115, 22, 0.1);
-  padding: 1em;
-  margin: 1.25em 0;
-  border-radius: 0.5rem;
-}
-
-.prose hr {
-  border-color: rgba(249, 115, 22, 0.2);
-  margin: 2em 0;
-}
-
-.prose a {
-  color: #f97316; /* orange-500 */
-  text-decoration: underline;
-  text-decoration-thickness: 0.1em;
-  text-underline-offset: 0.2em;
-}
-
-.prose a:hover {
-  color: #fb923c; /* orange-400 */
-}
-
-.prose table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1.25em 0;
-}
-
-.prose th, .prose td {
-  padding: 0.75em;
-  border: 1px solid rgba(249, 115, 22, 0.2);
-}
-
-.prose th {
-  background-color: rgba(249, 115, 22, 0.1);
-  font-weight: 600;
-}
-
-/* Message transition animations */
-.message-enter {
-  opacity: 0;
-  transform: translateY(10px);
-}
-
-.message-enter-active {
-  opacity: 1;
-  transform: translateY(0);
-  transition: opacity 300ms, transform 300ms;
-}
-
-.message-exit {
-  opacity: 1;
-}
-
-.message-exit-active {
-  opacity: 0;
-  transition: opacity 300ms;
-}
-
-/* Add/update these styles to match AI formatting capabilities */
-.prose h1 {
-  font-size: 2em;
-  margin-bottom: 0.5em;
-}
-
-.prose h2 {
-  font-size: 1.5em;
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-}
-
-.prose h3 {
-  font-size: 1.25em;
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-}
-
-.prose ul {
-  list-style-type: disc;
-  padding-left: 1.5em;
-}
-
-.prose ol {
-  list-style-type: decimal;
-  padding-left: 1.5em;
-}
-
-.prose table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1em 0;
-}
-
-.prose th,
-.prose td {
-  border: 1px solid rgba(249, 115, 22, 0.2);
-  padding: 0.5em;
-}
-
-.prose th {
-  background-color: rgba(249, 115, 22, 0.1);
-}
-
-.prose strong {
-  color: #f9fafb; /* text-gray-50 */
-  font-weight: 600;
-}
-
-.prose em {
-  font-style: italic;
-}
-
-.prose blockquote {
-  border-left: 4px solid #f97316; /* orange-500 */
-  padding-left: 1em;
-  margin: 1em 0;
-  color: #d1d5db; /* text-gray-300 */
-}
-
-/* Ensure code blocks match the AI's formatting */
-.prose code {
-  color: #e5e7eb;
-  background-color: rgba(31, 41, 55, 0.5);
-  padding: 0.2em 0.4em;
-  border-radius: 0.375rem;
-  font-size: 0.875em;
-}
-
-.prose pre {
-  background-color: rgba(31, 41, 55, 0.5);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin: 1em 0;
-}
-
-.prose pre code {
-  background-color: transparent;
-  padding: 0;
-  border-radius: 0;
-}

package/examples/marketing/info.json

@@ -1,33 +0,0 @@
-{
-  "name": "Marketing",
-  "description": "AI-powered motorcycle marketing site with TanStack AI chat assistant for Netlify.",
-  "phase": "example",
-  "modes": ["file-router"],
-  "type": "example",
-  "priority": 10,
-  "link": "",
-  "routes": [
-    {"url": "/", "name": "Home", "path": "src/routes/index.tsx", "jsName": "MotorcyclesIndex"},
-    {"url": "/motorcycles/$motorcycleId", "path": "src/routes/motorcycles/$motorcycleId.tsx", "jsName": "MotorcycleDetail"},
-    {"url": "/api/motorcycle-chat", "path": "src/routes/api.motorcycle-chat.ts", "jsName": "MotorcycleChatAPI"}
-  ],
-  "features": ["tanstack-start", "tanstack-ai"],
-  "integrations": [],
-  "dependsOn": [],
-  "variables": [],
-  "bareBones": {"deleteFiles": ["public/motorcycle-adventure.jpg", "public/motorcycle-cruiser.jpg", "public/motorcycle-sport.jpg", "public/motorcycle-supersport.jpg"]},
-  "packageFileDescriptions": {
-    "src/routes/index.tsx": "Marketing home: motorcycle showcase, MotorcycleAIAssistant.",
-    "src/routes/motorcycles/$motorcycleId.tsx": "Motorcycle detail page with recommendation.",
-    "src/routes/api.motorcycle-chat.ts": "POST handler for motorcycle AI chat.",
-    "src/routes/__root.tsx": "Root layout: Header, styles.",
-    "src/styles.css": "Global styles.",
-    "src/data/motorcycles.ts.ejs": "Motorcycle catalog data template.",
-    "src/lib/motorcycle-tools.ts": "AI tools: getMotorcycles, recommendMotorcycle.",
-    "src/lib/motorcycle-ai-hook.ts": "useMotorcycleChat hook.",
-    "src/store/motorcycle-assistant.ts": "Zustand store for assistant state.",
-    "src/components/Header.tsx": "Header.",
-    "src/components/MotorcycleAIAssistant.tsx": "AI marketing assistant.",
-    "src/components/MotorcycleRecommendation.tsx": "Motorcycle recommendation card."
-  }
-}

package/examples/marketing/package.json

@@ -1,14 +0,0 @@
-{
-  "dependencies": {
-    "@tanstack/ai": "0.2.2",
-    "@tanstack/ai-anthropic": "0.2.0",
-    "@tanstack/ai-client": "0.2.2",
-    "@tanstack/ai-react": "0.2.2",
-    "@tanstack/react-ai-devtools": "0.2.1",
-    "@tanstack/react-store": "^0.8.0",
-    "@tanstack/store": "^0.8.0",
-    "highlight.js": "^11.11.1",
-    "streamdown": "^2.1.0",
-    "zod": "^4.3.6"
-  }
-}