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

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

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/examples/resume/assets/src/lib/resume-ai-hook.ts

@@ -0,0 +1,21 @@
+import {
+  fetchServerSentEvents,
+  useChat,
+  createChatClientOptions,
+} from '@tanstack/ai-react'
+import type { InferChatMessages } from '@tanstack/ai-react'
+
+// Default chat options for type inference
+const defaultChatOptions = createChatClientOptions({
+  connection: fetchServerSentEvents('/api/resume-chat'),
+})
+
+export type ResumeChatMessages = InferChatMessages<typeof defaultChatOptions>
+
+export const useResumeChat = () => {
+  const chatOptions = createChatClientOptions({
+    connection: fetchServerSentEvents('/api/resume-chat'),
+  })
+
+  return useChat(chatOptions)
+}

package/examples/resume/assets/src/lib/resume-tools.ts

@@ -0,0 +1,165 @@
+import { toolDefinition } from '@tanstack/ai'
+import { z } from 'zod'
+
+import { allJobs, allEducations } from 'content-collections'
+
+// Tool definition for getting jobs by skill
+export const getJobsBySkillToolDef = toolDefinition({
+  name: 'getJobsBySkill',
+  description:
+    'Find all jobs where the candidate used a specific technology or skill. Use this to check if the candidate has experience with particular technologies.',
+  inputSchema: z.object({
+    skill: z
+      .string()
+      .describe(
+        'The skill or technology to search for (e.g., "React", "TypeScript", "Leadership")',
+      ),
+  }),
+  outputSchema: z.array(
+    z.object({
+      jobTitle: z.string(),
+      company: z.string(),
+      location: z.string(),
+      startDate: z.string(),
+      endDate: z.string().optional(),
+      summary: z.string(),
+      tags: z.array(z.string()),
+      content: z.string(),
+    }),
+  ),
+})
+
+// Server implementation
+export const getJobsBySkill = getJobsBySkillToolDef.server(({ skill }) => {
+  return allJobs.filter((job) =>
+    job.tags.some((tag) => tag.toLowerCase().includes(skill.toLowerCase())),
+  )
+})
+
+// Tool definition for getting all jobs
+export const getAllJobsToolDef = toolDefinition({
+  name: 'getAllJobs',
+  description:
+    'Get a complete list of all work experience with full details including job titles, companies, dates, summaries, and skills. Use this to get an overview of the candidate\'s entire work history.',
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      jobTitle: z.string(),
+      company: z.string(),
+      location: z.string(),
+      startDate: z.string(),
+      endDate: z.string().optional(),
+      summary: z.string(),
+      tags: z.array(z.string()),
+      content: z.string(),
+    }),
+  ),
+})
+
+// Server implementation
+export const getAllJobs = getAllJobsToolDef.server(() => {
+  return allJobs.map((job) => ({
+    jobTitle: job.jobTitle,
+    company: job.company,
+    location: job.location,
+    startDate: job.startDate,
+    endDate: job.endDate,
+    summary: job.summary,
+    tags: job.tags,
+    content: job.content,
+  }))
+})
+
+// Tool definition for getting all education
+export const getAllEducationToolDef = toolDefinition({
+  name: 'getAllEducation',
+  description:
+    'Get a complete list of all education history including schools, programs, dates, and skills learned. Use this to understand the candidate\'s educational background.',
+  inputSchema: z.object({}),
+  outputSchema: z.array(
+    z.object({
+      school: z.string(),
+      summary: z.string(),
+      startDate: z.string(),
+      endDate: z.string().optional(),
+      tags: z.array(z.string()),
+      content: z.string(),
+    }),
+  ),
+})
+
+// Server implementation
+export const getAllEducation = getAllEducationToolDef.server(() => {
+  return allEducations.map((education) => ({
+    school: education.school,
+    summary: education.summary,
+    startDate: education.startDate,
+    endDate: education.endDate,
+    tags: education.tags,
+    content: education.content,
+  }))
+})
+
+// Tool definition for searching experience
+export const searchExperienceToolDef = toolDefinition({
+  name: 'searchExperience',
+  description:
+    'Search for jobs by keywords in the job title, company name, summary, or content. Use this to find specific types of experience or roles.',
+  inputSchema: z.object({
+    query: z
+      .string()
+      .describe(
+        'The search query (e.g., "senior", "lead", "frontend", "startup")',
+      ),
+  }),
+  outputSchema: z.array(
+    z.object({
+      jobTitle: z.string(),
+      company: z.string(),
+      location: z.string(),
+      startDate: z.string(),
+      endDate: z.string().optional(),
+      summary: z.string(),
+      tags: z.array(z.string()),
+      matchedIn: z
+        .array(z.string())
+        .describe('Which fields matched the search'),
+    }),
+  ),
+})
+
+// Server implementation
+export const searchExperience = searchExperienceToolDef.server(({ query }) => {
+  const lowerQuery = query.toLowerCase()
+
+  return allJobs
+    .map((job) => {
+      const matchedIn: string[] = []
+
+      if (job.jobTitle.toLowerCase().includes(lowerQuery)) {
+        matchedIn.push('job title')
+      }
+      if (job.company.toLowerCase().includes(lowerQuery)) {
+        matchedIn.push('company')
+      }
+      if (job.summary.toLowerCase().includes(lowerQuery)) {
+        matchedIn.push('summary')
+      }
+      if (job.content.toLowerCase().includes(lowerQuery)) {
+        matchedIn.push('description')
+      }
+
+      return { job, matchedIn }
+    })
+    .filter(({ matchedIn }) => matchedIn.length > 0)
+    .map(({ job, matchedIn }) => ({
+      jobTitle: job.jobTitle,
+      company: job.company,
+      location: job.location,
+      startDate: job.startDate,
+      endDate: job.endDate,
+      summary: job.summary,
+      tags: job.tags,
+      matchedIn,
+    }))
+})

package/examples/resume/assets/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/examples/resume/assets/src/routes/api.resume-chat.ts

@@ -0,0 +1,110 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { chat, maxIterations, toServerSentEventsResponse } from '@tanstack/ai'
+import { anthropicText } from '@tanstack/ai-anthropic'
+import { openaiText } from '@tanstack/ai-openai'
+import { geminiText } from '@tanstack/ai-gemini'
+import { ollamaText } from '@tanstack/ai-ollama'
+
+import {
+  getJobsBySkill,
+  getAllJobs,
+  getAllEducation,
+  searchExperience,
+} from '@/lib/resume-tools'
+
+export const Route = createFileRoute('/api/resume-chat')({
+  server: {
+    handlers: {
+      POST: async ({ request }) => {
+        const requestSignal = request.signal
+
+        if (requestSignal.aborted) {
+          return new Response(null, { status: 499 })
+        }
+
+        const abortController = new AbortController()
+
+        try {
+          const body = await request.json()
+          const { messages } = body
+          const data = body.data || {}
+
+          const SYSTEM_PROMPT = `You are a helpful resume assistant helping recruiters and hiring managers evaluate if this candidate is a good fit for their job requirements.
+
+CAPABILITIES:
+1. Use getJobsBySkill to find jobs where the candidate used specific technologies or skills
+2. Use getAllJobs to get the candidate's complete work history with all details
+3. Use getAllEducation to get the candidate's educational background
+4. Use searchExperience to search for specific types of roles or experience by keywords
+
+INSTRUCTIONS:
+- When asked about specific technologies or skills, use getJobsBySkill to find relevant experience
+- When asked about overall experience or career progression, use getAllJobs
+- When asked about education or training, use getAllEducation
+- When asked about specific types of roles (e.g., "senior", "lead"), use searchExperience
+- Be professional, concise, and helpful in your responses
+- Provide specific details from the resume when available
+- When calculating years of experience, consider the date ranges provided
+- If the candidate has experience with something, highlight specific roles and time periods
+- If the candidate lacks certain experience, be honest but constructive
+
+CONTEXT: You are helping evaluate this candidate's qualifications for potential job opportunities.`
+
+          // Determine the best available provider
+          let provider: 'anthropic' | 'openai' | 'gemini' | 'ollama' = data.provider || 'ollama'
+          let model: string = data.model || 'mistral:7b'
+
+          // Use the first available provider with an API key, fallback to ollama
+          if (process.env.ANTHROPIC_API_KEY) {
+            provider = 'anthropic'
+            model = 'claude-haiku-4-5'
+          } else if (process.env.OPENAI_API_KEY) {
+            provider = 'openai'
+            model = 'gpt-4o'
+          } else if (process.env.GEMINI_API_KEY) {
+            provider = 'gemini'
+            model = 'gemini-2.0-flash-exp'
+          }
+          // else keep ollama as default
+
+          // Adapter factory pattern for multi-vendor support
+          const adapterConfig = {
+            anthropic: () =>
+              anthropicText((model || 'claude-haiku-4-5') as any),
+            openai: () => openaiText((model || 'gpt-4o') as any),
+            gemini: () => geminiText((model || 'gemini-2.0-flash-exp') as any),
+            ollama: () => ollamaText((model || 'mistral:7b') as any),
+          }
+
+          const adapter = adapterConfig[provider]()
+
+          const stream = chat({
+            adapter,
+            tools: [getJobsBySkill, getAllJobs, getAllEducation, searchExperience],
+            systemPrompts: [SYSTEM_PROMPT],
+            agentLoopStrategy: maxIterations(5),
+            messages,
+            abortController,
+          })
+
+          return toServerSentEventsResponse(stream, { abortController })
+        } catch (error: any) {
+          console.error('Resume chat error:', error)
+          if (error.name === 'AbortError' || abortController.signal.aborted) {
+            return new Response(null, { status: 499 })
+          }
+          return new Response(
+            JSON.stringify({
+              error: 'Failed to process chat request',
+              message: error.message,
+            }),
+            {
+              status: 500,
+              headers: { 'Content-Type': 'application/json' },
+            },
+          )
+        }
+      },
+    },
+  },
+})

package/examples/resume/assets/src/routes/index.tsx

@@ -0,0 +1,220 @@
+import { useState, useMemo } from 'react'
+import { marked } from 'marked'
+
+import { createFileRoute } from '@tanstack/react-router'
+import { allJobs, allEducations } from 'content-collections'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card'
+
+import ResumeAssistant from '@/components/ResumeAssistant'
+
+export const Route = createFileRoute('/')({
+  component: App,
+})
+
+function App() {
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+
+  // Get unique tags from all jobs
+  const allTags = useMemo(() => {
+    const tags = new Set<string>()
+    allJobs.forEach((job) => {
+      job.tags.forEach((tag) => tags.add(tag))
+    })
+    return Array.from(tags).sort()
+  }, [])
+
+  // Filter jobs based on selected tags
+  const filteredJobs = useMemo(() => {
+    if (selectedTags.length === 0) return allJobs
+    return allJobs.filter((job) =>
+      selectedTags.some((tag) => job.tags.includes(tag)),
+    )
+  }, [selectedTags])
+
+  return (
+    <>
+      <ResumeAssistant />
+      <div className="min-h-screen bg-linear-to-b from-gray-50 to-gray-100">
+        <div className="flex">
+          {/* Sidebar with filters */}
+          <div className="w-72 min-h-screen bg-white border-r shadow-sm p-8 sticky top-0">
+            <h3 className="text-lg font-semibold mb-6 text-gray-900">
+              Skills & Technologies
+            </h3>
+            <div className="space-y-4">
+              {allTags.map((tag) => (
+                <div key={tag} className="flex items-center space-x-3 group">
+                  <Checkbox
+                    id={tag}
+                    checked={selectedTags.includes(tag)}
+                    onCheckedChange={(checked) => {
+                      if (checked) {
+                        setSelectedTags([...selectedTags, tag])
+                      } else {
+                        setSelectedTags(selectedTags.filter((t) => t !== tag))
+                      }
+                    }}
+                    className="data-[state=checked]:bg-blue-600"
+                  />
+                  <label
+                    htmlFor={tag}
+                    className="text-sm font-medium leading-none text-gray-700 group-hover:text-gray-900 transition-colors cursor-pointer"
+                  >
+                    {tag}
+                  </label>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Main content */}
+          <div className="flex-1 p-8 lg:p-12">
+            <div className="max-w-4xl mx-auto space-y-12">
+              <div className="text-center space-y-4">
+                <h1 className="text-5xl font-bold bg-linear-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
+                  My Resume
+                </h1>
+                <p className="text-gray-600 text-lg">
+                  Professional Experience & Education
+                </p>
+                <Separator className="mt-8" />
+              </div>
+
+              {/* Career Summary */}
+              <Card className="border-0 shadow-lg bg-white/50 backdrop-blur-sm">
+                <CardHeader>
+                  <CardTitle className="text-2xl text-gray-900">
+                    Career Summary
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="flex items-center gap-8">
+                    <p className="text-gray-700 flex-1 leading-relaxed">
+                      I am a passionate and driven professional seeking
+                      opportunities that will leverage my extensive experience
+                      in frontend development while providing continuous growth
+                      and learning opportunities. My goal is to contribute to
+                      innovative projects that challenge me to expand my skill
+                      set and make meaningful impacts through technology.
+                    </p>
+                    <img
+                      src="/headshot-on-white.jpg"
+                      alt="Professional headshot"
+                      className="w-44 h-52 rounded-2xl object-cover shadow-md transition-transform hover:scale-105"
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* Work Experience */}
+              <section className="space-y-6">
+                <h2 className="text-3xl font-semibold text-gray-900">
+                  Work Experience
+                </h2>
+                <div className="space-y-6">
+                  {filteredJobs.map((job) => (
+                    <Card
+                      key={job.jobTitle}
+                      className="border-0 shadow-md hover:shadow-lg transition-shadow"
+                    >
+                      <CardHeader>
+                        <div className="flex justify-between items-start">
+                          <div className="space-y-2">
+                            <CardTitle className="text-xl text-gray-900">
+                              {job.jobTitle}
+                            </CardTitle>
+                            <p className="text-blue-600 font-medium">
+                              {job.company} - {job.location}
+                            </p>
+                          </div>
+                          <Badge variant="secondary" className="text-sm">
+                            {job.startDate} - {job.endDate || 'Present'}
+                          </Badge>
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-gray-700 mb-6 leading-relaxed">
+                          {job.summary}
+                        </p>
+                        <div className="flex flex-wrap gap-2">
+                          {job.tags.map((tag) => (
+                            <HoverCard key={tag}>
+                              <HoverCardTrigger>
+                                <Badge
+                                  variant="outline"
+                                  className="hover:bg-gray-100 transition-colors cursor-pointer"
+                                >
+                                  {tag}
+                                </Badge>
+                              </HoverCardTrigger>
+                              <HoverCardContent className="w-64">
+                                <p className="text-sm text-gray-600">
+                                  Experience with {tag} in professional
+                                  development
+                                </p>
+                              </HoverCardContent>
+                            </HoverCard>
+                          ))}
+                        </div>
+                        {job.content && (
+                          <div
+                            className="mt-6 text-gray-700 prose prose-sm max-w-none"
+                            dangerouslySetInnerHTML={{
+                              __html: marked(job.content),
+                            }}
+                          />
+                        )}
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </section>
+
+              {/* Education */}
+              <section className="space-y-6">
+                <h2 className="text-3xl font-semibold text-gray-900">
+                  Education
+                </h2>
+                <div className="space-y-6">
+                  {allEducations.map((education) => (
+                    <Card
+                      key={education.school}
+                      className="border-0 shadow-md hover:shadow-lg transition-shadow"
+                    >
+                      <CardHeader>
+                        <CardTitle className="text-xl text-gray-900">
+                          {education.school}
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-gray-700 leading-relaxed">
+                          {education.summary}
+                        </p>
+                        {education.content && (
+                          <div
+                            className="mt-6 text-gray-700 prose prose-sm max-w-none"
+                            dangerouslySetInnerHTML={{
+                              __html: marked(education.content),
+                            }}
+                          />
+                        )}
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              </section>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,138 @@
+@import 'tailwindcss';
+
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.871 0.006 286.286);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.871 0.006 286.286);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.141 0.005 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.141 0.005 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.274 0.006 286.033);
+  --input: oklch(0.274 0.006 286.033);
+  --ring: oklch(0.442 0.017 285.786);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.274 0.006 286.033);
+  --sidebar-ring: oklch(0.442 0.017 285.786);
+}
+
+@theme inline {
+  --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);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}