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

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

@@ -20,7 +20,7 @@ import GuitarRecommendation from '@/components/demo-GuitarRecommendation'
 
 import './ai-chat.css'
 
-function InitalLayout({ children }: { children: React.ReactNode }) {
+function InitialLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex-1 flex items-center justify-center px-4">
       <div className="text-center max-w-3xl mx-auto w-full">
@@ -187,7 +187,7 @@ function ChatPage() {
     }
   }
 
-  const Layout = messages.length ? ChattingLayout : InitalLayout
+  const Layout = messages.length ? ChattingLayout : InitialLayout
 
   return (
     <div className="relative flex h-[calc(100vh-80px)] bg-gray-900">

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],
+})

package/examples/resume/assets/src/components/ResumeAssistant.tsx

@@ -0,0 +1,193 @@
+import { useEffect, useRef, useState } from "react";
+import { Send, X, Briefcase, UserCheck } from "lucide-react";
+import { Streamdown } from "streamdown";
+import { Store } from "@tanstack/store";
+
+import { useResumeChat } from "@/lib/resume-ai-hook";
+import type { ResumeChatMessages } from "@/lib/resume-ai-hook";
+
+function Messages({ messages }: { messages: ResumeChatMessages }) {
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (messagesContainerRef.current) {
+      messagesContainerRef.current.scrollTop =
+        messagesContainerRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  if (!messages.length) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center text-slate-300/60 text-sm px-6 py-8">
+        <div className="relative mb-4">
+          <Briefcase className="w-12 h-12 text-blue-400/40 animate-pulse" />
+          <UserCheck className="w-6 h-6 text-purple-400/60 absolute -bottom-1 -right-1" />
+        </div>
+        <p className="text-center text-slate-200/80 font-medium">
+          Welcome, Recruiter!
+        </p>
+        <p className="text-xs text-slate-300/40 mt-2 text-center max-w-[200px]">
+          Ask about skills, experience, or qualifications...
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={messagesContainerRef} className="flex-1 overflow-y-auto">
+      {messages.map(({ id, role, parts }) => (
+        <div
+          key={id}
+          className={`py-3 ${
+            role === "assistant"
+              ? "bg-linear-to-r from-blue-500/5 via-purple-500/5 to-slate-500/5"
+              : "bg-transparent"
+          }`}
+        >
+          {parts.map((part, index) => {
+            if (part.type === "text" && part.content) {
+              return (
+                <div key={index} className="flex items-start gap-3 px-4">
+                  {role === "assistant" ? (
+                    <div className="w-7 h-7 rounded-full bg-linear-to-br from-blue-500 via-purple-500 to-slate-600 flex items-center justify-center text-xs font-bold text-white flex-shrink-0 shadow-lg shadow-blue-500/20">
+                      <Briefcase className="w-4 h-4" />
+                    </div>
+                  ) : (
+                    <div className="w-7 h-7 rounded-full bg-slate-600 flex items-center justify-center text-xs font-medium text-white flex-shrink-0">
+                      You
+                    </div>
+                  )}
+                  <div className="flex-1 min-w-0 text-slate-100 prose dark:prose-invert max-w-none prose-sm prose-p:text-slate-100 prose-headings:text-slate-200 prose-strong:text-slate-300">
+                    <Streamdown>{part.content}</Streamdown>
+                  </div>
+                </div>
+              );
+            }
+            return null;
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Export store for header control
+export const showResumeAssistant = new Store(false);
+
+export default function ResumeAssistant() {
+  const [isOpen, setIsOpen] = useState(false);
+  const { messages, sendMessage, isLoading } = useResumeChat();
+  const [input, setInput] = useState("");
+
+  // Sync with store for header control
+  useEffect(() => {
+    return showResumeAssistant.subscribe(() => {
+      setIsOpen(showResumeAssistant.state);
+    });
+  }, []);
+
+  const handleToggle = () => {
+    const newState = !isOpen;
+    setIsOpen(newState);
+    showResumeAssistant.setState(() => newState);
+  };
+
+  const handleSend = () => {
+    if (input.trim()) {
+      sendMessage(input);
+      setInput("");
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed top-20 right-4 z-[100] w-[400px] h-[520px] rounded-3xl shadow-2xl flex flex-col overflow-hidden border border-blue-500/20 backdrop-blur-xl bg-linear-to-b from-slate-900/98 via-slate-900/95 to-slate-800/98">
+      {/* Decorative top gradient */}
+      <div className="absolute top-0 left-0 right-0 h-32 bg-linear-to-b from-blue-500/10 via-purple-500/5 to-transparent pointer-events-none" />
+
+      {/* Header */}
+      <div className="relative flex items-center justify-between p-4 border-b border-blue-500/10">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-2xl bg-linear-to-br from-blue-500 via-purple-500 to-slate-600 flex items-center justify-center shadow-lg shadow-blue-500/30 rotate-3 hover:rotate-0 transition-transform">
+            <Briefcase className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <h3 className="font-bold text-slate-200 text-base tracking-tight">
+              Resume Assistant
+            </h3>
+            <p className="text-xs text-blue-300/50">Candidate Evaluation AI</p>
+          </div>
+        </div>
+        <button
+          onClick={handleToggle}
+          className="text-slate-300/50 hover:text-slate-100 transition-colors p-2 hover:bg-white/5 rounded-xl"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+
+      {/* Messages */}
+      <Messages messages={messages} />
+
+      {/* Loading indicator */}
+      {isLoading && (
+        <div className="px-4 py-3 border-t border-blue-500/10">
+          <div className="flex items-center gap-2 text-blue-400/80 text-xs">
+            <div className="flex gap-1">
+              <span className="w-2 h-2 bg-blue-400 rounded-full animate-bounce [animation-delay:-0.3s]"></span>
+              <span className="w-2 h-2 bg-purple-400 rounded-full animate-bounce [animation-delay:-0.15s]"></span>
+              <span className="w-2 h-2 bg-slate-400 rounded-full animate-bounce"></span>
+            </div>
+            <span className="font-medium">Analyzing experience...</span>
+          </div>
+        </div>
+      )}
+
+      {/* Input */}
+      <div className="relative p-4 border-t border-blue-500/10 bg-slate-900/50">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleSend();
+          }}
+        >
+          <div className="relative">
+            <textarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="Ask about skills, experience, or qualifications..."
+              disabled={isLoading}
+              className="w-full rounded-2xl border border-blue-500/20 bg-slate-800/50 pl-4 pr-12 py-3 text-sm text-slate-100 placeholder-slate-300/30 focus:outline-none focus:ring-2 focus:ring-blue-500/40 focus:border-transparent resize-none overflow-hidden disabled:opacity-50 transition-all"
+              rows={1}
+              style={{ minHeight: "48px", maxHeight: "100px" }}
+              onInput={(e) => {
+                const target = e.target as HTMLTextAreaElement;
+                target.style.height = "auto";
+                target.style.height = Math.min(target.scrollHeight, 100) + "px";
+              }}
+              onKeyDown={(e) => {
+                if (
+                  e.key === "Enter" &&
+                  !e.shiftKey &&
+                  input.trim() &&
+                  !isLoading
+                ) {
+                  e.preventDefault();
+                  handleSend();
+                }
+              }}
+            />
+            <button
+              type="submit"
+              disabled={!input.trim() || isLoading}
+              className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-xl bg-linear-to-r from-blue-500 to-purple-500 text-white disabled:opacity-30 disabled:bg-gray-600 disabled:from-gray-600 disabled:to-gray-600 transition-all hover:shadow-lg hover:shadow-blue-500/20"
+            >
+              <Send className="w-4 h-4" />
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/examples/resume/assets/src/components/ResumeAssistantButton.tsx

@@ -0,0 +1,20 @@
+import { Briefcase, ChevronRight } from "lucide-react";
+import { showResumeAssistant } from "./ResumeAssistant";
+
+export default function RemyButton() {
+  return (
+    <div className="px-2 mb-2 w-full">
+      <button
+        onClick={() => showResumeAssistant.setState(true)}
+        className="w-full flex items-center justify-between px-4 py-2.5 rounded-lg bg-linear-to-r from-blue-500 to-purple-800 text-white hover:opacity-90 transition-opacity"
+        aria-label="Open Resume Assistant"
+      >
+        <div className="flex items-center gap-2">
+          <Briefcase size={24} />
+          <span className="text-sm">Resume Assistant</span>
+        </div>
+        <ChevronRight className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}

package/examples/resume/assets/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/examples/resume/assets/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/examples/resume/assets/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/examples/resume/assets/src/components/ui/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }