@tanstack/create 0.49.1

package/dist/frameworks/react/examples/events/assets/src/routes/speakers.$slug.tsx

@@ -0,0 +1,122 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { marked } from 'marked'
+import { MapPin, Award, ArrowLeft } from 'lucide-react'
+import { Link } from '@tanstack/react-router'
+
+import { allSpeakers, allTalks } from 'content-collections'
+
+import RemyAssistant from '@/components/RemyAssistant'
+import TalkCard from '@/components/TalkCard'
+
+export const Route = createFileRoute('/speakers/$slug')({
+  loader: async ({ params }) => {
+    const speaker = allSpeakers.find((s) => s.slug === params.slug)
+    if (!speaker) {
+      throw new Error('Speaker not found')
+    }
+    const speakerTalks = allTalks.filter((t) => t.speaker === speaker.name)
+    return { speaker, speakerTalks }
+  },
+  component: SpeakerDetailPage,
+})
+
+function SpeakerDetailPage() {
+  const { speaker, speakerTalks } = Route.useLoaderData()
+
+  return (
+    <div className="min-h-screen">
+      <RemyAssistant />
+
+      {/* Back navigation */}
+      <div className="max-w-7xl mx-auto px-6 py-4">
+        <Link 
+          to="/speakers" 
+          className="inline-flex items-center gap-2 text-cream/60 hover:text-gold transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          <span>All Speakers</span>
+        </Link>
+      </div>
+
+      {/* Hero section */}
+      <div className="relative py-12 px-6">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
+            {/* Photo */}
+            <div className="lg:col-span-1">
+              <div className="aspect-square rounded-2xl overflow-hidden border border-border/50">
+                <img 
+                  src={`/${speaker.headshot}`} 
+                  alt={speaker.name}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            </div>
+
+            {/* Info */}
+            <div className="lg:col-span-2 flex flex-col justify-center">
+              {/* Specialty tag */}
+              <span className="inline-block w-fit px-4 py-1.5 text-sm font-medium tracking-wider uppercase bg-copper/20 text-copper-light rounded-full border border-copper/30 mb-4">
+                {speaker.specialty}
+              </span>
+
+              <h1 className="font-display text-5xl md:text-6xl font-bold text-cream mb-3">
+                {speaker.name}
+              </h1>
+
+              <p className="text-2xl text-gold font-display italic mb-4">
+                {speaker.title}
+              </p>
+
+              <div className="flex items-center gap-2 text-cream/60 text-lg mb-8">
+                <MapPin className="w-5 h-5 text-copper" />
+                <span>{speaker.restaurant}, {speaker.location}</span>
+              </div>
+
+              {/* Awards */}
+              {speaker.awards && speaker.awards.length > 0 && (
+                <div className="space-y-3">
+                  <h3 className="text-sm font-medium tracking-wider uppercase text-cream/50">Awards & Recognition</h3>
+                  <div className="flex flex-wrap gap-2">
+                    {speaker.awards.map((award) => (
+                      <span 
+                        key={award}
+                        className="inline-flex items-center gap-2 px-3 py-1.5 text-sm bg-gold/10 text-gold/90 rounded-lg border border-gold/20"
+                      >
+                        <Award className="w-3.5 h-3.5" />
+                        {award}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bio section */}
+      <div className="max-w-4xl mx-auto px-6 py-12">
+        <div className="prose prose-lg max-w-none prose-invert prose-p:text-cream/80 prose-headings:text-cream prose-headings:font-display prose-strong:text-cream prose-a:text-gold font-body text-lg leading-relaxed">
+          <div
+            dangerouslySetInnerHTML={{ __html: marked(speaker.content) }}
+          />
+        </div>
+      </div>
+
+      {/* Speaker's talks */}
+      {speakerTalks.length > 0 && (
+        <div className="max-w-7xl mx-auto px-6 py-12">
+          <h2 className="font-display text-3xl font-bold text-cream mb-8">
+            Sessions by {speaker.name}
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {speakerTalks.map((talk) => (
+              <TalkCard key={talk.slug} talk={talk} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/dist/frameworks/react/examples/events/assets/src/routes/speakers.index.tsx

@@ -0,0 +1,40 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { allSpeakers } from 'content-collections'
+
+import SpeakerCard from '@/components/SpeakerCard'
+import RemyAssistant from '@/components/RemyAssistant'
+
+export const Route = createFileRoute('/speakers/')({
+  component: SpeakersPage,
+})
+
+function SpeakersPage() {
+  return (
+    <>
+      <RemyAssistant />
+      <div className="min-h-screen">
+        {/* Hero section */}
+        <div className="relative py-16 px-6">
+          <div className="max-w-7xl mx-auto text-center">
+            <h1 className="font-display text-5xl md:text-6xl font-bold text-cream mb-4">
+              Our <span className="text-gold italic">Distinguished</span> Speakers
+            </h1>
+            <p className="text-xl text-cream/70 max-w-2xl mx-auto font-body">
+              Meet the world-renowned pastry chefs and master bakers who will share their expertise at Haute Pâtisserie 2026.
+            </p>
+          </div>
+        </div>
+
+        {/* Speakers grid */}
+        <div className="max-w-7xl mx-auto px-6 pb-20">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {allSpeakers.map((speaker) => (
+              <SpeakerCard key={speaker.slug} speaker={speaker} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/dist/frameworks/react/examples/events/assets/src/routes/talks.$slug.tsx

@@ -0,0 +1,116 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { marked } from 'marked'
+import { Clock, User, ArrowLeft, Tag } from 'lucide-react'
+
+import { allTalks, allSpeakers } from 'content-collections'
+
+import RemyAssistant from '@/components/RemyAssistant'
+
+export const Route = createFileRoute('/talks/$slug')({
+  loader: async ({ params }) => {
+    const talk = allTalks.find((t) => t.slug === params.slug)
+    if (!talk) {
+      throw new Error('Talk not found')
+    }
+    const speaker = allSpeakers.find((s) => s.name === talk.speaker)
+    return { talk, speaker }
+  },
+  component: TalkDetailPage,
+})
+
+function TalkDetailPage() {
+  const { talk, speaker } = Route.useLoaderData()
+
+  return (
+    <div className="min-h-screen">
+      <RemyAssistant />
+
+      {/* Back navigation */}
+      <div className="max-w-7xl mx-auto px-6 py-4">
+        <Link 
+          to="/talks" 
+          className="inline-flex items-center gap-2 text-cream/60 hover:text-gold transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          <span>All Sessions</span>
+        </Link>
+      </div>
+
+      {/* Hero image */}
+      <div className="relative h-[40vh] max-w-7xl mx-auto px-6 mb-8">
+        <div className="w-full h-full rounded-2xl overflow-hidden border border-border/50">
+          <img 
+            src={`/${talk.image}`} 
+            alt={talk.title}
+            className="w-full h-full object-cover"
+          />
+        </div>
+        <div className="absolute inset-6 bg-gradient-to-t from-charcoal/60 to-transparent rounded-2xl pointer-events-none" />
+      </div>
+
+      {/* Content */}
+      <div className="max-w-4xl mx-auto px-6">
+        {/* Topics */}
+        <div className="flex flex-wrap gap-2 mb-6">
+          {talk.topics.map((topic) => (
+            <span 
+              key={topic}
+              className="inline-flex items-center gap-1.5 px-3 py-1 text-sm font-medium tracking-wide uppercase bg-gold/15 text-gold border border-gold/30 rounded-full"
+            >
+              <Tag className="w-3 h-3" />
+              {topic}
+            </span>
+          ))}
+        </div>
+
+        {/* Title */}
+        <h1 className="font-display text-4xl md:text-5xl font-bold text-cream mb-6 leading-tight">
+          {talk.title}
+        </h1>
+
+        {/* Meta info */}
+        <div className="flex flex-wrap items-center gap-6 mb-10 pb-10 border-b border-border/50">
+          {/* Speaker link */}
+          {speaker ? (
+            <Link 
+              to={`/speakers/${speaker.slug}`}
+              className="flex items-center gap-3 group"
+            >
+              <div className="w-12 h-12 rounded-full overflow-hidden border border-border/50">
+                <img 
+                  src={`/${speaker.headshot}`} 
+                  alt={speaker.name}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <div>
+                <p className="text-cream group-hover:text-gold transition-colors font-medium">
+                  {talk.speaker}
+                </p>
+                <p className="text-cream/50 text-sm">{speaker.restaurant}</p>
+              </div>
+            </Link>
+          ) : (
+            <div className="flex items-center gap-2 text-cream/70">
+              <User className="w-5 h-5 text-copper" />
+              <span>{talk.speaker}</span>
+            </div>
+          )}
+
+          {/* Duration */}
+          <div className="flex items-center gap-2 text-cream/60">
+            <Clock className="w-5 h-5 text-copper" />
+            <span className="text-lg">{talk.duration}</span>
+          </div>
+        </div>
+
+        {/* Description content */}
+        <div className="prose prose-lg max-w-none prose-invert prose-p:text-cream/80 prose-headings:text-cream prose-headings:font-display prose-strong:text-cream prose-a:text-gold prose-li:text-cream/80 prose-ul:text-cream/80 font-body text-lg leading-relaxed pb-20">
+          <div
+            dangerouslySetInnerHTML={{ __html: marked(talk.content) }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/frameworks/react/examples/events/assets/src/routes/talks.index.tsx

@@ -0,0 +1,40 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { allTalks } from 'content-collections'
+
+import TalkCard from '@/components/TalkCard'
+import RemyAssistant from '@/components/RemyAssistant'
+
+export const Route = createFileRoute('/talks/')({
+  component: TalksPage,
+})
+
+function TalksPage() {
+  return (
+    <>
+      <RemyAssistant />
+      <div className="min-h-screen">
+        {/* Hero section */}
+        <div className="relative py-16 px-6">
+          <div className="max-w-7xl mx-auto text-center">
+            <h1 className="font-display text-5xl md:text-6xl font-bold text-cream mb-4">
+              Conference <span className="text-gold italic">Sessions</span>
+            </h1>
+            <p className="text-xl text-cream/70 max-w-2xl mx-auto font-body">
+              Immerse yourself in masterclasses and demonstrations covering every aspect of artisan baking and pastry.
+            </p>
+          </div>
+        </div>
+
+        {/* Talks grid */}
+        <div className="max-w-7xl mx-auto px-6 pb-20">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {allTalks.map((talk) => (
+              <TalkCard key={talk.slug} talk={talk} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/dist/frameworks/react/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/dist/frameworks/react/examples/events/info.json

@@ -0,0 +1,65 @@
+{
+  "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",
+  "category": "other",
+  "color": "#F59E0B",
+  "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/dist/frameworks/react/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/dist/frameworks/react/examples/resume/README.md

@@ -0,0 +1,82 @@
+# Resume Example
+
+A professional resume template built with TanStack Start and content-collections for Netlify deployment.
+
+## Features
+
+- **Content Collections**: Work experience and education managed as markdown files
+- **Skills Filter**: Interactive sidebar to filter jobs by skills/technologies
+- **Beautiful UI**: Modern design with shadcn/ui components
+- **SSR Ready**: Full server-side rendering with TanStack Start
+
+## Project Structure
+
+```
+├── content/
+│   ├── jobs/              # Work experience entries
+│   └── education/         # Education entries
+├── src/
+│   ├── components/
+│   │   └── ui/            # Shadcn UI components
+│   │       ├── badge.tsx
+│   │       ├── card.tsx
+│   │       ├── checkbox.tsx
+│   │       ├── hover-card.tsx
+│   │       └── separator.tsx
+│   ├── lib/
+│   │   └── utils.ts       # Utility functions
+│   └── routes/
+│       ├── __root.tsx     # Root layout
+│       └── index.tsx      # Resume page
+└── public/
+    └── headshot-on-white.jpg
+```
+
+## Adding Work Experience
+
+Create a new markdown file in `content/jobs/` with the following frontmatter:
+
+```markdown
+---
+jobTitle: Your Job Title
+company: Company Name
+location: City, State
+startDate: 2024-01-01
+endDate: 2024-12-31  # Optional - omit for current position
+summary: Brief summary of your role
+tags:
+  - React
+  - TypeScript
+  - Web Development
+---
+
+Detailed description of your responsibilities and achievements...
+```
+
+## Adding Education
+
+Create a new markdown file in `content/education/`:
+
+```markdown
+---
+school: School Name
+summary: Degree or Program Name
+startDate: 2020-01-01
+endDate: 2024-01-01
+tags:
+  - Relevant
+  - Skills
+---
+
+Details about your education...
+```
+
+## Development
+
+```bash
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+```