kaddidlehopper 0.5.0 → 0.6.0

package/examples/blog/assets/src/components/Header.tsx

@@ -1,52 +0,0 @@
-import { Link } from '@tanstack/react-router'
-
-import HeaderNav from './HeaderNav'
-import { showVacayAssistant } from './VacayAssistant'
-
-import { allPosts } from 'content-collections'
-
-export default function Header() {
-  const categories = Array.from(
-    new Set(allPosts.flatMap((post) => post.categories)),
-  )
-
-  const handleVacayClick = () => {
-    showVacayAssistant.setState(() => true)
-  }
-
-  return (
-    <>
-      <HeaderNav />
-      <header className="text-slate-700 font-serif font-extrabold fixed top-20 left-0 right-0 z-0 backdrop-blur-md bg-white/50 border-b border-slate-200/50 transition-all">
-        <nav className="max-w-7xl mx-auto p-4 flex gap-2 justify-between">
-          <div className="flex flex-row items-center space-x-6">
-            <div className="text-xl tracking-wide">
-              <Link to="/" className="hover:text-emerald-700 transition-colors">
-                Hawaii Adventures
-              </Link>
-            </div>
-            <div className="flex gap-6">
-              {categories.map((category) => (
-                <div key={category}>
-                  <Link
-                    to={`/category/${category}`}
-                    className="hover:text-emerald-700 transition-colors"
-                  >
-                    {category}
-                  </Link>
-                </div>
-              ))}
-            </div>
-          </div>
-          <button
-            onClick={handleVacayClick}
-            className="flex items-center gap-2 px-4 py-2 rounded-xl bg-linear-to-r from-amber-400/90 via-orange-500/90 to-rose-500/90 hover:from-amber-400 hover:via-orange-500 hover:to-rose-500 text-white font-semibold text-sm transition-all hover:shadow-lg hover:shadow-orange-500/20 hover:scale-[1.02]"
-          >
-            <span className="text-base">🌴</span>
-            <span className="tracking-wide">Vacay Assistant</span>
-          </button>
-        </nav>
-      </header>
-    </>
-  )
-}

package/examples/blog/assets/src/components/VacayAssistant.tsx

@@ -1,205 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { Send, X, Palmtree, Sun } from 'lucide-react'
-import { Streamdown } from 'streamdown'
-import { Store } from '@tanstack/store'
-
-import { useBlogChat } from '@/lib/blog-ai-hook'
-import type { BlogChatMessages } from '@/lib/blog-ai-hook'
-
-function Messages({ messages }: { messages: BlogChatMessages }) {
-  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-amber-200/60 text-sm px-6 py-8">
-        <div className="relative mb-4">
-          <Sun className="w-12 h-12 text-amber-400/40 animate-pulse" />
-          <Palmtree className="w-6 h-6 text-emerald-400/60 absolute -bottom-1 -right-1" />
-        </div>
-        <p className="text-center text-amber-100/80 font-medium">
-          Aloha! 🌺 How can I help?
-        </p>
-        <p className="text-xs text-amber-200/40 mt-2 text-center max-w-[200px]">
-          Ask about adventures, get trip ideas, or explore the islands!
-        </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-amber-500/5 via-orange-500/5 to-rose-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-amber-400 via-orange-500 to-rose-500 flex items-center justify-center text-xs font-bold text-white flex-shrink-0 shadow-lg shadow-orange-500/20">
-                      🌴
-                    </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-amber-50 prose dark:prose-invert max-w-none prose-sm prose-p:text-amber-50 prose-headings:text-amber-100 prose-strong:text-amber-200">
-                    <Streamdown>{part.content}</Streamdown>
-                  </div>
-                </div>
-              )
-            }
-            return null
-          })}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-interface VacayAssistantProps {
-  slug?: string
-  postTitle?: string
-}
-
-// Export store for header control
-export const showVacayAssistant = new Store(false)
-
-export default function VacayAssistant({
-  slug,
-  postTitle,
-}: VacayAssistantProps) {
-  const [isOpen, setIsOpen] = useState(false)
-  const { messages, sendMessage, isLoading } = useBlogChat(slug)
-  const [input, setInput] = useState('')
-
-  // Sync with store for header control
-  useEffect(() => {
-    return showVacayAssistant.subscribe(() => {
-      setIsOpen(showVacayAssistant.state)
-    })
-  }, [])
-
-  const handleToggle = () => {
-    const newState = !isOpen
-    setIsOpen(newState)
-    showVacayAssistant.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-amber-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-amber-500/10 via-orange-500/5 to-transparent pointer-events-none" />
-
-      {/* Header */}
-      <div className="relative flex items-center justify-between p-4 border-b border-amber-500/10">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-2xl bg-linear-to-br from-amber-400 via-orange-500 to-rose-500 flex items-center justify-center shadow-lg shadow-orange-500/30 rotate-3 hover:rotate-0 transition-transform">
-            <span className="text-lg">🌴</span>
-          </div>
-          <div>
-            <h3 className="font-bold text-amber-100 text-base tracking-tight">
-              Vacay Assistant
-            </h3>
-            {postTitle && (
-              <p className="text-xs text-amber-300/50 truncate max-w-[220px]">
-                📍 {postTitle}
-              </p>
-            )}
-          </div>
-        </div>
-        <button
-          onClick={handleToggle}
-          className="text-amber-300/50 hover:text-amber-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-amber-500/10">
-          <div className="flex items-center gap-2 text-amber-400/80 text-xs">
-            <div className="flex gap-1">
-              <span className="w-2 h-2 bg-amber-400 rounded-full animate-bounce [animation-delay:-0.3s]"></span>
-              <span className="w-2 h-2 bg-orange-400 rounded-full animate-bounce [animation-delay:-0.15s]"></span>
-              <span className="w-2 h-2 bg-rose-400 rounded-full animate-bounce"></span>
-            </div>
-            <span className="font-medium">Planning your adventure...</span>
-          </div>
-        </div>
-      )}
-
-      {/* Input */}
-      <div className="relative p-4 border-t border-amber-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 Hawaii adventures..."
-              disabled={isLoading}
-              className="w-full rounded-2xl border border-amber-500/20 bg-slate-800/50 pl-4 pr-12 py-3 text-sm text-amber-50 placeholder-amber-200/30 focus:outline-none focus:ring-2 focus:ring-amber-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-amber-500 to-orange-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-amber-500/20"
-            >
-              <Send className="w-4 h-4" />
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}

package/examples/blog/assets/src/components/blog-posts.tsx

@@ -1,78 +0,0 @@
-import { Link } from "@tanstack/react-router";
-
-import { type Post } from "content-collections";
-
-import { Card, CardContent } from "@/components/ui/card";
-
-export default function BlogPosts({
-  title,
-  posts,
-}: {
-  title: string;
-  posts: Post[];
-}) {
-  return (
-    <div>
-      <div className="container mx-auto max-w-7xl">
-        <h1 className="mb-16 text-7xl font-bold text-teal-900 text-center font-serif  italic">
-          {title}
-        </h1>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 px-4">
-          {posts.map((post, index) => (
-            <Link
-              to={`/posts/${post.slug}`}
-              key={post._meta.path}
-              className="group relative block"
-            >
-              <Card
-                className={`relative overflow-hidden transform transition-all duration-500 bg-white
-                ${
-                  index % 2 === 0
-                    ? "rotate-[-1deg] hover:rotate-[-2deg]"
-                    : "rotate-[1deg] hover:rotate-[2deg]"
-                }
-                hover:scale-105 hover:z-10 hover:shadow-[0_20px_40px_rgba(0,0,0,0.25)]
-                before:absolute before:inset-0 before:z-10 before:border-[12px] before:border-white
-                after:absolute after:inset-0 after:z-0 after:bg-[radial-gradient(#00000005_1px,transparent_1px)] after:bg-[length:4px_4px]`}
-              >
-                <div className="relative z-20">
-                  {/* Postcard Stamp */}
-                  <div className="absolute top-4 right-4 w-16 h-20 border-2 border-dashed border-teal-900/20 rounded-sm" />
-
-                  {/* Image Container */}
-                  <div className="aspect-[3/2] relative overflow-hidden">
-                    <div className="absolute inset-0 bg-black/10 z-10 transition-opacity group-hover:opacity-0" />
-                    <img
-                      src={`/${post.image}`}
-                      alt={post.title}
-                      className="object-cover w-full h-full"
-                    />
-                  </div>
-
-                  {/* Content */}
-                  <CardContent className="p-6 bg-transparent">
-                    <div className="space-y-4">
-                      <h3 className="text-3xl font-serif italic text-teal-900 group-hover:text-teal-800 transition-colors">
-                        {post.title}
-                      </h3>
-                      <p className="text-teal-800/80 font-serif">
-                        {post.summary}
-                      </p>
-                      <p className="text-teal-700/60 text-sm italic font-serif">
-                        {post.date}
-                      </p>
-                    </div>
-                  </CardContent>
-
-                  {/* Decorative Lines */}
-                  <div className="absolute left-0 right-0 bottom-0 h-1 bg-[repeating-linear-gradient(45deg,transparent,transparent_2px,#0F766E20_2px,#0F766E20_4px)]" />
-                  <div className="absolute left-0 top-0 bottom-0 w-1 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,#0F766E20_2px,#0F766E20_4px)]" />
-                </div>
-              </Card>
-            </Link>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,92 +0,0 @@
-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/blog/assets/src/lib/blog-ai-hook.ts

@@ -1,25 +0,0 @@
-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/blog-chat"),
-});
-
-export type BlogChatMessages = InferChatMessages<typeof defaultChatOptions>;
-
-export const useBlogChat = (slug?: string) => {
-  const chatOptions = createChatClientOptions({
-    connection: fetchServerSentEvents("/api/blog-chat", {
-      body: {
-        slug,
-      },
-    }),
-  });
-
-  return useChat(chatOptions);
-};

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

@@ -1,111 +0,0 @@
-import { toolDefinition } from '@tanstack/ai'
-import { z } from 'zod'
-
-import { allPosts } from 'content-collections'
-
-// Tool definition for getting the current blog post content
-export const getPostBySlugToolDef = toolDefinition({
-  name: 'getCurrentBlogPost',
-  description:
-    'Get the full content and metadata of the current blog post the user is viewing. Use this to answer questions about the article.',
-  inputSchema: z.object({
-    slug: z.string().describe('The slug of the current blog post'),
-  }),
-  outputSchema: z.object({
-    title: z.string(),
-    summary: z.string(),
-    content: z.string(),
-    categories: z.array(z.string()),
-    date: z.string(),
-    image: z.string(),
-  }),
-})
-
-// Server implementation
-export const getPostBySlug = getPostBySlugToolDef.server(({ slug }) => {
-  const post = allPosts.find((post) => post.slug === slug)
-  if (!post) {
-    return {
-      title: 'Post not found',
-      summary: '',
-      content: 'The requested blog post was not found.',
-      categories: [],
-      date: '',
-      image: '',
-    }
-  }
-  return {
-    title: post.title,
-    summary: post.summary,
-    content: post.content,
-    categories: post.categories,
-    date: post.date,
-    image: post.image,
-  }
-})
-
-// Tool definition for listing all available blog posts
-export const getAllBlogPostsToolDef = toolDefinition({
-  name: 'getAllBlogPosts',
-  description:
-    'Get a list of all available blog posts with their titles, summaries, and categories. Useful for recommending related content or answering questions about other posts.',
-  inputSchema: z.object({}),
-  outputSchema: z.array(
-    z.object({
-      slug: z.string(),
-      title: z.string(),
-      summary: z.string(),
-      categories: z.array(z.string()),
-      date: z.string(),
-    }),
-  ),
-})
-
-// Server implementation
-export const getAllBlogPosts = getAllBlogPostsToolDef.server(() => {
-  return allPosts.map((post) => ({
-    slug: post.slug,
-    title: post.title,
-    summary: post.summary,
-    categories: post.categories,
-    date: post.date,
-  }))
-})
-
-// Tool definition for suggesting related posts
-export const searchBlogPostsToolDef = toolDefinition({
-  name: 'searchBlogPosts',
-  description:
-    "Search for blog posts by title, summary, or categories. Use this to find articles that match the user's query.",
-  inputSchema: z.object({
-    query: z.string().describe('The search query'),
-  }),
-  outputSchema: z.array(
-    z.object({
-      slug: z.string(),
-      title: z.string(),
-      summary: z.string(),
-      categories: z.array(z.string()),
-      sharedCategories: z.array(z.string()),
-    }),
-  ),
-})
-
-// Server implementation
-export const searchBlogPosts = searchBlogPostsToolDef.server(({ query }) => {
-  return allPosts
-    .filter(
-      (post) =>
-        post.title.toLowerCase().includes(query.toLowerCase()) ||
-        post.summary.toLowerCase().includes(query.toLowerCase()) ||
-        post.categories.some((cat) =>
-          cat.toLowerCase().includes(query.toLowerCase()),
-        ),
-    )
-    .map((post) => ({
-      slug: post.slug,
-      title: post.title,
-      summary: post.summary,
-      categories: post.categories,
-    }))
-})

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

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

package/examples/blog/assets/src/routes/__root.tsx

@@ -1,57 +0,0 @@
-import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
-
-import Header from '../components/Header'
-
-import appCss from '../styles.css?url'
-
-export const Route = createRootRoute({
-  head: () => ({
-    meta: [
-      {
-        charSet: 'utf-8',
-      },
-      {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1',
-      },
-      {
-        title: 'Hawaii Adventures Blog',
-      },
-    ],
-    links: [
-      {
-        rel: 'stylesheet',
-        href: appCss,
-      },
-    ],
-  }),
-  shellComponent: RootDocument,
-})
-
-function RootDocument({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <HeadContent />
-      </head>
-      <body className="bg-[#f5f1e4] min-h-screen">
-        <Header />
-        <main className="mt-20">{children}</main>
-        <TanStackDevtools
-          config={{
-            position: 'bottom-right',
-          }}
-          plugins={[
-            {
-              name: 'Tanstack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-          ]}
-        />
-        <Scripts />
-      </body>
-    </html>
-  )
-}