@tanstack/cta-framework-react-cra 0.44.3 → 0.45.0

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

@@ -0,0 +1,194 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&display=swap');
+@import 'tailwindcss';
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+/* Haute Patisserie Dark Theme */
+:root {
+  /* Core colors - Dark elegant bakery */
+  --background: oklch(0.13 0.01 60);
+  --foreground: oklch(0.93 0.02 85);
+
+  /* Warm cream for cards */
+  --card: oklch(0.17 0.015 55);
+  --card-foreground: oklch(0.93 0.02 85);
+
+  /* Copper accent */
+  --primary: oklch(0.65 0.14 55);
+  --primary-foreground: oklch(0.13 0.01 60);
+
+  /* Antique gold */
+  --secondary: oklch(0.72 0.12 85);
+  --secondary-foreground: oklch(0.13 0.01 60);
+
+  /* Muted warm tones */
+  --muted: oklch(0.22 0.02 55);
+  --muted-foreground: oklch(0.65 0.03 85);
+
+  /* Accent - rich copper */
+  --accent: oklch(0.55 0.15 45);
+  --accent-foreground: oklch(0.95 0.02 85);
+
+  /* Destructive */
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.95 0.02 85);
+
+  /* Borders and inputs */
+  --border: oklch(0.28 0.03 55);
+  --input: oklch(0.22 0.02 55);
+  --ring: oklch(0.65 0.14 55);
+
+  /* Chart colors - pastry inspired */
+  --chart-1: oklch(0.65 0.14 55);
+  --chart-2: oklch(0.72 0.12 85);
+  --chart-3: oklch(0.55 0.15 45);
+  --chart-4: oklch(0.6 0.1 30);
+  --chart-5: oklch(0.5 0.08 150);
+
+  --radius: 0.625rem;
+
+  /* Popover */
+  --popover: oklch(0.17 0.015 55);
+  --popover-foreground: oklch(0.93 0.02 85);
+
+  /* Sidebar */
+  --sidebar: oklch(0.15 0.01 55);
+  --sidebar-foreground: oklch(0.93 0.02 85);
+  --sidebar-primary: oklch(0.65 0.14 55);
+  --sidebar-primary-foreground: oklch(0.95 0.02 85);
+  --sidebar-accent: oklch(0.22 0.02 55);
+  --sidebar-accent-foreground: oklch(0.93 0.02 85);
+  --sidebar-border: oklch(0.28 0.03 55);
+  --sidebar-ring: oklch(0.65 0.14 55);
+}
+
+@theme inline {
+  --font-display: 'Playfair Display', Georgia, serif;
+  --font-body: 'Cormorant Garamond', Georgia, serif;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Custom colors for the theme */
+  --color-copper: oklch(0.65 0.14 55);
+  --color-copper-light: oklch(0.75 0.12 55);
+  --color-copper-dark: oklch(0.5 0.15 50);
+  --color-gold: oklch(0.72 0.12 85);
+  --color-gold-light: oklch(0.82 0.1 85);
+  --color-cream: oklch(0.93 0.02 85);
+  --color-cream-dark: oklch(0.85 0.03 80);
+  --color-charcoal: oklch(0.13 0.01 60);
+  --color-charcoal-light: oklch(0.2 0.015 55);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom utilities for the theme */
+.font-display {
+  font-family: 'Playfair Display', Georgia, serif;
+}
+
+.font-body {
+  font-family: 'Cormorant Garamond', Georgia, serif;
+}
+
+/* Elegant grain texture overlay */
+.grain-texture {
+  position: relative;
+}
+
+.grain-texture::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+/* Golden border accent */
+.border-gold-accent {
+  border-image: linear-gradient(
+      135deg,
+      oklch(0.72 0.12 85),
+      oklch(0.65 0.14 55),
+      oklch(0.72 0.12 85)
+    )
+    1;
+}
+
+/* Copper glow effect */
+.glow-copper {
+  box-shadow:
+    0 0 20px oklch(0.65 0.14 55 / 0.3),
+    0 0 40px oklch(0.65 0.14 55 / 0.1);
+}
+
+/* Elegant card hover effect */
+.card-hover {
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+.card-hover:hover {
+  transform: translateY(-4px);
+  box-shadow:
+    0 12px 40px oklch(0 0 0 / 0.4),
+    0 0 20px oklch(0.65 0.14 55 / 0.15);
+}

package/examples/events/info.json

@@ -0,0 +1,63 @@
+{
+  "name": "Events",
+  "description": "A pastry conference website with speakers, sessions, schedule, and AI assistant built with content-collections and TanStack Start for Netlify.",
+  "phase": "example",
+  "modes": ["file-router"],
+  "type": "example",
+  "priority": 10,
+  "link": "",
+  "routes": [
+    {
+      "url": "/",
+      "path": "src/routes/index.tsx",
+      "jsName": "EventsHome"
+    },
+    {
+      "url": "/schedule",
+      "path": "src/routes/schedule.index.tsx",
+      "name": "Schedule",
+      "jsName": "SchedulePage"
+    },
+    {
+      "url": "/speakers",
+      "path": "src/routes/speakers.index.tsx",
+      "name": "Speakers",
+      "jsName": "SpeakersPage"
+    },
+    {
+      "url": "/speakers/$slug",
+      "path": "src/routes/speakers.$slug.tsx",
+      "jsName": "SpeakerDetail"
+    },
+    {
+      "url": "/talks",
+      "path": "src/routes/talks.index.tsx",
+      "name": "Sessions",
+      "jsName": "TalksPage"
+    },
+    {
+      "url": "/talks/$slug",
+      "path": "src/routes/talks.$slug.tsx",
+      "jsName": "TalkDetail"
+    },
+    {
+      "url": "/api/remy-chat",
+      "path": "src/routes/api.remy-chat.ts",
+      "jsName": "RemyChatAPI"
+    }
+  ],
+  "integrations": [
+    {
+      "type": "header-user",
+      "path": "src/components/RemyButton",
+      "jsName": "RemyButton"
+    },
+    {
+      "type": "vite-plugin",
+      "import": "import contentCollections from '@content-collections/vite'",
+      "code": "contentCollections()"
+    }
+  ],
+  "dependsOn": [],
+  "variables": []
+}

package/examples/events/package.json

@@ -0,0 +1,23 @@
+{
+  "dependencies": {
+    "@tanstack/ai": "latest",
+    "@tanstack/ai-anthropic": "latest",
+    "@tanstack/ai-client": "latest",
+    "@tanstack/ai-gemini": "latest",
+    "@tanstack/ai-ollama": "latest",
+    "@tanstack/ai-openai": "latest",
+    "@tanstack/ai-react": "latest",
+    "@tanstack/store": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "marked": "^15.0.8",
+    "streamdown": "^1.6.5",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^4.3.5"
+  },
+  "devDependencies": {
+    "@content-collections/core": "^0.13.1",
+    "@content-collections/vite": "^0.2.8"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/cta-framework-react-cra",
-  "version": "0.44.3",
+  "version": "0.45.0",
   "description": "CTA Framework for React (Create React App)",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,7 @@
   "author": "Jack Herrington <jherr@pobox.com>",
   "license": "MIT",
   "dependencies": {
-    "@tanstack/cta-engine": "0.44.3"
+    "@tanstack/cta-engine": "0.45.0"
   },
   "devDependencies": {
     "@types/node": "^24.6.0",

package/examples/tanchat/assets/src/lib/model-selection.ts

@@ -1,78 +0,0 @@
-export type Provider = 'openai' | 'anthropic' | 'gemini' | 'ollama'
-
-export interface ModelOption {
-  provider: Provider
-  model: string
-  label: string
-}
-
-export const MODEL_OPTIONS: Array<ModelOption> = [
-  // OpenAI models
-  { provider: 'openai', model: 'gpt-4o', label: 'OpenAI - GPT-4o' },
-  { provider: 'openai', model: 'gpt-4o-mini', label: 'OpenAI - GPT-4o Mini' },
-
-  // Anthropic models
-  {
-    provider: 'anthropic',
-    model: 'claude-haiku-4-5',
-    label: 'Anthropic - Claude Haiku 4.5',
-  },
-  {
-    provider: 'anthropic',
-    model: 'claude-sonnet-4-5-20250929',
-    label: 'Anthropic - Claude Sonnet 4.5',
-  },
-
-  // Gemini models
-  {
-    provider: 'gemini',
-    model: 'gemini-2.0-flash-exp',
-    label: 'Gemini - 2.0 Flash',
-  },
-
-  // Ollama models
-  { provider: 'ollama', model: 'mistral:7b', label: 'Ollama - Mistral 7B' },
-]
-
-const STORAGE_KEY = 'tanstack-ai-model-preference'
-
-export function getStoredModelPreference(): ModelOption | null {
-  if (typeof window === 'undefined') return null
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY)
-    if (stored) {
-      const parsed = JSON.parse(stored)
-      // Validate that the stored option still exists in MODEL_OPTIONS
-      const found = MODEL_OPTIONS.find(
-        (o) => o.provider === parsed.provider && o.model === parsed.model,
-      )
-      if (found) return found
-    }
-  } catch {
-    // Ignore storage errors
-  }
-  return null
-}
-
-export function setStoredModelPreference(option: ModelOption): void {
-  if (typeof window === 'undefined') return
-  try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(option))
-  } catch {
-    // Ignore storage errors
-  }
-}
-
-export function getDefaultModelOption(): ModelOption {
-  return getStoredModelPreference() || MODEL_OPTIONS[0]
-}
-
-export function getModelOptionsForProvider(provider: Provider): ModelOption[] {
-  return MODEL_OPTIONS.filter((o) => o.provider === provider)
-}
-
-export function getAvailableModelOptions(
-  availableProviders: Provider[],
-): ModelOption[] {
-  return MODEL_OPTIONS.filter((o) => availableProviders.includes(o.provider))
-}

package/examples/tanchat/assets/src/lib/vendor-capabilities.ts

@@ -1,55 +0,0 @@
-import type { Provider } from './model-selection'
-
-export interface VendorCapabilities {
-  chat: boolean
-  structured: boolean
-  image: boolean
-  transcription: boolean
-  tts: boolean
-}
-
-export const VENDOR_CAPABILITIES: Record<Provider, VendorCapabilities> = {
-  openai: {
-    chat: true,
-    structured: true,
-    image: true,
-    transcription: true,
-    tts: true,
-  },
-  anthropic: {
-    chat: true,
-    structured: true,
-    image: false,
-    transcription: false,
-    tts: false,
-  },
-  gemini: {
-    chat: true,
-    structured: true,
-    image: false,
-    transcription: false,
-    tts: false,
-  },
-  ollama: {
-    chat: true,
-    structured: true,
-    image: false,
-    transcription: false,
-    tts: false,
-  },
-}
-
-export function hasCapability(
-  provider: Provider,
-  capability: keyof VendorCapabilities,
-): boolean {
-  return VENDOR_CAPABILITIES[provider]?.[capability] ?? false
-}
-
-export function getProvidersWithCapability(
-  capability: keyof VendorCapabilities,
-): Provider[] {
-  return (Object.keys(VENDOR_CAPABILITIES) as Provider[]).filter(
-    (provider) => VENDOR_CAPABILITIES[provider][capability],
-  )
-}

package/examples/tanchat/assets/src/routes/demo/api.available-providers.ts

@@ -1,35 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-import type { Provider } from '@/lib/model-selection'
-
-export const Route = createFileRoute('/demo/api/available-providers')({
-  server: {
-    handlers: {
-      GET: async () => {
-        const available: Provider[] = []
-
-        if (process.env.OPENAI_API_KEY) {
-          available.push('openai')
-        }
-        if (process.env.ANTHROPIC_API_KEY) {
-          available.push('anthropic')
-        }
-        if (process.env.GEMINI_API_KEY) {
-          available.push('gemini')
-        }
-        // Ollama is always available (local, no key needed)
-        available.push('ollama')
-
-        return new Response(
-          JSON.stringify({
-            providers: available,
-            hasOpenAI: available.includes('openai'),
-          }),
-          {
-            status: 200,
-            headers: { 'Content-Type': 'application/json' },
-          },
-        )
-      },
-    },
-  },
-})

package/examples/tanchat/assets/src/routes/demo/api.structured.ts

@@ -1,168 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { chat, createChatOptions } from "@tanstack/ai";
-import { anthropicText } from "@tanstack/ai-anthropic";
-import { geminiText } from "@tanstack/ai-gemini";
-import { openaiText } from "@tanstack/ai-openai";
-import { ollamaText } from "@tanstack/ai-ollama";
-import { z } from "zod";
-
-import type { Provider } from "@/lib/model-selection";
-
-// Schema for structured recipe output
-const RecipeSchema = z.object({
-  name: z.string().describe("The name of the recipe"),
-  description: z.string().describe("A brief description of the dish"),
-  prepTime: z.string().describe('Preparation time (e.g., "15 minutes")'),
-  cookTime: z.string().describe('Cooking time (e.g., "30 minutes")'),
-  servings: z.number().describe("Number of servings"),
-  difficulty: z.enum(["easy", "medium", "hard"]).describe("Difficulty level"),
-  ingredients: z
-    .array(
-      z.object({
-        item: z.string().describe("Ingredient name"),
-        amount: z.string().describe('Amount needed (e.g., "2 cups")'),
-        notes: z.string().optional().describe("Optional preparation notes"),
-      })
-    )
-    .describe("List of ingredients"),
-  instructions: z
-    .array(z.string())
-    .describe("Step-by-step cooking instructions"),
-  tips: z.array(z.string()).optional().describe("Optional cooking tips"),
-  nutritionPerServing: z
-    .object({
-      calories: z.number().optional(),
-      protein: z.string().optional(),
-      carbs: z.string().optional(),
-      fat: z.string().optional(),
-    })
-    .optional()
-    .describe("Nutritional information per serving"),
-});
-
-export type Recipe = z.infer<typeof RecipeSchema>;
-
-export const Route = createFileRoute("/demo/api/structured")({
-  server: {
-    handlers: {
-      POST: async ({ request }) => {
-        const body = await request.json();
-        const { recipeName, mode = "structured" } = body;
-        const data = body.data || {};
-        const provider: Provider = data.provider || body.provider || "openai";
-        const model: string = data.model || body.model || "gpt-4o";
-
-        if (!recipeName || recipeName.trim().length === 0) {
-          return new Response(
-            JSON.stringify({
-              error: "Recipe name is required",
-            }),
-            {
-              status: 400,
-              headers: { "Content-Type": "application/json" },
-            }
-          );
-        }
-
-        try {
-          // Pre-define typed adapter configurations
-          const adapterConfig = {
-            anthropic: () =>
-              createChatOptions({
-                adapter: anthropicText(
-                  (model || "claude-sonnet-4-5-20250929") as any
-                ),
-              }),
-            gemini: () =>
-              createChatOptions({
-                adapter: geminiText((model || "gemini-2.0-flash-exp") as any),
-              }),
-            ollama: () =>
-              createChatOptions({
-                adapter: ollamaText((model || "mistral:7b") as any),
-              }),
-            openai: () =>
-              createChatOptions({
-                adapter: openaiText((model || "gpt-4o") as any),
-              }),
-          };
-
-          const options = adapterConfig[provider]();
-
-          if (mode === "structured") {
-            // Structured output mode - returns validated object
-            const result = await chat({
-              ...options,
-              messages: [
-                {
-                  role: "user",
-                  content: `Generate a complete recipe for: ${recipeName}. Include all ingredients with amounts, step-by-step instructions, prep/cook times, and difficulty level.`,
-                },
-              ],
-              outputSchema: RecipeSchema,
-            } as any);
-
-            return new Response(
-              JSON.stringify({
-                mode: "structured",
-                recipe: result,
-                provider,
-                model,
-              }),
-              {
-                status: 200,
-                headers: { "Content-Type": "application/json" },
-              }
-            );
-          } else {
-            // One-shot markdown mode - returns text
-            const markdown = await chat({
-              ...options,
-              stream: false,
-              messages: [
-                {
-                  role: "user",
-                  content: `Generate a complete recipe for: ${recipeName}.
-
-Format the recipe in beautiful markdown with:
-- A title with the recipe name
-- A brief description
-- Prep time, cook time, and servings
-- Ingredients list with amounts
-- Numbered step-by-step instructions
-- Optional tips section
-- Nutritional info if applicable
-
-Make it detailed and easy to follow.`,
-                },
-              ],
-            } as any);
-
-            return new Response(
-              JSON.stringify({
-                mode: "oneshot",
-                markdown,
-                provider,
-                model,
-              }),
-              {
-                status: 200,
-                headers: { "Content-Type": "application/json" },
-              }
-            );
-          }
-        } catch (error: any) {
-          return new Response(
-            JSON.stringify({
-              error: error.message || "An error occurred",
-            }),
-            {
-              status: 500,
-              headers: { "Content-Type": "application/json" },
-            }
-          );
-        }
-      },
-    },
-  },
-});