kaddidlehopper 0.1.0

package/add-ons/ai/assets/src/routes/chat.css

@@ -0,0 +1,175 @@
+@import "tailwindcss";
+@import "highlight.js/styles/github-dark.css";
+@source "../../../../node_modules/streamdown/dist/*.js";
+
+/* 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;
+}
+
+/* Heading styles */
+.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 strong {
+  color: #f9fafb; /* text-gray-50 */
+  font-weight: 600;
+}
+
+.prose em {
+  font-style: italic;
+}

package/add-ons/ai/assets/src/routes/chat.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useRef, useState } from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+import { Send, Square } from 'lucide-react'
+import { Streamdown } from 'streamdown'
+
+import { useAIChat } from '@/lib/ai-hook'
+import type { ChatMessages } from '@/lib/ai-hook'
+
+import './chat.css'
+
+function Messages({ messages }: { messages: ChatMessages }) {
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop =
+        messagesContainerRef.current.scrollHeight
+    }
+  }, [messages])
+
+  if (!messages.length) {
+    return null
+  }
+
+  return (
+    <div
+      ref={messagesContainerRef}
+      className="flex-1 overflow-y-auto pb-4 min-h-0"
+    >
+      <div className="max-w-3xl mx-auto w-full px-4">
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={`p-4 ${
+              message.role === 'assistant'
+                ? 'bg-linear-to-r from-orange-500/5 to-red-600/5'
+                : 'bg-transparent'
+            }`}
+          >
+            <div className="flex items-start gap-4 max-w-3xl mx-auto w-full">
+              <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-sm font-medium text-white flex-shrink-0 ${
+                message.role === 'assistant'
+                  ? 'bg-linear-to-r from-orange-500 to-red-600'
+                  : 'bg-gray-700'
+              }`}>
+                {message.role === 'assistant' ? 'AI' : 'Y'}
+              </div>
+              <div className="flex-1 min-w-0">
+                {message.parts.map((part, index) => {
+                  if (part.type === 'text' && part.content) {
+                    return (
+                      <div
+                        className="flex-1 min-w-0 prose dark:prose-invert max-w-none prose-sm"
+                        key={index}
+                      >
+                        <Streamdown>{part.content}</Streamdown>
+                      </div>
+                    )
+                  }
+                  return null
+                })}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ChatPage() {
+  const [input, setInput] = useState('')
+  const { messages, sendMessage, isLoading, stop } = useAIChat()
+
+  return (
+    <div className="relative flex h-[calc(100vh-80px)] bg-gray-900">
+      <div className="flex-1 flex flex-col min-h-0">
+        {messages.length === 0 && (
+          <div className="flex-1 flex items-center justify-center px-4">
+            <div className="text-center max-w-3xl mx-auto w-full">
+              <h1 className="text-4xl font-bold mb-4 text-white">
+                Weather Chat
+              </h1>
+              <p className="text-gray-400 mb-6">
+                Ask me about the weather! Try "What's the weather in Paris?"
+              </p>
+            </div>
+          </div>
+        )}
+        <Messages messages={messages} />
+
+        <div className="sticky bottom-0 left-0 right-0 bg-gray-900/80 backdrop-blur-sm border-t border-orange-500/10 z-10">
+          <div className="max-w-3xl mx-auto w-full px-4 py-3">
+            {isLoading && (
+              <div className="flex items-center justify-center mb-3">
+                <button
+                  onClick={stop}
+                  className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+                >
+                  <Square className="w-4 h-4 fill-current" />
+                  Stop
+                </button>
+              </div>
+            )}
+            <form
+              onSubmit={(e) => {
+                e.preventDefault()
+                if (input.trim()) {
+                  sendMessage(input)
+                  setInput('')
+                }
+              }}
+            >
+              <div className="relative max-w-xl mx-auto flex items-center gap-2">
+                <input
+                  type="text"
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder="Ask about the weather..."
+                  className="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 px-4 py-3 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50"
+                  disabled={isLoading}
+                />
+                <button
+                  type="submit"
+                  disabled={!input.trim() || isLoading}
+                  className="p-3 bg-orange-500 hover:bg-orange-600 disabled:bg-gray-600 text-white rounded-lg transition-colors"
+                >
+                  <Send className="w-4 h-4" />
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Route = createFileRoute('/chat')({
+  component: ChatPage,
+})

package/add-ons/ai/info.json

@@ -0,0 +1,27 @@
+{
+  "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"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "header-user",
+      "path": "src/components/AIAssistant.tsx",
+      "jsName": "AIAssistant"
+    }
+  ],
+  "dependsOn": [],
+  "variables": []
+}

package/add-ons/ai/package.json

@@ -0,0 +1,17 @@
+{
+  "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

@@ -0,0 +1,8 @@
+<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/dist/cli.js

@@ -0,0 +1,251 @@
+import { resolve, basename, join } from 'node:path';
+import { unlink } from 'node:fs/promises';
+import { Command, InvalidArgumentError } from 'commander';
+import chalk from 'chalk';
+import validatePackageName from 'validate-npm-package-name';
+import { SUPPORTED_PACKAGE_MANAGERS, createApp, createDefaultEnvironment, finalizeAddOns, getAllAddOns, getFrameworkByName, getPackageManager, DEFAULT_PACKAGE_MANAGER, populateAddOnOptionsDefaults, } from '@tanstack/cta-engine';
+// Utility functions
+function sanitizePackageName(name) {
+    return name
+        .toLowerCase()
+        .replace(/\s+/g, '-')
+        .replace(/_/g, '-')
+        .replace(/[^a-z0-9-]/g, '')
+        .replace(/^[^a-z]+/, '')
+        .replace(/-+/g, '-')
+        .replace(/-$/, '');
+}
+function getCurrentDirectoryName() {
+    return basename(process.cwd());
+}
+function validateProjectName(name) {
+    const { validForNewPackages, validForOldPackages, errors, warnings } = validatePackageName(name);
+    const error = errors?.[0] || warnings?.[0];
+    return {
+        valid: validForNewPackages && validForOldPackages,
+        error: error?.replace(/name/g, 'Project name') ||
+            'Project name does not meet npm package naming requirements',
+    };
+}
+// Create environment with UI functions for console output
+function createEnvironment(appName) {
+    const env = createDefaultEnvironment();
+    env.appName = appName;
+    env.intro = (message) => console.log(chalk.bold.cyan(message));
+    env.outro = (message) => console.log(chalk.bold.green(message));
+    env.info = (title, message) => {
+        if (title && message) {
+            console.log(chalk.blue(`${title}: ${message}`));
+        }
+        else if (title) {
+            console.log(chalk.blue(title));
+        }
+    };
+    env.error = (title, message) => {
+        if (title && message) {
+            console.error(chalk.red(`${title}: ${message}`));
+        }
+        else if (title) {
+            console.error(chalk.red(title));
+        }
+    };
+    env.warn = (title, message) => {
+        if (title && message) {
+            console.warn(chalk.yellow(`${title}: ${message}`));
+        }
+        else if (title) {
+            console.warn(chalk.yellow(title));
+        }
+    };
+    env.spinner = () => ({
+        start: (message) => console.log(chalk.gray(`⟳ ${message}`)),
+        stop: (message) => console.log(chalk.green(`✓ ${message}`)),
+    });
+    return env;
+}
+export function cli({ name, appName, defaultFramework, forcedMode, forcedAddOns = [], }) {
+    const environment = createEnvironment(appName);
+    const program = new Command();
+    const defaultMode = forcedMode || 'file-router';
+    program.name(name).description(`CLI to create a new ${appName} application`);
+    program.argument('[project-name]', 'name of the project');
+    program
+        .option('--no-install', 'skip installing dependencies')
+        .option(`--package-manager <${SUPPORTED_PACKAGE_MANAGERS.join('|')}>`, `Explicitly tell the CLI to use this package manager`, (value) => {
+        if (!SUPPORTED_PACKAGE_MANAGERS.includes(value)) {
+            throw new InvalidArgumentError(`Invalid package manager: ${value}. The following are allowed: ${SUPPORTED_PACKAGE_MANAGERS.join(', ')}`);
+        }
+        return value;
+    })
+        .option('--add-ons [...add-ons]', 'pick from a list of available add-ons (comma separated list)', (value) => {
+        let addOns = !!value;
+        if (typeof value === 'string') {
+            addOns = value.split(',').map((addon) => addon.trim());
+        }
+        return addOns;
+    })
+        .option('--list-add-ons', 'list all available add-ons', false)
+        .option('--list-addons-json', 'list all available add-ons as JSON', false)
+        .option('--addon-details <addon-id>', 'show detailed information about a specific add-on')
+        .option('--no-git', 'do not create a git repository')
+        .option('--target-dir <path>', 'the target directory for the application root')
+        .option('-f, --force', 'force project creation even if the target directory is not empty', false)
+        .option('--bare-bones', 'create minimal scaffolding for LLM modification', false);
+    program.action(async (projectName, options) => {
+        const framework = getFrameworkByName(defaultFramework);
+        if (!framework) {
+            console.error(`Framework '${defaultFramework}' not found`);
+            process.exit(1);
+        }
+        // Handle --list-addons-json
+        if (options.listAddonsJson) {
+            const addOns = await getAllAddOns(framework, defaultMode);
+            const serialized = addOns
+                .filter((a) => !forcedAddOns.includes(a.id))
+                .map((addon) => ({
+                id: addon.id,
+                name: addon.name,
+                description: addon.description,
+                type: addon.type,
+                options: addon.options,
+            }));
+            console.log(JSON.stringify(serialized, null, 2));
+            return;
+        }
+        // Handle --list-add-ons (text format)
+        if (options.listAddOns) {
+            const addOns = await getAllAddOns(framework, defaultMode);
+            let hasConfigurableAddOns = false;
+            for (const addOn of addOns.filter((a) => !forcedAddOns.includes(a.id))) {
+                const hasOptions = addOn.options && Object.keys(addOn.options).length > 0;
+                const optionMarker = hasOptions ? '*' : ' ';
+                if (hasOptions)
+                    hasConfigurableAddOns = true;
+                console.log(`${optionMarker} ${chalk.bold(addOn.id)}: ${addOn.description}`);
+            }
+            if (hasConfigurableAddOns) {
+                console.log('\n* = has configuration options');
+            }
+            return;
+        }
+        // Handle --addon-details
+        if (options.addonDetails) {
+            const addOns = await getAllAddOns(framework, defaultMode);
+            const addOn = addOns.find((a) => a.id === options.addonDetails);
+            if (!addOn) {
+                console.error(`Add-on '${options.addonDetails}' not found`);
+                process.exit(1);
+            }
+            console.log(`${chalk.bold.cyan('Add-on Details:')} ${chalk.bold(addOn.name)}`);
+            console.log(`${chalk.bold('ID:')} ${addOn.id}`);
+            console.log(`${chalk.bold('Description:')} ${addOn.description}`);
+            console.log(`${chalk.bold('Type:')} ${addOn.type}`);
+            console.log(`${chalk.bold('Phase:')} ${addOn.phase}`);
+            console.log(`${chalk.bold('Supported Modes:')} ${addOn.modes.join(', ')}`);
+            if (addOn.dependsOn && addOn.dependsOn.length > 0) {
+                console.log(`${chalk.bold('Dependencies:')} ${addOn.dependsOn.join(', ')}`);
+            }
+            if (addOn.options && Object.keys(addOn.options).length > 0) {
+                console.log(`\n${chalk.bold.yellow('Configuration Options:')}`);
+                for (const [optionName, option] of Object.entries(addOn.options)) {
+                    if (option && typeof option === 'object' && 'type' in option) {
+                        const opt = option;
+                        console.log(`  ${chalk.bold(optionName)}:`);
+                        console.log(`    Label: ${opt.label}`);
+                        if (opt.description) {
+                            console.log(`    Description: ${opt.description}`);
+                        }
+                        console.log(`    Type: ${opt.type}`);
+                        console.log(`    Default: ${opt.default}`);
+                        if (opt.type === 'select' && opt.options) {
+                            console.log(`    Available values:`);
+                            for (const choice of opt.options) {
+                                console.log(`      - ${choice.value}: ${choice.label}`);
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                console.log(`\n${chalk.gray('No configuration options available')}`);
+            }
+            if (addOn.routes && addOn.routes.length > 0) {
+                console.log(`\n${chalk.bold.green('Routes:')}`);
+                for (const route of addOn.routes) {
+                    console.log(`  ${chalk.bold(route.url)} (${route.name})`);
+                    console.log(`    File: ${route.path}`);
+                }
+            }
+            return;
+        }
+        // Handle project creation
+        if (!projectName) {
+            console.error('Project name is required');
+            program.help();
+            return;
+        }
+        let resolvedProjectName = projectName;
+        let targetDir;
+        // Handle "." as project name - use current directory
+        if (projectName === '.') {
+            resolvedProjectName = sanitizePackageName(getCurrentDirectoryName());
+            targetDir = resolve(process.cwd());
+        }
+        else {
+            targetDir = options.targetDir
+                ? resolve(options.targetDir)
+                : resolve(process.cwd(), projectName);
+        }
+        const { valid, error } = validateProjectName(resolvedProjectName);
+        if (!valid) {
+            console.error(error);
+            process.exit(1);
+        }
+        // Determine selected add-ons
+        const selectedAddOns = new Set([...forcedAddOns]);
+        if (options.addOns && Array.isArray(options.addOns)) {
+            for (const a of options.addOns) {
+                selectedAddOns.add(a);
+            }
+        }
+        const chosenAddOns = await finalizeAddOns(framework, defaultMode, Array.from(selectedAddOns));
+        const finalOptions = {
+            projectName: resolvedProjectName,
+            targetDir,
+            framework,
+            mode: defaultMode,
+            typescript: true,
+            tailwind: true,
+            packageManager: options.packageManager ||
+                getPackageManager() ||
+                DEFAULT_PACKAGE_MANAGER,
+            git: options.git !== false,
+            install: options.install !== false,
+            chosenAddOns,
+            addOnOptions: {
+                ...populateAddOnOptionsDefaults(chosenAddOns),
+                project: { bareBones: options.bareBones ?? false },
+            },
+        };
+        environment.intro(`Creating a new ${appName} app in ${resolvedProjectName}...`);
+        await createApp(environment, finalOptions);
+        // Delete files specified in bareBones.deleteFiles for each add-on when in bare-bones mode
+        if (options.bareBones) {
+            for (const addOn of chosenAddOns) {
+                const addOnWithBareBones = addOn;
+                if (addOnWithBareBones.bareBones?.deleteFiles) {
+                    for (const file of addOnWithBareBones.bareBones.deleteFiles) {
+                        const filePath = join(targetDir, file);
+                        try {
+                            await unlink(filePath);
+                        }
+                        catch {
+                            // File may not exist, ignore errors
+                        }
+                    }
+                }
+            }
+        }
+    });
+    program.parse();
+}

package/dist/index.js

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { registerFramework, scanAddOnDirectories, scanProjectDirectory, } from '@tanstack/cta-engine';
+import { cli } from './cli.js';
+const projectDirectory = join(dirname(dirname(fileURLToPath(import.meta.url))), 'project');
+const addOns = scanAddOnDirectories([
+    join(dirname(dirname(fileURLToPath(import.meta.url))), 'add-ons'),
+    join(dirname(dirname(fileURLToPath(import.meta.url))), 'examples'),
+]);
+const { files, basePackageJSON, optionalPackages } = scanProjectDirectory(projectDirectory, join(dirname(dirname(fileURLToPath(import.meta.url))), 'project', 'base'));
+registerFramework({
+    id: 'netlify-start',
+    name: 'Netlify TanStack Start',
+    description: 'TanStack Start applications for Netlify deployment',
+    version: '0.1.0',
+    base: files,
+    addOns,
+    basePackageJSON,
+    optionalPackages,
+    supportedModes: {
+        'file-router': {
+            displayName: 'File Router',
+            description: 'File-based routing with TanStack Start',
+            forceTypescript: true,
+        },
+    },
+});
+cli({
+    name: 'netlify-cta',
+    appName: 'Netlify TanStack Start',
+    defaultFramework: 'Netlify TanStack Start',
+});

package/dist/types/cli.d.ts

@@ -0,0 +1,8 @@
+export interface CliConfig {
+    name: string;
+    appName: string;
+    defaultFramework: string;
+    forcedMode?: string;
+    forcedAddOns?: Array<string>;
+}
+export declare function cli({ name, appName, defaultFramework, forcedMode, forcedAddOns, }: CliConfig): void;

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/types/types.d.ts

@@ -0,0 +1,14 @@
+import type { PackageManager } from '@tanstack/cta-engine';
+export interface CliOptions {
+    projectName?: string;
+    packageManager?: PackageManager;
+    git?: boolean;
+    addOns?: Array<string> | boolean;
+    listAddOns?: boolean;
+    listAddonsJson?: boolean;
+    addonDetails?: string;
+    targetDir?: string;
+    install?: boolean;
+    force?: boolean;
+    bareBones?: boolean;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};