promptslide 0.2.0

package/src/core/animated.tsx

@@ -0,0 +1,153 @@
+import { motion, Variants } from "framer-motion"
+
+import {
+  ELEMENT_SLIDE_DISTANCE,
+  SPRING_SNAPPY,
+  STAGGER_DELAY,
+  STEP_ANIMATION_DURATION
+} from "./animation-config"
+import { useAnimationContext } from "./animation-context"
+
+// =============================================================================
+// ANIMATION TYPES & VARIANTS
+// =============================================================================
+
+export type AnimationType =
+  | "fade"
+  | "slide-up"
+  | "slide-down"
+  | "slide-left"
+  | "slide-right"
+  | "scale"
+
+const animationVariants: Record<AnimationType, Variants> = {
+  fade: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 }
+  },
+  "slide-up": {
+    hidden: { opacity: 0, y: ELEMENT_SLIDE_DISTANCE },
+    visible: { opacity: 1, y: 0 }
+  },
+  "slide-down": {
+    hidden: { opacity: 0, y: -ELEMENT_SLIDE_DISTANCE },
+    visible: { opacity: 1, y: 0 }
+  },
+  "slide-left": {
+    hidden: { opacity: 0, x: ELEMENT_SLIDE_DISTANCE },
+    visible: { opacity: 1, x: 0 }
+  },
+  "slide-right": {
+    hidden: { opacity: 0, x: -ELEMENT_SLIDE_DISTANCE },
+    visible: { opacity: 1, x: 0 }
+  },
+  scale: {
+    hidden: { opacity: 0, scale: 0.8 },
+    visible: { opacity: 1, scale: 1 }
+  }
+}
+
+interface AnimatedProps {
+  /** Which step reveals this content (1-indexed) */
+  step: number
+  /** Animation type */
+  animation?: AnimationType
+  /** Animation duration in seconds */
+  duration?: number
+  /** Delay after trigger in seconds */
+  delay?: number
+  /** Custom className */
+  className?: string
+  children: React.ReactNode
+}
+
+/**
+ * Animated element that appears at a specific animation step.
+ *
+ * The step count is now declared in slide config rather than discovered
+ * at runtime, so this component simply consumes the context without
+ * needing to register itself.
+ */
+export function Animated({
+  step,
+  animation = "slide-up",
+  duration = STEP_ANIMATION_DURATION,
+  delay = 0,
+  className,
+  children
+}: AnimatedProps) {
+  const { currentStep, showAllAnimations } = useAnimationContext()
+
+  // Show all animations when navigating backward, otherwise check step
+  const isVisible = showAllAnimations || currentStep >= step
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate={isVisible ? "visible" : "hidden"}
+      variants={animationVariants[animation]}
+      transition={{
+        ...SPRING_SNAPPY,
+        duration,
+        delay: isVisible ? delay : 0
+      }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+/**
+ * Wrapper for staggering multiple children.
+ * Each direct child will be animated in sequence.
+ */
+interface AnimatedGroupProps {
+  /** Starting step for the first child */
+  startStep: number
+  /** Animation type for all children */
+  animation?: AnimationType
+  /** Delay between each child in seconds */
+  staggerDelay?: number
+  className?: string
+  children: React.ReactNode
+}
+
+export function AnimatedGroup({
+  startStep,
+  animation = "slide-up",
+  staggerDelay = STAGGER_DELAY,
+  className,
+  children
+}: AnimatedGroupProps) {
+  const { currentStep, showAllAnimations } = useAnimationContext()
+
+  const childArray = Array.isArray(children) ? children : [children]
+
+  // Show all animations when navigating backward, otherwise check step
+  const isVisible = showAllAnimations || currentStep >= startStep
+
+  const containerVariants: Variants = {
+    hidden: {},
+    visible: {
+      transition: {
+        staggerChildren: staggerDelay
+      }
+    }
+  }
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate={isVisible ? "visible" : "hidden"}
+      variants={containerVariants}
+      className={className}
+    >
+      {childArray.map((child, index) => (
+        <motion.div key={index} variants={animationVariants[animation]}>
+          {child}
+        </motion.div>
+      ))}
+    </motion.div>
+  )
+}

package/src/core/animation-config.ts

@@ -0,0 +1,98 @@
+/**
+ * Centralized animation configuration for the slide deck framework.
+ * All animation timings, easings, and spring configs are defined here.
+ */
+
+// =============================================================================
+// TIMING CONSTANTS
+// =============================================================================
+
+/** Duration for slide-to-slide transitions (seconds) */
+export const SLIDE_TRANSITION_DURATION = 0.3
+
+/** Duration for morph/layout animations between slides (seconds) */
+export const MORPH_DURATION = 0.8
+
+/** Duration for within-slide step animations (seconds) */
+export const STEP_ANIMATION_DURATION = 0.4
+
+/** Default stagger delay for grouped animations (seconds) */
+export const STAGGER_DELAY = 0.1
+
+// =============================================================================
+// EASING PRESETS
+// =============================================================================
+
+export const EASE_DEFAULT = "easeInOut" as const
+export const EASE_OUT = "easeOut" as const
+export const EASE_IN = "easeIn" as const
+
+/** Smooth ease-in-out curve for morph animations (cubic bezier) */
+export const EASE_MORPH = [0.4, 0, 0.2, 1] as const
+
+// =============================================================================
+// SPRING CONFIGURATIONS
+// =============================================================================
+
+/** Spring config for snappy, responsive animations */
+export const SPRING_SNAPPY = {
+  type: "spring" as const,
+  stiffness: 300,
+  damping: 30
+}
+
+/** Spring config for smooth, gentle animations */
+export const SPRING_SMOOTH = {
+  type: "spring" as const,
+  stiffness: 200,
+  damping: 25
+}
+
+/** Spring config for bouncy animations */
+export const SPRING_BOUNCY = {
+  type: "spring" as const,
+  stiffness: 400,
+  damping: 20
+}
+
+// =============================================================================
+// TRANSITION PRESETS
+// =============================================================================
+
+/** Standard transition for slide transitions */
+export const SLIDE_TRANSITION = {
+  duration: SLIDE_TRANSITION_DURATION,
+  ease: EASE_DEFAULT
+} as const
+
+/** Standard transition for morph animations (smooth ease-in-out) */
+export const MORPH_TRANSITION = {
+  duration: MORPH_DURATION,
+  ease: EASE_MORPH
+}
+
+/** Standard transition for step animations (spring-based, duration computed from stiffness/damping) */
+export const STEP_TRANSITION = {
+  ...SPRING_SNAPPY
+}
+
+// =============================================================================
+// DISTANCE CONSTANTS (pixels)
+// =============================================================================
+
+/** Distance for slide animations */
+export const SLIDE_DISTANCE = 100
+
+/** Distance for within-slide element animations */
+export const ELEMENT_SLIDE_DISTANCE = 30
+
+// =============================================================================
+// SLIDE DIMENSIONS
+// =============================================================================
+
+/** Standard slide dimensions (16:9 aspect ratio) */
+export const SLIDE_DIMENSIONS = {
+  width: 1280,
+  height: 720,
+  aspectRatio: 16 / 9
+} as const

package/src/core/animation-context.tsx

@@ -0,0 +1,54 @@
+import { createContext, useContext, useMemo } from "react"
+
+interface AnimationContextValue {
+  /** Current animation step (0 = no animations shown yet) */
+  currentStep: number
+  /** Total animation steps in this slide (declared in slide config) */
+  totalSteps: number
+  /** When true, all animation steps should be visible (used for backward navigation) */
+  showAllAnimations: boolean
+}
+
+const AnimationContext = createContext<AnimationContextValue>({
+  currentStep: 0,
+  totalSteps: 0,
+  showAllAnimations: false
+})
+
+interface AnimationProviderProps {
+  children: React.ReactNode
+  /** Current animation step (0 = no animations shown yet) */
+  currentStep: number
+  /** Total animation steps declared in slide config */
+  totalSteps: number
+  /** When true, show all animations regardless of currentStep (for backward navigation) */
+  showAllAnimations?: boolean
+}
+
+/**
+ * Provides animation context to child components.
+ *
+ * The totalSteps is now passed from parent (declared in slide config)
+ * rather than discovered at runtime, eliminating race conditions.
+ */
+export function AnimationProvider({
+  children,
+  currentStep,
+  totalSteps,
+  showAllAnimations = false
+}: AnimationProviderProps) {
+  const value = useMemo(
+    () => ({
+      currentStep,
+      totalSteps,
+      showAllAnimations
+    }),
+    [currentStep, totalSteps, showAllAnimations]
+  )
+
+  return <AnimationContext.Provider value={value}>{children}</AnimationContext.Provider>
+}
+
+export function useAnimationContext() {
+  return useContext(AnimationContext)
+}

package/src/core/index.ts

@@ -0,0 +1,73 @@
+// Types
+export type {
+  SlideProps,
+  SlideComponent,
+  SlideConfig,
+  NavigationDirection
+} from "./types"
+
+// Animation Config
+export {
+  SLIDE_TRANSITION_DURATION,
+  MORPH_DURATION,
+  STEP_ANIMATION_DURATION,
+  STAGGER_DELAY,
+  EASE_DEFAULT,
+  EASE_OUT,
+  EASE_IN,
+  EASE_MORPH,
+  SPRING_SNAPPY,
+  SPRING_SMOOTH,
+  SPRING_BOUNCY,
+  SLIDE_TRANSITION,
+  MORPH_TRANSITION,
+  STEP_TRANSITION,
+  SLIDE_DISTANCE,
+  ELEMENT_SLIDE_DISTANCE,
+  SLIDE_DIMENSIONS
+} from "./animation-config"
+
+// Animation Context
+export { AnimationProvider, useAnimationContext } from "./animation-context"
+
+// Animated Components
+export { Animated, AnimatedGroup } from "./animated"
+export type { AnimationType } from "./animated"
+
+// Transitions
+export {
+  SLIDE_VARIANTS,
+  createDirectionalVariants,
+  directionalSlideX,
+  directionalSlideY,
+  getSlideVariants,
+  getSlideTransition,
+  DEFAULT_SLIDE_TRANSITION
+} from "./transitions"
+export type { SlideTransitionType, SlideTransitionConfig } from "./transitions"
+
+// Morph
+export { Morph, MorphGroup, MorphItem, MorphText } from "./morph"
+
+// Navigation Hook
+export { useSlideNavigation } from "./use-slide-navigation"
+export type {
+  UseSlideNavigationOptions,
+  UseSlideNavigationReturn
+} from "./use-slide-navigation"
+
+// Theme
+export { SlideThemeProvider, useTheme } from "./theme-context"
+export type { ThemeConfig } from "./types"
+
+// Shared Footer
+export { SlideFooter } from "./layouts/shared-footer"
+
+// SlideDeck
+export { SlideDeck } from "./slide-deck"
+
+// Error Boundary
+export { SlideErrorBoundary } from "./slide-error-boundary"
+
+// Utils
+export { cn } from "./utils"

package/src/core/layouts/shared-footer.tsx

@@ -0,0 +1,43 @@
+import { useTheme } from "../theme-context"
+
+interface SlideFooterProps {
+  slideNumber: number
+  totalSlides: number
+  /** Use light text/logo for dark slide backgrounds */
+  variant?: "default" | "light"
+}
+
+export function SlideFooter({ slideNumber, totalSlides, variant = "default" }: SlideFooterProps) {
+  const theme = useTheme()
+  if (!theme) return null
+
+  const logoUrl = variant === "light"
+    ? (theme.logo?.fullLight ?? theme.logo?.full)
+    : theme.logo?.full
+
+  const textClass = variant === "light"
+    ? "text-white/70"
+    : "text-muted-foreground"
+
+  const nameClass = variant === "light"
+    ? "text-white font-semibold"
+    : "text-foreground font-semibold"
+
+  return (
+    <div className={`mt-4 flex shrink-0 items-center justify-between text-sm ${textClass}`}>
+      <div className={`flex items-center gap-3 tracking-tight ${nameClass}`}>
+        {logoUrl && (
+          <img
+            src={logoUrl}
+            alt={`${theme.name} Logo`}
+            className="h-8 w-auto"
+          />
+        )}
+        <span className="text-lg">{theme.name}</span>
+      </div>
+      <div className="font-mono">
+        {slideNumber} / {totalSlides}
+      </div>
+    </div>
+  )
+}

package/src/core/morph.tsx

@@ -0,0 +1,153 @@
+import type { Transition } from "framer-motion"
+
+import { motion } from "framer-motion"
+
+import { MORPH_TRANSITION } from "./animation-config"
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface MorphProps {
+  layoutId: string
+  transition?: Transition
+  className?: string
+  children: React.ReactNode
+}
+
+interface MorphGroupProps {
+  groupId: string
+  transition?: Transition
+  className?: string
+  children: React.ReactNode
+}
+
+// =============================================================================
+// MORPH COMPONENT
+// =============================================================================
+
+/**
+ * Wrapper component that enables morph/shared-layout animations between slides.
+ *
+ * Usage:
+ * ```tsx
+ * // Slide 1 - Large version
+ * <Morph layoutId="hero-title">
+ *   <h1 className="text-6xl">Title</h1>
+ * </Morph>
+ *
+ * // Slide 2 - Small version (same layoutId = morphs between them)
+ * <Morph layoutId="hero-title">
+ *   <h1 className="text-2xl">Title</h1>
+ * </Morph>
+ * ```
+ */
+export function Morph({
+  layoutId,
+  transition = MORPH_TRANSITION,
+  className,
+  children
+}: MorphProps) {
+  return (
+    <motion.div
+      layout
+      layoutId={layoutId}
+      initial={false}
+      transition={transition}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+// =============================================================================
+// MORPH GROUP COMPONENT
+// =============================================================================
+
+export function MorphGroup({
+  groupId,
+  transition = MORPH_TRANSITION,
+  className,
+  children
+}: MorphGroupProps) {
+  return (
+    <motion.div
+      layout
+      layoutId={groupId}
+      initial={false}
+      transition={transition}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+// =============================================================================
+// MORPH ITEM (for use within MorphGroup pattern)
+// =============================================================================
+
+interface MorphItemProps {
+  id: string
+  prefix?: string
+  transition?: Transition
+  className?: string
+  children: React.ReactNode
+}
+
+export function MorphItem({
+  id,
+  prefix,
+  transition = MORPH_TRANSITION,
+  className,
+  children
+}: MorphItemProps) {
+  const layoutId = prefix ? `${prefix}-${id}` : id
+
+  return (
+    <motion.div
+      layout
+      layoutId={layoutId}
+      initial={false}
+      transition={transition}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+// =============================================================================
+// MORPH TEXT (specialized for text that changes size)
+// =============================================================================
+
+interface MorphTextProps {
+  layoutId: string
+  as?: "h1" | "h2" | "h3" | "h4" | "p" | "span"
+  transition?: Transition
+  className?: string
+  children: React.ReactNode
+}
+
+export function MorphText({
+  layoutId,
+  as: Component = "span",
+  transition = MORPH_TRANSITION,
+  className,
+  children
+}: MorphTextProps) {
+  const MotionComponent = motion[Component]
+
+  return (
+    <MotionComponent
+      layout
+      layoutId={layoutId}
+      initial={false}
+      transition={transition}
+      className={className}
+    >
+      {children}
+    </MotionComponent>
+  )
+}