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

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/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
+```

package/examples/resume/assets/content/education/code-school.md

@@ -0,0 +1,17 @@
+---
+school: Code School
+summary: Full Stack Development
+startDate: 2020-01-01
+endDate: 2020-12-31
+tags:
+  [
+    "Full Stack Development",
+    "JavaScript",
+    "React",
+    "Node.js",
+    "Express",
+    "MongoDB",
+  ]
+---
+
+Completed a comprehensive full stack development course covering JavaScript, React, Node.js, Express, and MongoDB. Gained hands-on experience with modern web development frameworks and databases while building a full stack application.

package/examples/resume/assets/content/jobs/freelance.md

@@ -0,0 +1,13 @@
+---
+jobTitle: Frontend Development Consultant
+company: Freelance
+location: Remote
+startDate: 2020-01-01
+endDate: 2020-12-31
+summary: Independent frontend development consultant working with multiple clients on web applications and sites
+description:
+tags:
+  ["React", "TypeScript", "Frontend Development", "JavaScript", "CSS", "HTML"]
+---
+
+Provided expert frontend development services to various clients, specializing in React, TypeScript, and modern web technologies. Delivered responsive and performant web applications while maintaining high code quality and best practices.

package/examples/resume/assets/content/jobs/initech-junior.md

@@ -0,0 +1,20 @@
+---
+jobTitle: Junior Frontend Developer
+company: IniTech
+location: Remote
+startDate: 2021-01-01
+endDate: 2021-12-31
+summary: Junior frontend developer working on React-based web applications using modern development practices
+description:
+tags:
+  [
+    "React",
+    "TypeScript",
+    "Frontend Development",
+    "JavaScript",
+    "TanStack",
+    "Web Development",
+  ]
+---
+
+Worked as a junior frontend developer at IniTech, contributing to React-based web applications. Collaborated with the development team to implement responsive user interfaces, integrate REST APIs, and maintain code quality. Gained hands-on experience with modern frontend technologies and development workflows while working on production applications.

package/examples/resume/assets/content/jobs/initech-lead.md

@@ -0,0 +1,29 @@
+---
+jobTitle: Frontend Team Lead
+company: IniTech
+location: Remote
+startDate: 2022-01-01
+endDate: 2022-12-31
+summary: Led a cross-functional team of three engineers in developing and maintaining IniTech's marketing platform, driving technical decisions and implementing modern development practices
+description:
+tags:
+  [
+    "React",
+    "TypeScript",
+    "Team Leadership",
+    "Frontend Architecture",
+    "Technical Leadership",
+    "Project Management",
+    "TanStack",
+    "Web Development",
+  ]
+---
+
+Led the development and maintenance of IniTech's marketing platform as Frontend Team Lead, managing a cross-functional team of three engineers including a backend developer and a DevOps engineer. Key achievements and responsibilities included:
+
+- Architected and implemented a modern React-based marketing platform using TypeScript and TanStack, resulting in a 40% improvement in page load times
+- Managed and mentored a team of three engineers, conducting regular code reviews, sprint planning, and technical guidance
+- Collaborated with marketing stakeholders to define and implement new features while maintaining high code quality and performance standards
+- Established CI/CD pipelines and development workflows in partnership with DevOps, reducing deployment time by 60%
+- Coordinated with the backend developer to design and implement RESTful APIs, ensuring seamless integration between frontend and backend systems
+- Introduced modern development practices including automated testing, component documentation, and performance monitoring

package/examples/resume/assets/content/jobs/initrode-senior.md

@@ -0,0 +1,28 @@
+---
+jobTitle: Senior Frontend Developer
+company: Initrode
+location: Remote
+startDate: 2024-01-01
+summary: Developed and architected real-time data visualization features for Initrode's enterprise dashboard platform, implementing a robust WebSocket layer and optimizing performance for large-scale data streams
+description:
+tags:
+  [
+    "React",
+    "TypeScript",
+    "WebSockets",
+    "Real-time Data",
+    "System Architecture",
+    "Performance Optimization",
+    "TanStack",
+    "Web Development",
+  ]
+---
+
+Served as a Senior Frontend Developer on Initrode's Dashboard team, focusing on building high-performance, real-time data visualization features for enterprise clients. Key achievements and responsibilities included:
+
+- Designed and implemented a WebSocket-based real-time data transport layer, enabling live updates for dashboard components with sub-100ms latency
+- Architected and developed a modular dashboard framework using React and TypeScript, supporting dynamic widget composition and real-time data streams
+- Optimized frontend performance for handling large-scale data sets, implementing efficient data structures and virtualization techniques that improved rendering performance by 65%
+- Built reusable charting and visualization components using D3.js and TanStack libraries, supporting real-time updates and complex data transformations
+- Implemented client-side data caching and state management strategies, reducing server load by 40% while maintaining data consistency
+- Developed automated testing suites for WebSocket connections and real-time data flow, achieving 90% test coverage for critical paths

package/examples/resume/assets/content-collections.ts

@@ -0,0 +1,36 @@
+import { defineCollection, defineConfig } from '@content-collections/core'
+import { z } from 'zod'
+
+const jobs = defineCollection({
+  name: 'jobs',
+  directory: 'content/jobs',
+  include: '**/*.md',
+  schema: z.object({
+    jobTitle: z.string(),
+    summary: z.string(),
+    startDate: z.string(),
+    endDate: z.string().optional(),
+    company: z.string(),
+    location: z.string(),
+    tags: z.array(z.string()),
+    content: z.string(),
+  }),
+})
+
+const education = defineCollection({
+  name: 'education',
+  directory: 'content/education',
+  include: '**/*.md',
+  schema: z.object({
+    school: z.string(),
+    summary: z.string(),
+    startDate: z.string(),
+    endDate: z.string().optional(),
+    tags: z.array(z.string()),
+    content: z.string(),
+  }),
+})
+
+export default defineConfig({
+  collections: [jobs, education],
+})