{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pomodoro-focus-timer",
  "title": "Pomodoro Focus Timer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/pomodoro-focus-timer/PomodoroFocusTimer.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  BarChart3,\n  Check,\n  Flame,\n  Headphones,\n  ListTodo,\n  Music2,\n  Pause,\n  Play,\n  Plus,\n  RotateCcw,\n  SkipForward,\n  Target,\n  Trash2,\n  Trees,\n  Volume2,\n  VolumeX,\n  Waves,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface FocusTask {\n  id: string\n  title: string\n  tag: string\n  done: boolean\n  currentPomodoros: number\n  targetPomodoros: number\n}\n\nexport type TimerMode = 'focus' | 'shortBreak' | 'longBreak'\n\nexport interface PomodoroFocusTimerProps {\n  initialMode?: TimerMode\n  initialTime?: number\n  initialSound?: string\n  initialSession?: number\n  className?: string\n}\n\nconst MODE_DURATIONS: Record<TimerMode, number> = {\n  focus: 25 * 60,\n  shortBreak: 5 * 60,\n  longBreak: 15 * 60,\n}\n\nconst ambientSounds = [\n  { id: 'off', name: 'Off / Mute', icon: VolumeX, label: 'Silent' },\n  { id: 'whitenoise', name: 'Deep Focus White Noise', icon: Waves, label: 'White Noise' },\n  { id: 'lofi', name: 'Lofi Beats', icon: Music2, label: 'Lofi Beats' },\n  { id: 'rainforest', name: 'Rainforest', icon: Trees, label: 'Rainforest' },\n]\n\nconst initialTasks: FocusTask[] = [\n  {\n    id: 'task-1',\n    title: 'Refactor OKLCH color-mix utilities in Tailwind v4',\n    tag: 'Design System',\n    done: false,\n    currentPomodoros: 2,\n    targetPomodoros: 3,\n  },\n  {\n    id: 'task-2',\n    title: 'Audit ARIA accessibility roles on interactive primitives',\n    tag: 'Accessibility',\n    done: true,\n    currentPomodoros: 2,\n    targetPomodoros: 2,\n  },\n  {\n    id: 'task-3',\n    title: 'Draft technical RFC for component variant registry',\n    tag: 'Architecture',\n    done: false,\n    currentPomodoros: 0,\n    targetPomodoros: 2,\n  },\n  {\n    id: 'task-4',\n    title: 'Benchmark Astro island hydration bundle sizes',\n    tag: 'Performance',\n    done: false,\n    currentPomodoros: 1,\n    targetPomodoros: 4,\n  },\n]\n\nexport function PomodoroFocusTimer({\n  initialMode = 'focus',\n  initialTime = 1485, // 24:45\n  initialSound = 'lofi',\n  initialSession = 3,\n  className,\n}: PomodoroFocusTimerProps) {\n  const [currentMode, setCurrentMode] = React.useState<TimerMode>(initialMode)\n  const [remainingSeconds, setRemainingSeconds] = React.useState<number>(initialTime)\n  const [isRunning, setIsRunning] = React.useState<boolean>(false)\n  const [currentSession, setCurrentSession] = React.useState<number>(initialSession)\n  const [completedSessionsToday, setCompletedSessionsToday] = React.useState<number>(8)\n  const [selectedSound, setSelectedSound] = React.useState<string>(initialSound)\n  const [isSoundMuted, setIsSoundMuted] = React.useState<boolean>(false)\n  const [tasks, setTasks] = React.useState<FocusTask[]>(initialTasks)\n  const [activeTaskId, setActiveTaskId] = React.useState<string>('task-1')\n  const [newTaskTitle, setNewTaskTitle] = React.useState<string>('')\n  const [newTaskEstimate, setNewTaskEstimate] = React.useState<number>(2)\n\n  // Timer interval countdown\n  React.useEffect(() => {\n    let interval: NodeJS.Timeout | null = null\n    if (isRunning) {\n      interval = setInterval(() => {\n        setRemainingSeconds((prev) => {\n          if (prev <= 1) {\n            handleSkipPhase()\n            return 0\n          }\n          return prev - 1\n        })\n      }, 1000)\n    }\n    return () => {\n      if (interval) clearInterval(interval)\n    }\n  }, [isRunning, currentMode, currentSession, activeTaskId])\n\n  const activeTask = tasks.find((t) => t.id === activeTaskId) ||\n    tasks.find((t) => !t.done) || {\n      id: 'default',\n      title: 'General Deep Work Session',\n      tag: 'Productivity',\n      done: false,\n      currentPomodoros: 0,\n      targetPomodoros: 1,\n    }\n\n  const completedTasksCount = tasks.filter((t) => t.done).length\n  const totalModeSeconds = MODE_DURATIONS[currentMode]\n  const progressPercentage = Math.min(\n    100,\n    Math.max(0, ((totalModeSeconds - remainingSeconds) / totalModeSeconds) * 100),\n  )\n\n  const RADIUS = 104\n  const CIRCUMFERENCE = 2 * Math.PI * RADIUS\n  const strokeDashoffset = CIRCUMFERENCE * (1 - progressPercentage / 100)\n\n  function formatTime(seconds: number): string {\n    const mins = Math.floor(seconds / 60)\n    const secs = seconds % 60\n    return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`\n  }\n\n  function handleToggleTimer() {\n    setIsRunning((prev) => !prev)\n  }\n\n  function handleResetTimer() {\n    setIsRunning(false)\n    setRemainingSeconds(MODE_DURATIONS[currentMode])\n  }\n\n  function handleSetMode(mode: TimerMode) {\n    setIsRunning(false)\n    setCurrentMode(mode)\n    setRemainingSeconds(MODE_DURATIONS[mode])\n  }\n\n  function handleSkipPhase() {\n    setIsRunning(false)\n    if (currentMode === 'focus') {\n      setCompletedSessionsToday((prev) => prev + 1)\n      setTasks((prev) =>\n        prev.map((t) =>\n          t.id === activeTaskId && t.currentPomodoros < t.targetPomodoros\n            ? { ...t, currentPomodoros: t.currentPomodoros + 1 }\n            : t,\n        ),\n      )\n      if (currentSession >= 4) {\n        setCurrentMode('longBreak')\n        setCurrentSession(1)\n        setRemainingSeconds(MODE_DURATIONS.longBreak)\n      } else {\n        setCurrentMode('shortBreak')\n        setCurrentSession((prev) => prev + 1)\n        setRemainingSeconds(MODE_DURATIONS.shortBreak)\n      }\n    } else {\n      setCurrentMode('focus')\n      setRemainingSeconds(MODE_DURATIONS.focus)\n    }\n  }\n\n  function handleToggleTask(taskId: string) {\n    setTasks((prev) =>\n      prev.map((t) => {\n        if (t.id === taskId) {\n          const nextDone = !t.done\n          return {\n            ...t,\n            done: nextDone,\n            currentPomodoros:\n              nextDone && t.currentPomodoros < t.targetPomodoros ? t.targetPomodoros : t.currentPomodoros,\n          }\n        }\n        return t\n      }),\n    )\n  }\n\n  function handleRemoveTask(taskId: string) {\n    setTasks((prev) => prev.filter((t) => t.id !== taskId))\n    if (activeTaskId === taskId) {\n      const remaining = tasks.filter((t) => t.id !== taskId)\n      if (remaining.length > 0) {\n        setActiveTaskId(remaining[0].id)\n      }\n    }\n  }\n\n  function handleAddTask(e: React.FormEvent) {\n    e.preventDefault()\n    const trimmed = newTaskTitle.trim()\n    if (!trimmed) return\n    const id = `task-${Date.now()}`\n    const newTask: FocusTask = {\n      id,\n      title: trimmed,\n      tag: 'Focus',\n      done: false,\n      currentPomodoros: 0,\n      targetPomodoros: Math.max(1, newTaskEstimate || 2),\n    }\n    setTasks((prev) => [...prev, newTask])\n    setNewTaskTitle('')\n    setNewTaskEstimate(2)\n    if (!activeTaskId || tasks.length === 0) {\n      setActiveTaskId(id)\n    }\n  }\n\n  function handleToggleSoundMute() {\n    setIsSoundMuted((prev) => !prev)\n  }\n\n  return (\n    <div data-slot=\"pomodoro-focus-timer\" className={cn('mx-auto w-full max-w-5xl space-y-6', className)}>\n      {/* Header Section */}\n      <header className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"space-y-1\">\n          <div className=\"flex items-center gap-2\">\n            <h2 className=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n              Focus Space &amp; Pomodoro Timer\n            </h2>\n            <Badge variant=\"secondary\" className=\"font-mono text-xs\">\n              v2.4\n            </Badge>\n          </div>\n          <p className=\"text-muted-foreground text-sm\">\n            High-yield interval productivity engine with ambient soundscapes and active task execution.\n          </p>\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {/* Daily Streak Badge */}\n          <Badge\n            wrap\n            variant=\"outline\"\n            className=\"border-warning/30 bg-warning/10 text-warning gap-1.5 px-3 py-1.5 text-xs font-semibold\"\n          >\n            <Flame className=\"fill-warning text-warning size-4\" />\n            <span>🔥 6-Day Focus Streak · {completedSessionsToday} Sessions Complete Today</span>\n          </Badge>\n        </div>\n      </header>\n\n      {/* Ambient Sound Preset Bar */}\n      <Card>\n        <CardContent className=\"flex flex-wrap items-center justify-between gap-3 p-3 sm:p-4\">\n          <div className=\"text-muted-foreground flex items-center gap-2 text-xs font-medium\">\n            <Headphones className=\"text-primary size-4\" />\n            <span className=\"text-foreground font-semibold\">Ambient Sound:</span>\n            <span className=\"hidden sm:inline\">Choose your background audio focus generator</span>\n          </div>\n\n          <div className=\"flex flex-wrap items-center gap-1.5\">\n            {ambientSounds.map((sound) => {\n              const Icon = sound.icon\n              const isCurrent = selectedSound === sound.id && !isSoundMuted\n              return (\n                <Button\n                  key={sound.id}\n                  variant={isCurrent ? 'default' : 'outline'}\n                  size=\"sm\"\n                  className=\"h-8 gap-1.5 text-xs\"\n                  onClick={() => {\n                    setSelectedSound(sound.id)\n                    if (sound.id === 'off') {\n                      setIsSoundMuted(true)\n                    } else {\n                      setIsSoundMuted(false)\n                    }\n                  }}\n                >\n                  <Icon className=\"size-3.5\" />\n                  <span>{sound.name}</span>\n                  {isCurrent && sound.id !== 'off' && (\n                    <span className=\"flex items-center gap-0.5\">\n                      <span className=\"bg-primary-foreground h-2 w-0.5 animate-pulse\" />\n                      <span className=\"bg-primary-foreground h-3.5 w-0.5 animate-pulse delay-75\" />\n                      <span className=\"bg-primary-foreground h-1.5 w-0.5 animate-pulse delay-150\" />\n                    </span>\n                  )}\n                </Button>\n              )\n            })}\n\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              className=\"text-muted-foreground hover:text-foreground size-8\"\n              title={isSoundMuted ? 'Unmute Ambient Sound' : 'Mute Ambient Sound'}\n              onClick={handleToggleSoundMute}\n            >\n              {isSoundMuted ? <VolumeX className=\"text-destructive size-4\" /> : <Volume2 className=\"size-4\" />}\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Main Grid: Timer Centerpiece (Left) and Tasks + Analytics (Right) */}\n      <div className=\"grid grid-cols-1 items-start gap-6 lg:grid-cols-12\">\n        {/* Left Column: Centerpiece Timer */}\n        <div className=\"space-y-6 lg:col-span-6\">\n          {/* Timer Card */}\n          <Card className=\"border-border relative overflow-hidden shadow-xs\">\n            {/* Card Header / Mode Switcher */}\n            <CardHeader className=\"pb-2 text-center\">\n              <div className=\"bg-muted/70 mx-auto flex w-full max-w-sm items-center justify-center rounded-xl p-1\">\n                <Button\n                  variant={currentMode === 'focus' ? 'default' : 'ghost'}\n                  size=\"sm\"\n                  className=\"flex-1 rounded-lg text-xs font-semibold\"\n                  onClick={() => handleSetMode('focus')}\n                >\n                  Focus 25m\n                </Button>\n                <Button\n                  variant={currentMode === 'shortBreak' ? 'default' : 'ghost'}\n                  size=\"sm\"\n                  className=\"flex-1 rounded-lg text-xs font-semibold\"\n                  onClick={() => handleSetMode('shortBreak')}\n                >\n                  Short Break 5m\n                </Button>\n                <Button\n                  variant={currentMode === 'longBreak' ? 'default' : 'ghost'}\n                  size=\"sm\"\n                  className=\"flex-1 rounded-lg text-xs font-semibold\"\n                  onClick={() => handleSetMode('longBreak')}\n                >\n                  Long Break 15m\n                </Button>\n              </div>\n            </CardHeader>\n\n            {/* Card Content / Circular Countdown Display */}\n            <CardContent className=\"flex flex-col items-center justify-center pt-4 pb-2\">\n              {/* Circular SVG Ring Frame */}\n              <div className=\"relative flex size-64 items-center justify-center sm:size-72\">\n                <svg className=\"size-full -rotate-90 transform\" viewBox=\"0 0 256 256\">\n                  {/* Background track */}\n                  <circle\n                    cx=\"128\"\n                    cy=\"128\"\n                    r={RADIUS}\n                    fill=\"transparent\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"10\"\n                    className=\"text-muted/40\"\n                  />\n                  {/* Progress ring */}\n                  <circle\n                    cx=\"128\"\n                    cy=\"128\"\n                    r={RADIUS}\n                    fill=\"transparent\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"10\"\n                    strokeLinecap=\"round\"\n                    strokeDasharray={CIRCUMFERENCE}\n                    strokeDashoffset={strokeDashoffset}\n                    className={cn(\n                      'transition-colors duration-700 ease-out motion-reduce:transition-none',\n                      currentMode === 'focus' && 'text-primary',\n                      currentMode === 'shortBreak' && 'text-success',\n                      currentMode === 'longBreak' && 'text-info',\n                    )}\n                  />\n                </svg>\n\n                {/* Center Countdown Display */}\n                <div className=\"absolute inset-0 flex flex-col items-center justify-center text-center\">\n                  <div className=\"flex items-center gap-1.5\">\n                    <span\n                      className={cn(\n                        'size-2 rounded-full',\n                        isRunning ? 'animate-ping' : 'opacity-60',\n                        currentMode === 'focus' && 'bg-primary',\n                        currentMode === 'shortBreak' && 'bg-success',\n                        currentMode === 'longBreak' && 'bg-info',\n                      )}\n                    />\n                    <span\n                      className={cn(\n                        'text-xs font-semibold tracking-wider uppercase',\n                        currentMode === 'focus' && 'text-primary',\n                        currentMode === 'shortBreak' && 'text-success',\n                        currentMode === 'longBreak' && 'text-info',\n                      )}\n                    >\n                      {currentMode === 'focus'\n                        ? 'Deep Focus'\n                        : currentMode === 'shortBreak'\n                          ? 'Short Break'\n                          : 'Rest Phase'}\n                    </span>\n                  </div>\n\n                  {/* Big Countdown Readout */}\n                  <div className=\"text-foreground my-1 font-mono text-5xl font-bold tracking-tight tabular-nums sm:text-6xl\">\n                    {formatTime(remainingSeconds)}\n                  </div>\n\n                  {/* Current State Label */}\n                  <div className=\"text-muted-foreground text-xs font-medium\">\n                    {isRunning ? `Session ${currentSession} of 4 active` : 'Timer Paused'}\n                  </div>\n                </div>\n              </div>\n\n              {/* Current Active Task Banner */}\n              <div className=\"border-border/70 bg-muted/40 mt-4 flex w-full max-w-sm items-center justify-between gap-2 rounded-lg border p-2.5 text-xs\">\n                <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n                  <Target className=\"text-primary size-4 shrink-0\" />\n                  <div className=\"min-w-0 flex-1\">\n                    <span className=\"text-foreground block truncate font-medium\">{activeTask.title}</span>\n                  </div>\n                </div>\n                <Badge wrap variant=\"secondary\" className=\"shrink-0 gap-1 text-xs\">\n                  <span>\n                    🍅 {activeTask.currentPomodoros}/{activeTask.targetPomodoros}\n                  </span>\n                </Badge>\n              </div>\n            </CardContent>\n\n            {/* Action Controls & Session Dots */}\n            <CardFooter className=\"flex flex-col gap-4 pt-2\">\n              {/* Action Buttons Row */}\n              <div className=\"flex items-center justify-center gap-4\">\n                {/* Reset Button */}\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  className=\"text-muted-foreground hover:text-foreground size-11 rounded-full\"\n                  title=\"Reset current interval\"\n                  onClick={handleResetTimer}\n                  aria-label=\"Action\"\n                >\n                  <RotateCcw className=\"size-4\" />\n                </Button>\n\n                {/* Primary Play / Pause Button */}\n                <Button\n                  variant=\"default\"\n                  size=\"icon-lg\"\n                  className=\"size-14 rounded-full shadow-md transition-[color,background-color,border-color,box-shadow,opacity,transform,scale,translate,rotate] active:scale-95\"\n                  title={isRunning ? 'Pause Timer' : 'Start Focus Timer'}\n                  onClick={handleToggleTimer}\n                >\n                  {isRunning ? (\n                    <Pause className=\"size-6 fill-current\" />\n                  ) : (\n                    <Play className=\"ml-0.5 size-6 fill-current\" />\n                  )}\n                </Button>\n\n                {/* Skip Button */}\n                <Button\n                  variant=\"outline\"\n                  size=\"icon\"\n                  className=\"text-muted-foreground hover:text-foreground size-11 rounded-full\"\n                  title=\"Skip to next phase\"\n                  onClick={handleSkipPhase}\n                  aria-label=\"Action\"\n                >\n                  <SkipForward className=\"size-4\" />\n                </Button>\n              </div>\n\n              <Separator />\n\n              {/* Session Tracker 4-Dot Indicator */}\n              <div className=\"text-muted-foreground flex w-full items-center justify-between text-xs\">\n                <span className=\"text-foreground font-medium\">Session {currentSession} of 4</span>\n\n                <div className=\"flex items-center gap-2\">\n                  {[1, 2, 3, 4].map((index) => (\n                    <div\n                      key={index}\n                      className={cn(\n                        'flex size-4 items-center justify-center rounded-full transition-colors',\n                        index < currentSession\n                          ? 'bg-primary text-primary-foreground'\n                          : index === currentSession\n                            ? 'ring-primary ring-offset-background bg-primary/80 ring-2 ring-offset-2'\n                            : 'border-muted-foreground/30 bg-muted/30 border-2',\n                      )}\n                    >\n                      {index < currentSession && <Check className=\"size-2.5 stroke-[3]\" />}\n                    </div>\n                  ))}\n                </div>\n\n                <span>Long break after 4</span>\n              </div>\n            </CardFooter>\n          </Card>\n\n          {/* Daily Focus Analytics Card */}\n          <Card className=\"border-border shadow-xs\">\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <BarChart3 className=\"text-primary size-4\" />\n                  <CardTitle className=\"text-base font-semibold\">Daily Focus Analytics</CardTitle>\n                </div>\n                <Badge wrap variant=\"outline\" className=\"text-muted-foreground text-xs font-normal\">\n                  Today\n                </Badge>\n              </div>\n              <CardDescription className=\"text-xs\">\n                Aggregated productivity stats and session completion rate\n              </CardDescription>\n            </CardHeader>\n\n            <CardContent className=\"space-y-4\">\n              {/* 3 Mini Metric Tiles */}\n              <div className=\"grid grid-cols-3 gap-3\">\n                <div className=\"border-border/60 bg-muted/30 rounded-lg border p-3 text-center\">\n                  <div className=\"text-muted-foreground text-xs font-medium\">Total Focus</div>\n                  <div className=\"text-foreground mt-1 font-mono text-lg font-bold tabular-nums\">3h 45m</div>\n                  <div className=\"text-success mt-0.5 text-xs\">+28m vs avg</div>\n                </div>\n\n                <div className=\"border-border/60 bg-muted/30 rounded-lg border p-3 text-center\">\n                  <div className=\"text-muted-foreground text-xs font-medium\">Completed</div>\n                  <div className=\"text-foreground mt-1 font-mono text-lg font-bold tabular-nums\">\n                    {completedSessionsToday} <span className=\"text-muted-foreground text-xs font-normal\">/ 10</span>\n                  </div>\n                  <div className=\"text-muted-foreground mt-0.5 text-xs\">80% of goal</div>\n                </div>\n\n                <div className=\"border-border/60 bg-muted/30 rounded-lg border p-3 text-center\">\n                  <div className=\"text-muted-foreground text-xs font-medium\">Focus Score</div>\n                  <div className=\"text-foreground mt-1 font-mono text-lg font-bold tabular-nums\">94%</div>\n                  <div className=\"text-primary mt-0.5 text-xs font-semibold\">High Flow</div>\n                </div>\n              </div>\n\n              {/* Daily Goal Progress */}\n              <div className=\"space-y-1.5\">\n                <div className=\"flex items-center justify-between text-xs\">\n                  <span className=\"text-muted-foreground\">Daily Session Goal</span>\n                  <span className=\"text-foreground font-semibold tabular-nums\">{completedSessionsToday}/10 (80%)</span>\n                </div>\n                <Progress value={80} className=\"h-2\" />\n              </div>\n\n              <Separator />\n\n              {/* Recent Sessions History */}\n              <div className=\"space-y-2\">\n                <div className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                  Recent Completed Intervals\n                </div>\n                <div className=\"space-y-1.5 text-xs\">\n                  <div className=\"bg-muted/30 flex items-center justify-between rounded-md px-2.5 py-1.5\">\n                    <div className=\"flex items-center gap-2 truncate\">\n                      <span className=\"text-muted-foreground font-mono tabular-nums\">10:45 AM</span>\n                      <span className=\"text-foreground truncate font-medium\">Refactor OKLCH color-mix</span>\n                    </div>\n                    <Badge wrap variant=\"success\" className=\"h-5 px-1.5 text-xs\">\n                      25m Focus\n                    </Badge>\n                  </div>\n                  <div className=\"bg-muted/30 flex items-center justify-between rounded-md px-2.5 py-1.5\">\n                    <div className=\"flex items-center gap-2 truncate\">\n                      <span className=\"text-muted-foreground font-mono tabular-nums\">10:15 AM</span>\n                      <span className=\"text-muted-foreground truncate\">Short Break · Lofi Beats</span>\n                    </div>\n                    <Badge wrap variant=\"secondary\" className=\"h-5 px-1.5 text-xs\">\n                      5m Rest\n                    </Badge>\n                  </div>\n                  <div className=\"bg-muted/30 flex items-center justify-between rounded-md px-2.5 py-1.5\">\n                    <div className=\"flex items-center gap-2 truncate\">\n                      <span className=\"text-muted-foreground font-mono tabular-nums\">09:30 AM</span>\n                      <span className=\"text-foreground truncate font-medium\">Audit ARIA roles</span>\n                    </div>\n                    <Badge wrap variant=\"success\" className=\"h-5 px-1.5 text-xs\">\n                      25m Focus\n                    </Badge>\n                  </div>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n\n        {/* Right Column: Active Task Queue */}\n        <div className=\"space-y-6 lg:col-span-6\">\n          <Card className=\"border-border shadow-xs\">\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <ListTodo className=\"text-primary size-4\" />\n                  <CardTitle className=\"text-base font-semibold\">Active Focus Task Queue</CardTitle>\n                </div>\n                <Badge wrap variant=\"secondary\" className=\"text-xs\">\n                  {completedTasksCount}/{tasks.length} Completed\n                </Badge>\n              </div>\n              <CardDescription className=\"text-xs\">\n                Select an item to link it to the active timer countdown. Check off tasks as you finish.\n              </CardDescription>\n            </CardHeader>\n\n            <CardContent className=\"space-y-4\">\n              {/* Add New Task Form */}\n              <form className=\"flex items-center gap-2\" onSubmit={handleAddTask}>\n                <div className=\"flex-1\">\n                  <Input\n                    value={newTaskTitle}\n                    onChange={(e) => setNewTaskTitle(e.target.value)}\n                    placeholder=\"Add a new focus task...\"\n                    size=\"middle\"\n                    className=\"text-xs\"\n                  />\n                </div>\n                <div className=\"w-20\">\n                  <Input\n                    value={newTaskEstimate}\n                    onChange={(e) => setNewTaskEstimate(Number(e.target.value))}\n                    type=\"number\"\n                    min={1}\n                    max={12}\n                    placeholder=\"🍅 Est\"\n                    size=\"middle\"\n                    className=\"text-center text-xs tabular-nums\"\n                    title=\"Estimated Pomodoros\"\n                  />\n                </div>\n                <Button type=\"submit\" size=\"default\" className=\"gap-1 text-xs\">\n                  <Plus className=\"size-3.5\" />\n                  <span>Add</span>\n                </Button>\n              </form>\n\n              <Separator />\n\n              {/* Tasks List */}\n              <div className=\"space-y-2.5\">\n                {tasks.map((task) => (\n                  <div\n                    key={task.id}\n                    className={cn(\n                      'group flex items-center justify-between gap-3 rounded-lg border p-3 transition-colors',\n                      task.id === activeTaskId && !task.done\n                        ? 'border-primary/50 bg-primary/5 shadow-xs'\n                        : 'border-border/70 bg-card hover:border-border hover:bg-muted/30',\n                      task.done && 'bg-muted/20 opacity-65',\n                    )}\n                  >\n                    {/* Task Checkbox + Title */}\n                    <div className=\"flex min-w-0 flex-1 items-start gap-3\">\n                      <div className=\"pt-0.5\">\n                        <Checkbox checked={task.done} onCheckedChange={() => handleToggleTask(task.id)} />\n                      </div>\n\n                      <button\n                        type=\"button\"\n                        className=\"focus-visible:ring-ring min-w-0 flex-1 cursor-pointer rounded-md text-left focus-visible:ring-2 focus-visible:outline-none\"\n                        aria-pressed={task.id === activeTaskId}\n                        onClick={() => setActiveTaskId(task.id)}\n                      >\n                        <div className=\"flex items-center gap-2\">\n                          <p\n                            className={cn(\n                              'text-foreground text-xs font-medium transition-colors',\n                              task.done && 'text-muted-foreground line-through',\n                            )}\n                          >\n                            {task.title}\n                          </p>\n                          {task.id === activeTaskId && !task.done && (\n                            <Badge wrap variant=\"default\" className=\"h-4.5 px-1.5 text-xs\">\n                              Active\n                            </Badge>\n                          )}\n                        </div>\n\n                        <div className=\"text-muted-foreground mt-1 flex items-center gap-2 text-xs\">\n                          <Badge wrap variant=\"outline\" className=\"h-4 px-1 text-xs font-normal\">\n                            {task.tag}\n                          </Badge>\n                          <span>Estimated: {task.targetPomodoros * 25}m</span>\n                        </div>\n                      </button>\n                    </div>\n\n                    {/* Pomodoro Pills + Delete */}\n                    <div className=\"flex items-center gap-2\">\n                      <Badge\n                        wrap\n                        variant={task.done ? 'secondary' : task.id === activeTaskId ? 'default' : 'outline'}\n                        className=\"shrink-0 gap-1 text-xs font-medium tabular-nums\"\n                      >\n                        <span>\n                          🍅 {task.currentPomodoros}/{task.targetPomodoros}\n                        </span>\n                      </Badge>\n\n                      <Button\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"text-muted-foreground hover:text-destructive size-7 opacity-0 group-hover:opacity-100\"\n                        title=\"Remove task\"\n                        onClick={() => handleRemoveTask(task.id)}\n                      >\n                        <Trash2 className=\"size-3.5\" />\n                      </Button>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n\n            <CardFooter className=\"border-border/50 bg-muted/20 text-muted-foreground flex items-center justify-between border-t py-3 text-xs\">\n              <span>Tip: Switch tasks any time without resetting timer elapsed time.</span>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"text-muted-foreground hover:text-foreground h-7 text-xs\"\n                onClick={() => setTasks((prev) => prev.filter((t) => !t.done))}\n              >\n                Clear Done ({completedTasksCount})\n              </Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/PomodoroFocusTimer.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/checkbox.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Pomodoro productivity workspace with focus and break interval timers, SVG circular progress countdown display, active task queue with pomodoro estimate badges, ambient sound generator switcher, and daily focus analytics metrics.",
  "categories": [
    "productivity",
    "dashboard",
    "app"
  ]
}