prjct-cli 0.11.5 → 0.12.0

package/packages/web/components/DashboardContent/DashboardContent.tsx

@@ -0,0 +1,254 @@
+'use client'
+
+import { useState, useCallback, useTransition } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { SessionsChart } from '@/components/charts/SessionsChart'
+import { Button } from '@/components/ui/button'
+import { ProjectAvatar } from '@/components/ProjectAvatar'
+import { TechStackBadges } from '@/components/TechStackBadges'
+import { formatRelativeTime, formatPath } from '@/lib/format'
+import {
+  MoreHorizontal,
+  Trash2,
+  AlertTriangle,
+  Target,
+  Lightbulb,
+  ListTodo,
+  Zap,
+  FolderGit2
+} from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { deleteProject } from '@/lib/actions/projects'
+
+export interface Project {
+  id: string
+  name: string
+  path: string
+  repoPath?: string | null
+  currentTask?: string | null
+  hasActiveSession?: boolean
+  lastActivity?: string | null
+  ideasCount?: number
+  nextTasksCount?: number
+  techStack?: string[]
+  iconPath?: string | null
+  version?: string
+  stack?: string
+  filesCount?: number
+  commitsCount?: number
+}
+
+export interface GlobalStats {
+  userName: string
+  totalProjects: number
+}
+
+interface DashboardContentProps {
+  projects: Project[]
+  stats: GlobalStats
+}
+
+export function DashboardContent({ projects, stats }: DashboardContentProps) {
+  const [projectToDelete, setProjectToDelete] = useState<Project | null>(null)
+  const [isPending, startTransition] = useTransition()
+  const router = useRouter()
+
+  const handleDeleteClick = useCallback((project: Project, e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setProjectToDelete(project)
+  }, [])
+
+  const handleConfirmDelete = useCallback(() => {
+    if (projectToDelete) {
+      startTransition(async () => {
+        await deleteProject(projectToDelete.id)
+        setProjectToDelete(null)
+        router.refresh()
+      })
+    }
+  }, [projectToDelete, router])
+
+  const projectCount = projects?.length || 0
+
+  return (
+    <div className="p-4 sm:p-6 md:p-8 h-full overflow-auto">
+      {/* Mobile: Add padding for hamburger menu */}
+      <div className="pl-10 md:pl-0">
+        <p className="text-sm sm:text-base text-muted-foreground">Hola! {stats?.userName || 'Developer'}</p>
+
+        <h1 className="text-6xl sm:text-7xl md:text-8xl font-bold tracking-tighter tabular-nums mt-2">{projectCount}</h1>
+        <p className="text-sm sm:text-base text-muted-foreground mt-1">{projectCount === 1 ? 'project' : 'projects'}</p>
+      </div>
+
+      <section className="mt-6 sm:mt-8">
+        <SessionsChart />
+      </section>
+
+      <section className="mt-8 sm:mt-10 md:mt-12">
+        <h2 className="font-bold uppercase tracking-wide text-muted-foreground mb-4 sm:mb-6 text-sm">Active Projects</h2>
+
+        {projects?.length === 0 ? (
+          <div className="border-2 border-dashed border-border rounded-xl p-6 sm:p-8 text-center">
+            <p className="text-muted-foreground text-sm sm:text-base">
+              No projects yet. Initialize with <code className="bg-muted px-2 py-1 rounded font-mono text-xs sm:text-sm">/p:init</code>
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
+            {projects?.map((project: Project) => (
+              <ProjectCard key={project.id} project={project} onDeleteClick={handleDeleteClick} />
+            ))}
+          </div>
+        )}
+      </section>
+
+      <AlertDialog open={!!projectToDelete} onOpenChange={(open: boolean) => !open && setProjectToDelete(null)}>
+        <AlertDialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-lg">
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="w-5 h-5 text-destructive shrink-0" />
+              Delete Project?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              <strong>&quot;{projectToDelete?.name}&quot;</strong> will be moved to trash.
+              <br />
+              <span className="text-muted-foreground text-xs sm:text-sm break-all">
+                Location: ~/.prjct-cli/.trash/{projectToDelete?.id}
+              </span>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter className="flex-col sm:flex-row gap-2">
+            <AlertDialogCancel disabled={isPending} className="w-full sm:w-auto">Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmDelete}
+              disabled={isPending}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90 w-full sm:w-auto"
+            >
+              {isPending ? 'Deleting...' : 'Delete'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Bottom safe area padding */}
+      <div className="h-6 sm:h-8" />
+    </div>
+  )
+}
+
+interface ProjectCardProps {
+  project: Project
+  onDeleteClick: (project: Project, e: React.MouseEvent) => void
+}
+
+function ProjectCard({ project, onDeleteClick }: ProjectCardProps) {
+  const hasStats = project.currentTask || project.nextTasksCount || project.ideasCount || project.lastActivity
+
+  return (
+    <div className="group relative bg-card border border-border rounded-lg overflow-hidden hover:border-primary/50 active:scale-[0.99] transition-all">
+      {project.hasActiveSession && <div className="absolute top-0 left-0 right-0 h-0.5 bg-green-500" />}
+
+      <Link href={`/project/${project.id}`} className="block p-3 sm:p-4">
+        <div className="flex items-start gap-3">
+          <ProjectAvatar projectId={project.id} name={project.name} iconPath={project.iconPath} size="lg" />
+
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <h3 className="font-bold truncate text-sm sm:text-base">{project.name}</h3>
+              {project.hasActiveSession && (
+                <span className="flex h-2 w-2 shrink-0">
+                  <span className="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-green-400 opacity-75" />
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+                </span>
+              )}
+            </div>
+            {project.repoPath && (
+              <p className="text-[11px] sm:text-xs text-muted-foreground truncate mt-0.5 flex items-center gap-1">
+                <FolderGit2 className="w-3 h-3 shrink-0" />
+                {formatPath(project.repoPath)}
+              </p>
+            )}
+          </div>
+
+          {/* Mobile: Always show menu button */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity"
+                onClick={(e) => e.preventDefault()}
+              >
+                <MoreHorizontal className="w-4 h-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                className="text-destructive focus:text-destructive min-h-[44px] sm:min-h-0"
+                onClick={(e: React.MouseEvent) => onDeleteClick(project, e)}
+              >
+                <Trash2 className="w-4 h-4 mr-2" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+
+        {project.currentTask && (
+          <div className="mt-3 p-2 bg-primary/5 rounded border border-primary/10">
+            <div className="flex items-start gap-2">
+              <Target className="w-3.5 h-3.5 text-primary shrink-0 mt-0.5" />
+              <span className="text-xs sm:text-sm text-foreground line-clamp-2">{project.currentTask}</span>
+            </div>
+          </div>
+        )}
+
+        {hasStats && (
+          <div className="mt-3 flex flex-wrap items-center gap-2 sm:gap-3 text-[11px] sm:text-xs text-muted-foreground">
+            {(project.nextTasksCount ?? 0) > 0 && (
+              <div className="flex items-center gap-1">
+                <ListTodo className="w-3.5 h-3.5" />
+                <span>{project.nextTasksCount} queued</span>
+              </div>
+            )}
+            {(project.ideasCount ?? 0) > 0 && (
+              <div className="flex items-center gap-1">
+                <Lightbulb className="w-3.5 h-3.5" />
+                <span>{project.ideasCount} ideas</span>
+              </div>
+            )}
+            {project.lastActivity && (
+              <div className="flex items-center gap-1 ml-auto">
+                <Zap className="w-3.5 h-3.5" />
+                <span>{formatRelativeTime(project.lastActivity)}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {project.techStack && project.techStack.length > 0 && (
+          <div className="mt-3">
+            <TechStackBadges techStack={project.techStack} />
+          </div>
+        )}
+      </Link>
+    </div>
+  )
+}

package/packages/web/components/DashboardContent/index.ts

@@ -0,0 +1 @@
+export { DashboardContent } from './DashboardContent'

package/packages/web/components/DateGroup/DateGroup.tsx

@@ -0,0 +1,18 @@
+import { EventRow } from '@/components/EventRow'
+import { formatTimelineDate } from './DateGroup.utils'
+import type { DateGroupProps } from './DateGroup.types'
+
+export function DateGroup({ dateKey, events }: DateGroupProps) {
+  return (
+    <div>
+      <p className="text-[11px] sm:text-[10px] font-bold uppercase tracking-wider text-muted-foreground mb-2">
+        {formatTimelineDate(dateKey + 'T00:00:00')}
+      </p>
+      <div className="space-y-1">
+        {events.map((event, i) => (
+          <EventRow key={i} event={event} />
+        ))}
+      </div>
+    </div>
+  )
+}

package/packages/web/components/DateGroup/DateGroup.types.ts

@@ -0,0 +1,6 @@
+import type { TimelineEvent } from '@/lib/parse-prjct-files'
+
+export interface DateGroupProps {
+  dateKey: string
+  events: TimelineEvent[]
+}

package/packages/web/components/DateGroup/DateGroup.utils.ts

@@ -0,0 +1,11 @@
+export function formatTimelineDate(dateString: string): string {
+  const date = new Date(dateString)
+  const today = new Date()
+  const yesterday = new Date(today)
+  yesterday.setDate(yesterday.getDate() - 1)
+
+  if (date.toDateString() === today.toDateString()) return 'Today'
+  if (date.toDateString() === yesterday.toDateString()) return 'Yesterday'
+
+  return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })
+}

package/packages/web/components/DateGroup/index.ts

@@ -0,0 +1,2 @@
+export { DateGroup } from './DateGroup'
+export type { DateGroupProps } from './DateGroup.types'

package/packages/web/components/{stats → EmptyState}/EmptyState.tsx

@@ -2,16 +2,7 @@
 
 import { cn } from '@/lib/utils'
 import { Copy } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-
-interface EmptyStateProps {
-  icon: LucideIcon
-  title: string
-  description?: string
-  command?: string
-  className?: string
-  compact?: boolean
-}
+import type { EmptyStateProps } from './EmptyState.types'
 
 export function EmptyState({
   icon: Icon,

package/packages/web/components/EmptyState/EmptyState.types.ts

@@ -0,0 +1,10 @@
+import type { LucideIcon } from 'lucide-react'
+
+export interface EmptyStateProps {
+  icon: LucideIcon
+  title: string
+  description?: string
+  command?: string
+  className?: string
+  compact?: boolean
+}

package/packages/web/components/EmptyState/index.ts

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState'
+export type { EmptyStateProps } from './EmptyState.types'

package/packages/web/components/EventRow/EventRow.constants.ts

@@ -0,0 +1,10 @@
+import { Activity, CheckCircle2, Rocket, Target, RefreshCw } from 'lucide-react'
+import type { EventIconName } from './EventRow.types'
+
+export const EVENT_ICON_MAP: Record<EventIconName, typeof Activity> = {
+  check: CheckCircle2,
+  target: Target,
+  rocket: Rocket,
+  refresh: RefreshCw,
+  activity: Activity,
+}

package/packages/web/components/EventRow/EventRow.tsx

@@ -0,0 +1,49 @@
+import { cn } from '@/lib/utils'
+import { EVENT_ICON_MAP } from './EventRow.constants'
+import {
+  formatTime,
+  getEventIconName,
+  getEventColor,
+  getEventBadge,
+  getEventLabel,
+} from './EventRow.utils'
+import type { EventRowProps } from './EventRow.types'
+
+export function EventRow({ event }: EventRowProps) {
+  const iconName = getEventIconName(event.type)
+  const Icon = EVENT_ICON_MAP[iconName]
+  const duration = 'duration' in event && typeof event.duration === 'string' ? event.duration : null
+
+  return (
+    <div className="flex items-center gap-2 sm:gap-3 py-2 sm:py-1.5 px-2 -mx-2 rounded-md hover:bg-muted/50 active:bg-muted/70 transition-colors group">
+      {event.ts && (
+        <span className="hidden sm:block text-[10px] text-muted-foreground w-14 shrink-0 tabular-nums">
+          {formatTime(event.ts)}
+        </span>
+      )}
+
+      <Icon className={cn('h-4 w-4 sm:h-3.5 sm:w-3.5 shrink-0', getEventColor(event.type))} />
+
+      <div className="flex-1 min-w-0">
+        <span className="text-sm truncate block group-hover:text-foreground transition-colors">
+          {getEventLabel(event)}
+        </span>
+        {event.ts && (
+          <span className="sm:hidden text-[10px] text-muted-foreground">
+            {formatTime(event.ts)}
+          </span>
+        )}
+      </div>
+
+      <span className="text-[9px] font-bold tracking-wider text-muted-foreground shrink-0">
+        {getEventBadge(event.type)}
+      </span>
+
+      {duration && (
+        <span className="text-[10px] text-muted-foreground shrink-0">
+          {duration}
+        </span>
+      )}
+    </div>
+  )
+}

package/packages/web/components/EventRow/EventRow.types.ts

@@ -0,0 +1,7 @@
+import type { TimelineEvent } from '@/lib/parse-prjct-files'
+
+export type EventIconName = 'check' | 'target' | 'rocket' | 'refresh' | 'activity'
+
+export interface EventRowProps {
+  event: TimelineEvent
+}

package/packages/web/components/EventRow/EventRow.utils.ts

@@ -0,0 +1,49 @@
+import type { EventIconName } from './EventRow.types'
+
+export function formatTime(dateString: string): string {
+  const date = new Date(dateString)
+  return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
+}
+
+export function getEventIconName(type: string): EventIconName {
+  const iconMap: Record<string, EventIconName> = {
+    task_complete: 'check',
+    task_start: 'target',
+    feature_ship: 'rocket',
+    sync: 'refresh',
+  }
+  return iconMap[type] ?? 'activity'
+}
+
+export function getEventColor(type: string): string {
+  const colorMap: Record<string, string> = {
+    task_complete: 'text-emerald-500',
+    task_start: 'text-amber-500',
+    feature_ship: 'text-blue-500',
+    sync: 'text-muted-foreground',
+  }
+  return colorMap[type] ?? 'text-muted-foreground'
+}
+
+export function getEventBadge(type: string): string {
+  const badgeMap: Record<string, string> = {
+    task_complete: 'DONE',
+    task_start: 'START',
+    feature_ship: 'SHIP',
+    sync: 'SYNC',
+  }
+  return badgeMap[type] ?? type.toUpperCase()
+}
+
+export function getEventLabel(event: unknown): string {
+  const e = event as { type?: string; task?: string; name?: string }
+  const type = e.type ?? ''
+
+  const labelMap: Record<string, string> = {
+    task_complete: e.task ?? 'Task completed',
+    task_start: e.task ?? 'Task started',
+    feature_ship: e.name ?? 'Feature shipped',
+    sync: 'Project synced',
+  }
+  return labelMap[type] ?? type
+}

package/packages/web/components/EventRow/index.ts

@@ -0,0 +1,2 @@
+export { EventRow } from './EventRow'
+export type { EventRowProps } from './EventRow.types'

package/packages/web/components/ExpandButton/ExpandButton.tsx

@@ -0,0 +1,18 @@
+import { ChevronDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import type { ExpandButtonProps } from './ExpandButton.types'
+
+export function ExpandButton({ expanded, totalCount, collapsedLimit, onToggle }: ExpandButtonProps) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={onToggle}
+      className="w-full text-muted-foreground min-h-[44px]"
+    >
+      <ChevronDown className={cn('h-4 w-4 mr-1 transition-transform', expanded && 'rotate-180')} />
+      {expanded ? 'Show less' : `Show ${totalCount - collapsedLimit} more`}
+    </Button>
+  )
+}

package/packages/web/components/ExpandButton/ExpandButton.types.ts

@@ -0,0 +1,6 @@
+export interface ExpandButtonProps {
+  expanded: boolean
+  totalCount: number
+  collapsedLimit: number
+  onToggle: () => void
+}

package/packages/web/components/ExpandButton/index.ts

@@ -0,0 +1,2 @@
+export { ExpandButton } from './ExpandButton'
+export type { ExpandButtonProps } from './ExpandButton.types'

package/packages/web/components/HealthGradientBackground/HealthGradientBackground.tsx

@@ -0,0 +1,14 @@
+import { cn } from '@/lib/utils'
+import { getHealthGradient } from './HealthGradientBackground.utils'
+import type { HealthGradientBackgroundProps } from './HealthGradientBackground.types'
+
+export function HealthGradientBackground({ score }: HealthGradientBackgroundProps) {
+  return (
+    <div
+      className={cn(
+        'absolute inset-0 -m-4 md:-m-8 rounded-2xl opacity-30 blur-3xl transition-colors duration-1000',
+        getHealthGradient(score)
+      )}
+    />
+  )
+}

package/packages/web/components/HealthGradientBackground/HealthGradientBackground.types.ts

@@ -0,0 +1,5 @@
+export type AccentColor = 'default' | 'success' | 'warning' | 'destructive'
+
+export interface HealthGradientBackgroundProps {
+  score: number
+}

package/packages/web/components/HealthGradientBackground/HealthGradientBackground.utils.ts

@@ -0,0 +1,13 @@
+import type { AccentColor } from './HealthGradientBackground.types'
+
+export function getHealthColor(score: number): AccentColor {
+  if (score >= 70) return 'success'
+  if (score >= 40) return 'warning'
+  return 'destructive'
+}
+
+export function getHealthGradient(score: number): string {
+  if (score >= 70) return 'bg-gradient-to-br from-emerald-500/20 to-transparent'
+  if (score >= 40) return 'bg-gradient-to-br from-amber-500/20 to-transparent'
+  return 'bg-gradient-to-br from-destructive/20 to-transparent'
+}

package/packages/web/components/HealthGradientBackground/index.ts

@@ -0,0 +1,2 @@
+export { HealthGradientBackground } from './HealthGradientBackground'
+export type { HealthGradientBackgroundProps } from './HealthGradientBackground.types'

package/packages/web/components/HeroSection/HeroSection.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { ProgressRing } from '@/components/ProgressRing'
+import { BackLink } from '@/components/BackLink'
+import { TasksCounter } from '@/components/TasksCounter'
+import { VelocityBadge } from '@/components/VelocityBadge'
+import { InsightMessage } from '@/components/InsightMessage'
+import { WeeklySparkline } from '@/components/WeeklySparkline'
+import { HealthGradientBackground } from '@/components/HealthGradientBackground'
+import { useCountUp, useWeeklyActivity } from './hooks'
+import { getHealthColor } from './HeroSection.utils'
+import type { HeroProps } from './HeroSection.types'
+
+export function HeroSection({
+  projectId,
+  projectName,
+  tasksCompleted,
+  healthScore,
+  velocityChange,
+  insightMessage,
+  timeline = [],
+}: HeroProps) {
+  const animatedCount = useCountUp(tasksCompleted)
+  const weeklyData = useWeeklyActivity(timeline)
+  const healthColor = getHealthColor(healthScore)
+
+  return (
+    <div className="relative mb-6 md:mb-8">
+      <HealthGradientBackground score={healthScore} />
+      <BackLink projectId={projectId} projectName={projectName} className="md:hidden mb-4" />
+
+      <div className="relative flex flex-col md:flex-row md:items-start md:justify-between gap-4 md:gap-0">
+        <div className="flex items-center md:items-start gap-4 md:gap-6">
+          <ProgressRing
+            value={healthScore}
+            size="xl"
+            accentColor={healthColor}
+            className="shrink-0"
+          />
+
+          <div className="flex-1 min-w-0">
+            <TasksCounter count={animatedCount} />
+            <VelocityBadge change={velocityChange} />
+            <InsightMessage message={insightMessage} />
+          </div>
+        </div>
+
+        <div className="flex flex-col items-start md:items-end gap-3 md:gap-4">
+          <BackLink projectId={projectId} projectName={projectName} className="hidden md:flex" />
+          <WeeklySparkline data={weeklyData} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/packages/web/components/HeroSection/HeroSection.types.ts

@@ -0,0 +1,14 @@
+import type { TimelineEvent } from '@/lib/parse-prjct-files'
+
+export type { TimelineEvent }
+
+export interface HeroProps {
+  projectId: string
+  projectName: string
+  tasksCompleted: number
+  healthScore: number
+  velocity: number
+  velocityChange: number
+  insightMessage: string
+  timeline?: TimelineEvent[]
+}

package/packages/web/components/HeroSection/HeroSection.utils.ts

@@ -0,0 +1,7 @@
+export type AccentColor = 'default' | 'success' | 'warning' | 'destructive'
+
+export function getHealthColor(score: number): AccentColor {
+  if (score >= 70) return 'success'
+  if (score >= 40) return 'warning'
+  return 'destructive'
+}

package/packages/web/components/HeroSection/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useCountUp } from './useCountUp'
+export { useWeeklyActivity } from './useWeeklyActivity'

package/packages/web/components/HeroSection/hooks/useCountUp.ts

@@ -0,0 +1,45 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+
+export function useCountUp(target: number, duration: number = 800): number {
+  const [count, setCount] = useState(0)
+  const prevTargetRef = useRef(target)
+
+  useEffect(() => {
+    if (target === 0) {
+      // Only reset if target changed to 0 (not if it was already 0)
+      if (prevTargetRef.current !== 0) {
+        // Defer state update to avoid synchronous setState in effect
+        const timeoutId = setTimeout(() => setCount(0), 0)
+        prevTargetRef.current = target
+        return () => clearTimeout(timeoutId)
+      }
+      prevTargetRef.current = target
+      return
+    }
+
+    prevTargetRef.current = target
+
+    const startTime = performance.now()
+
+    const animate = (currentTime: number) => {
+      const elapsed = currentTime - startTime
+      const progress = Math.min(elapsed / duration, 1)
+      const easeOut = 1 - Math.pow(1 - progress, 3)
+      const current = Math.floor(easeOut * target)
+
+      setCount(current)
+
+      if (progress < 1) {
+        requestAnimationFrame(animate)
+      } else {
+        setCount(target)
+      }
+    }
+
+    requestAnimationFrame(animate)
+  }, [target, duration])
+
+  return count
+}