kaddidlehopper 0.5.0 → 0.6.0

package/examples/events/assets/src/components/HeroCarousel.tsx

@@ -1,61 +0,0 @@
-import { useState, useEffect } from 'react'
-
-const backgrounds = [
-  '/background-1.jpg',
-  '/background-2.jpg',
-  '/background-3.jpg',
-  '/background-4.jpg',
-]
-
-export default function HeroCarousel() {
-  const [currentIndex, setCurrentIndex] = useState(0)
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentIndex((prev) => (prev + 1) % backgrounds.length)
-    }, 6000)
-    return () => clearInterval(interval)
-  }, [])
-
-  return (
-    <div className="absolute inset-0 overflow-hidden">
-      {/* Background images with crossfade */}
-      {backgrounds.map((bg, index) => (
-        <div
-          key={bg}
-          className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
-            index === currentIndex ? 'opacity-100' : 'opacity-0'
-          }`}
-        >
-          <img
-            src={bg}
-            alt=""
-            className="w-full h-full object-cover"
-          />
-        </div>
-      ))}
-      
-      {/* Dark overlay for text readability */}
-      <div className="absolute inset-0 bg-gradient-to-b from-charcoal/70 via-charcoal/60 to-charcoal" />
-      
-      {/* Subtle vignette effect */}
-      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_0%,rgba(26,26,26,0.4)_100%)]" />
-      
-      {/* Carousel indicators */}
-      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-2 z-10">
-        {backgrounds.map((_, index) => (
-          <button
-            key={index}
-            onClick={() => setCurrentIndex(index)}
-            className={`w-2 h-2 rounded-full transition-all duration-300 ${
-              index === currentIndex
-                ? 'bg-gold w-6'
-                : 'bg-cream/30 hover:bg-cream/50'
-            }`}
-            aria-label={`Go to slide ${index + 1}`}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}

package/examples/events/assets/src/components/RemyAssistant.tsx

@@ -1,207 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { Send, X, ChefHat, Croissant } from 'lucide-react'
-import { Streamdown } from 'streamdown'
-import { Store } from '@tanstack/store'
-
-import { useConferenceChat } from '@/lib/conference-ai-hook'
-import type { ConferenceChatMessages } from '@/lib/conference-ai-hook'
-
-function Messages({ messages }: { messages: ConferenceChatMessages }) {
-  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-cream/60 text-sm px-6 py-8">
-        <div className="relative mb-4">
-          <ChefHat className="w-12 h-12 text-copper/60 animate-pulse" />
-          <Croissant className="w-6 h-6 text-gold/60 absolute -bottom-1 -right-1" />
-        </div>
-        <p className="text-center text-cream/80 font-medium font-display text-lg">
-          Bonjour! I'm Remy 👨‍🍳
-        </p>
-        <p className="text-xs text-cream/40 mt-2 text-center max-w-[220px]">
-          Your culinary guide to Haute Pâtisserie 2026. Ask about speakers, sessions, or pastry techniques!
-        </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-gradient-to-r from-copper/5 via-gold/5 to-copper/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-gradient-to-br from-copper via-copper-dark to-gold flex items-center justify-center text-xs font-bold text-charcoal flex-shrink-0 shadow-lg shadow-copper/20">
-                      👨‍🍳
-                    </div>
-                  ) : (
-                    <div className="w-7 h-7 rounded-full bg-charcoal-light flex items-center justify-center text-xs font-medium text-cream flex-shrink-0 border border-border/50">
-                      You
-                    </div>
-                  )}
-                  <div className="flex-1 min-w-0 text-cream prose dark:prose-invert max-w-none prose-sm prose-p:text-cream prose-headings:text-cream prose-strong:text-gold">
-                    <Streamdown>{part.content}</Streamdown>
-                  </div>
-                </div>
-              )
-            }
-            return null
-          })}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-interface RemyAssistantProps {
-  speakerSlug?: string
-  talkSlug?: string
-  contextTitle?: string
-}
-
-// Export store for header control
-export const showRemyAssistant = new Store(false)
-
-export default function RemyAssistant({
-  speakerSlug,
-  talkSlug,
-  contextTitle,
-}: RemyAssistantProps) {
-  const [isOpen, setIsOpen] = useState(false)
-  const { messages, sendMessage, isLoading } = useConferenceChat(speakerSlug, talkSlug)
-  const [input, setInput] = useState('')
-
-  // Sync with store for header control
-  useEffect(() => {
-    return showRemyAssistant.subscribe(() => {
-      setIsOpen(showRemyAssistant.state)
-    })
-  }, [])
-
-  const handleToggle = () => {
-    const newState = !isOpen
-    setIsOpen(newState)
-    showRemyAssistant.setState(() => newState)
-  }
-
-  const handleSend = () => {
-    if (input.trim()) {
-      sendMessage(input)
-      setInput('')
-    }
-  }
-
-  if (!isOpen) return null
-
-  return (
-    <div className="fixed top-36 right-4 z-[100] w-[400px] h-[520px] rounded-2xl shadow-2xl flex flex-col overflow-hidden border border-copper/20 backdrop-blur-xl bg-gradient-to-b from-charcoal/98 via-charcoal/95 to-charcoal-light/98">
-      {/* Decorative top gradient */}
-      <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-copper/10 via-gold/5 to-transparent pointer-events-none" />
-
-      {/* Header */}
-      <div className="relative flex items-center justify-between p-4 border-b border-copper/10">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-copper via-copper-dark to-gold flex items-center justify-center shadow-lg shadow-copper/30 rotate-3 hover:rotate-0 transition-transform">
-            <span className="text-lg">👨‍🍳</span>
-          </div>
-          <div>
-            <h3 className="font-display font-bold text-cream text-base tracking-tight">
-              Remy
-            </h3>
-            {contextTitle && (
-              <p className="text-xs text-copper/70 truncate max-w-[220px]">
-                🥐 {contextTitle}
-              </p>
-            )}
-          </div>
-        </div>
-        <button
-          onClick={handleToggle}
-          className="text-cream/50 hover:text-cream 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-copper/10">
-          <div className="flex items-center gap-2 text-copper/80 text-xs">
-            <div className="flex gap-1">
-              <span className="w-2 h-2 bg-copper rounded-full animate-bounce [animation-delay:-0.3s]"></span>
-              <span className="w-2 h-2 bg-gold rounded-full animate-bounce [animation-delay:-0.15s]"></span>
-              <span className="w-2 h-2 bg-copper-light rounded-full animate-bounce"></span>
-            </div>
-            <span className="font-medium">Crafting a response...</span>
-          </div>
-        </div>
-      )}
-
-      {/* Input */}
-      <div className="relative p-4 border-t border-copper/10 bg-charcoal/50">
-        <form
-          onSubmit={(e) => {
-            e.preventDefault()
-            handleSend()
-          }}
-        >
-          <div className="relative">
-            <textarea
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              placeholder="Ask about speakers, sessions, techniques..."
-              disabled={isLoading}
-              className="w-full rounded-xl border border-copper/20 bg-charcoal-light/50 pl-4 pr-12 py-3 text-sm text-cream placeholder-cream/30 focus:outline-none focus:ring-2 focus:ring-copper/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-lg bg-gradient-to-r from-copper to-copper-dark text-charcoal disabled:opacity-30 disabled:bg-gray-600 disabled:from-gray-600 disabled:to-gray-600 transition-all hover:shadow-lg hover:shadow-copper/20"
-            >
-              <Send className="w-4 h-4" />
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}

package/examples/events/assets/src/components/SpeakerCard.tsx

@@ -1,67 +0,0 @@
-import { Link } from '@tanstack/react-router'
-import { MapPin } from 'lucide-react'
-
-import { type Speaker } from 'content-collections'
-
-import { Card, CardContent } from '@/components/ui/card'
-
-interface SpeakerCardProps {
-  speaker: Speaker
-  featured?: boolean
-}
-
-export default function SpeakerCard({ speaker, featured = false }: SpeakerCardProps) {
-  return (
-    <Link
-      to={`/speakers/${speaker.slug}`}
-      className="group relative block"
-    >
-      <Card
-        className={`relative overflow-hidden bg-card border-border/50 card-hover
-          ${featured ? 'aspect-square' : 'aspect-square'}
-          hover:border-copper/50`}
-      >
-        {/* Headshot */}
-        <div className="absolute inset-0">
-          <img 
-            src={`/${speaker.headshot}`} 
-            alt={speaker.name}
-            className="w-full h-full object-cover"
-          />
-          <div className="absolute inset-0 bg-gradient-to-t from-charcoal via-charcoal/50 to-transparent" />
-        </div>
-
-        {/* Content overlay */}
-        <CardContent className="absolute bottom-0 left-0 right-0 p-6 z-10">
-          <div className="space-y-2">
-            {/* Specialty tag */}
-            <span className="inline-block px-3 py-1 text-xs font-medium tracking-wider uppercase bg-copper/20 text-copper-light rounded-full border border-copper/30">
-              {speaker.specialty}
-            </span>
-            
-            {/* Name */}
-            <h3 className="font-display text-2xl font-semibold text-cream group-hover:text-gold transition-colors">
-              {speaker.name}
-            </h3>
-            
-            {/* Title & Restaurant */}
-            <p className="text-cream/70 font-body text-lg">
-              {speaker.title}
-            </p>
-            
-            {/* Location */}
-            <div className="flex items-center gap-2 text-cream/50 text-sm">
-              <MapPin className="w-3.5 h-3.5" />
-              <span>{speaker.restaurant}, {speaker.location}</span>
-            </div>
-          </div>
-        </CardContent>
-
-        {/* Decorative corner accent */}
-        <div className="absolute top-0 right-0 w-20 h-20 overflow-hidden">
-          <div className="absolute top-0 right-0 w-28 h-28 bg-gradient-to-bl from-copper/20 to-transparent transform rotate-45 translate-x-14 -translate-y-14" />
-        </div>
-      </Card>
-    </Link>
-  )
-}

package/examples/events/assets/src/components/TalkCard.tsx

@@ -1,77 +0,0 @@
-import { Link } from '@tanstack/react-router'
-import { Clock, User } from 'lucide-react'
-
-import { type Talk } from 'content-collections'
-
-import { Card, CardContent } from '@/components/ui/card'
-
-interface TalkCardProps {
-  talk: Talk
-  featured?: boolean
-}
-
-export default function TalkCard({ talk, featured = false }: TalkCardProps) {
-  return (
-    <Link
-      to={`/talks/${talk.slug}`}
-      className="group relative block"
-    >
-      <Card
-        className={`relative overflow-hidden bg-card border-border/50 card-hover
-          ${featured ? 'aspect-[16/10]' : 'aspect-[16/9]'}
-          hover:border-gold/50`}
-      >
-        {/* Image */}
-        <div className="absolute inset-0">
-          <img 
-            src={`/${talk.image}`} 
-            alt={talk.title}
-            className="w-full h-full object-cover"
-          />
-          <div className="absolute inset-0 bg-gradient-to-t from-charcoal via-charcoal/60 to-transparent" />
-        </div>
-
-        {/* Content overlay */}
-        <CardContent className="absolute bottom-0 left-0 right-0 p-6 z-10">
-          <div className="space-y-3">
-            {/* Topics */}
-            <div className="flex flex-wrap gap-2">
-              {talk.topics.slice(0, 2).map((topic) => (
-                <span 
-                  key={topic}
-                  className="px-2.5 py-0.5 text-xs font-medium tracking-wide uppercase bg-gold/15 text-gold border border-gold/30 rounded-full"
-                >
-                  {topic}
-                </span>
-              ))}
-            </div>
-            
-            {/* Title */}
-            <h3 className="font-display text-xl font-semibold text-cream group-hover:text-gold transition-colors leading-tight">
-              {talk.title}
-            </h3>
-            
-            {/* Speaker & Duration */}
-            <div className="flex items-center gap-4 text-cream/60 text-sm">
-              <div className="flex items-center gap-1.5">
-                <User className="w-3.5 h-3.5" />
-                <span>{talk.speaker}</span>
-              </div>
-              <div className="flex items-center gap-1.5">
-                <Clock className="w-3.5 h-3.5" />
-                <span>{talk.duration}</span>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-
-        {/* Decorative accent */}
-        <div className="absolute top-4 right-4">
-          <div className="w-8 h-8 rounded-full bg-gold/10 border border-gold/20 flex items-center justify-center">
-            <span className="text-gold/60 text-xs font-display">✦</span>
-          </div>
-        </div>
-      </Card>
-    </Link>
-  )
-}

package/examples/events/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/events/assets/src/lib/conference-ai-hook.ts

@@ -1,26 +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/remy-chat'),
-})
-
-export type ConferenceChatMessages = InferChatMessages<typeof defaultChatOptions>
-
-export const useConferenceChat = (speakerSlug?: string, talkSlug?: string) => {
-  const chatOptions = createChatClientOptions({
-    connection: fetchServerSentEvents('/api/remy-chat', {
-      body: {
-        speakerSlug,
-        talkSlug,
-      },
-    }),
-  })
-
-  return useChat(chatOptions)
-}