{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "pomodoro-focus-timer",
  "title": "Pomodoro Focus Timer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/pomodoro-focus-timer/PomodoroFocusTimer.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\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-vue-next'\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\ninterface Props {\n  initialMode?: TimerMode\n  initialTime?: number\n  initialSound?: string\n  initialSession?: number\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  initialMode: 'focus',\n  initialTime: 1485, // 24:45\n  initialSound: 'lofi',\n  initialSession: 3,\n})\n\nconst MODE_DURATIONS: Record<TimerMode, number> = {\n  focus: 25 * 60,\n  shortBreak: 5 * 60,\n  longBreak: 15 * 60,\n}\n\nconst currentMode = ref<TimerMode>(props.initialMode)\nconst remainingSeconds = ref<number>(props.initialTime)\nconst isRunning = ref<boolean>(false)\nconst currentSession = ref<number>(props.initialSession)\nconst completedSessionsToday = ref<number>(8)\nconst selectedSound = ref<string>(props.initialSound)\nconst isSoundMuted = ref<boolean>(false)\nconst newTaskTitle = ref<string>('')\nconst newTaskEstimate = ref<number>(2)\n\nlet timerInterval: ReturnType<typeof setInterval> | null = null\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 tasks = ref<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\nconst activeTaskId = ref<string>('task-1')\n\nconst activeTask = computed(() => {\n  return (\n    tasks.value.find((t) => t.id === activeTaskId.value) ||\n    tasks.value.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})\n\nconst completedTasksCount = computed(() => tasks.value.filter((t) => t.done).length)\n\nconst totalModeSeconds = computed(() => MODE_DURATIONS[currentMode.value])\nconst progressPercentage = computed(() => {\n  const elapsed = totalModeSeconds.value - remainingSeconds.value\n  return Math.min(100, Math.max(0, (elapsed / totalModeSeconds.value) * 100))\n})\n\n// SVG geometry: radius 104, circumference 2 * PI * 104 ≈ 653.451\nconst RADIUS = 104\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\nconst strokeDashoffset = computed(() => {\n  return CIRCUMFERENCE * (1 - progressPercentage.value / 100)\n})\n\nfunction selectAmbientSound(id: string) {\n  selectedSound.value = id\n  isSoundMuted.value = id === 'off'\n}\n\nfunction 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\nfunction startTimer() {\n  if (isRunning.value) return\n  isRunning.value = true\n  timerInterval = setInterval(() => {\n    if (remainingSeconds.value > 0) {\n      remainingSeconds.value -= 1\n    } else {\n      handleTimerComplete()\n    }\n  }, 1000)\n}\n\nfunction pauseTimer() {\n  isRunning.value = false\n  if (timerInterval) {\n    clearInterval(timerInterval)\n    timerInterval = null\n  }\n}\n\nfunction toggleTimer() {\n  if (isRunning.value) {\n    pauseTimer()\n  } else {\n    startTimer()\n  }\n}\n\nfunction resetTimer() {\n  pauseTimer()\n  remainingSeconds.value = MODE_DURATIONS[currentMode.value]\n}\n\nfunction setMode(mode: TimerMode) {\n  pauseTimer()\n  currentMode.value = mode\n  remainingSeconds.value = MODE_DURATIONS[mode]\n}\n\nfunction skipPhase() {\n  pauseTimer()\n  if (currentMode.value === 'focus') {\n    completedSessionsToday.value += 1\n    const task = tasks.value.find((t) => t.id === activeTaskId.value)\n    if (task && task.currentPomodoros < task.targetPomodoros) {\n      task.currentPomodoros += 1\n    }\n    if (currentSession.value >= 4) {\n      currentMode.value = 'longBreak'\n      currentSession.value = 1\n    } else {\n      currentMode.value = 'shortBreak'\n      currentSession.value += 1\n    }\n  } else {\n    currentMode.value = 'focus'\n  }\n  remainingSeconds.value = MODE_DURATIONS[currentMode.value]\n}\n\nfunction handleTimerComplete() {\n  skipPhase()\n}\n\nfunction toggleTaskDone(taskId: string) {\n  const task = tasks.value.find((t) => t.id === taskId)\n  if (task) {\n    task.done = !task.done\n    if (task.done && task.currentPomodoros < task.targetPomodoros) {\n      task.currentPomodoros = task.targetPomodoros\n    }\n  }\n}\n\nfunction selectActiveTask(taskId: string) {\n  activeTaskId.value = taskId\n}\n\nfunction removeTask(taskId: string) {\n  tasks.value = tasks.value.filter((t) => t.id !== taskId)\n  if (activeTaskId.value === taskId && tasks.value.length > 0) {\n    activeTaskId.value = tasks.value[0].id\n  }\n}\n\nfunction addTask() {\n  const trimmed = newTaskTitle.value.trim()\n  if (!trimmed) return\n  const id = `task-${Date.now()}`\n  tasks.value.push({\n    id,\n    title: trimmed,\n    tag: 'Focus',\n    done: false,\n    currentPomodoros: 0,\n    targetPomodoros: Math.max(1, newTaskEstimate.value || 2),\n  })\n  newTaskTitle.value = ''\n  newTaskEstimate.value = 2\n  if (!activeTaskId.value || tasks.value.length === 1) {\n    activeTaskId.value = id\n  }\n}\n\nfunction toggleSoundMute() {\n  isSoundMuted.value = !isSoundMuted.value\n}\n\nonUnmounted(() => {\n  if (timerInterval) {\n    clearInterval(timerInterval)\n  }\n})\n</script>\n\n<template>\n  <div data-slot=\"pomodoro-focus-timer\" :class=\"cn('mx-auto w-full max-w-5xl space-y-6', props.class)\">\n    <!-- Header Section -->\n    <header class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"space-y-1\">\n        <div class=\"flex items-center gap-2\">\n          <h2 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n            Focus Space &amp; Pomodoro Timer\n          </h2>\n          <Badge variant=\"secondary\" class=\"font-mono text-xs\"> v2.4 </Badge>\n        </div>\n        <p class=\"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 class=\"flex flex-wrap items-center gap-2\">\n        <!-- Daily Streak Badge -->\n        <Badge\n          wrap\n          variant=\"outline\"\n          class=\"border-warning/30 bg-warning/10 text-warning gap-1.5 px-3 py-1.5 text-xs font-semibold\"\n        >\n          <Flame class=\"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 class=\"flex flex-wrap items-center justify-between gap-3 p-3 sm:p-4\">\n        <div class=\"text-muted-foreground flex items-center gap-2 text-xs font-medium\">\n          <Headphones class=\"text-primary size-4\" />\n          <span class=\"text-foreground font-semibold\">Ambient Sound:</span>\n          <span class=\"hidden sm:inline\">Choose your background audio focus generator</span>\n        </div>\n\n        <div class=\"flex flex-wrap items-center gap-1.5\">\n          <Button\n            v-for=\"sound in ambientSounds\"\n            :key=\"sound.id\"\n            :variant=\"selectedSound === sound.id && !isSoundMuted ? 'default' : 'outline'\"\n            size=\"sm\"\n            class=\"h-8 gap-1.5 text-xs\"\n            @click=\"selectAmbientSound(sound.id)\"\n          >\n            <component :is=\"sound.icon\" class=\"size-3.5\" />\n            <span>{{ sound.name }}</span>\n            <span\n              v-if=\"selectedSound === sound.id && !isSoundMuted && sound.id !== 'off'\"\n              class=\"flex items-center gap-0.5\"\n            >\n              <span class=\"bg-primary-foreground h-2 w-0.5 animate-pulse\" />\n              <span class=\"bg-primary-foreground h-3.5 w-0.5 animate-pulse delay-75\" />\n              <span class=\"bg-primary-foreground h-1.5 w-0.5 animate-pulse delay-150\" />\n            </span>\n          </Button>\n\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            class=\"text-muted-foreground hover:text-foreground size-8\"\n            :title=\"isSoundMuted ? 'Unmute Ambient Sound' : 'Mute Ambient Sound'\"\n            @click=\"toggleSoundMute\"\n          >\n            <VolumeX v-if=\"isSoundMuted\" class=\"text-destructive size-4\" />\n            <Volume2 v-else class=\"size-4\" />\n          </Button>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Main Grid: Timer Centerpiece (Left) and Tasks + Analytics (Right) -->\n    <div class=\"grid grid-cols-1 items-start gap-6 lg:grid-cols-12\">\n      <!-- Left Column: Centerpiece Timer -->\n      <div class=\"space-y-6 lg:col-span-6\">\n        <!-- Timer Card -->\n        <Card class=\"border-border relative overflow-hidden shadow-xs\">\n          <!-- Card Header / Mode Switcher -->\n          <CardHeader class=\"pb-2 text-center\">\n            <div class=\"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                class=\"flex-1 rounded-lg text-xs font-semibold\"\n                @click=\"setMode('focus')\"\n              >\n                Focus 25m\n              </Button>\n              <Button\n                :variant=\"currentMode === 'shortBreak' ? 'default' : 'ghost'\"\n                size=\"sm\"\n                class=\"flex-1 rounded-lg text-xs font-semibold\"\n                @click=\"setMode('shortBreak')\"\n              >\n                Short Break 5m\n              </Button>\n              <Button\n                :variant=\"currentMode === 'longBreak' ? 'default' : 'ghost'\"\n                size=\"sm\"\n                class=\"flex-1 rounded-lg text-xs font-semibold\"\n                @click=\"setMode('longBreak')\"\n              >\n                Long Break 15m\n              </Button>\n            </div>\n          </CardHeader>\n\n          <!-- Card Content / Circular Countdown Display -->\n          <CardContent class=\"flex flex-col items-center justify-center pt-4 pb-2\">\n            <!-- Circular SVG Ring Frame -->\n            <div class=\"relative flex size-64 items-center justify-center sm:size-72\">\n              <svg class=\"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                  stroke-width=\"10\"\n                  class=\"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                  stroke-width=\"10\"\n                  stroke-linecap=\"round\"\n                  :stroke-dasharray=\"CIRCUMFERENCE\"\n                  :stroke-dashoffset=\"strokeDashoffset\"\n                  :class=\"[\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 class=\"absolute inset-0 flex flex-col items-center justify-center text-center\">\n                <div class=\"flex items-center gap-1.5\">\n                  <span\n                    class=\"size-2 rounded-full\"\n                    :class=\"[\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                    class=\"text-xs font-semibold tracking-wider uppercase\"\n                    :class=\"[\n                      currentMode === 'focus' && 'text-primary',\n                      currentMode === 'shortBreak' && 'text-success',\n                      currentMode === 'longBreak' && 'text-info',\n                    ]\"\n                  >\n                    {{\n                      currentMode === 'focus'\n                        ? 'Deep Focus'\n                        : currentMode === 'shortBreak'\n                          ? 'Short Break'\n                          : 'Rest Phase'\n                    }}\n                  </span>\n                </div>\n\n                <!-- Big Countdown Readout -->\n                <div class=\"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 class=\"text-muted-foreground text-xs font-medium\">\n                  <span v-if=\"isRunning\">Session {{ currentSession }} of 4 active</span>\n                  <span v-else>Timer Paused</span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Current Active Task Banner -->\n            <div\n              class=\"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            >\n              <div class=\"flex min-w-0 flex-wrap items-center gap-2\">\n                <Target class=\"text-primary size-4 shrink-0\" />\n                <div class=\"min-w-0 flex-1\">\n                  <span class=\"text-foreground block truncate font-medium\">{{ activeTask.title }}</span>\n                </div>\n              </div>\n              <Badge wrap variant=\"secondary\" class=\"shrink-0 gap-1 text-xs\">\n                <span>🍅 {{ activeTask.currentPomodoros }}/{{ activeTask.targetPomodoros }}</span>\n              </Badge>\n            </div>\n          </CardContent>\n\n          <!-- Action Controls & Session Dots -->\n          <CardFooter class=\"flex flex-col gap-4 pt-2\">\n            <!-- Action Buttons Row -->\n            <div class=\"flex items-center justify-center gap-4\">\n              <!-- Reset Button -->\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                class=\"text-muted-foreground hover:text-foreground size-11 rounded-full\"\n                title=\"Reset current interval\"\n                @click=\"resetTimer\"\n                aria-label=\"Action\"\n              >\n                <RotateCcw class=\"size-4\" />\n              </Button>\n\n              <!-- Primary Play / Pause Button -->\n              <Button\n                variant=\"default\"\n                size=\"icon-lg\"\n                class=\"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                @click=\"toggleTimer\"\n              >\n                <Pause v-if=\"isRunning\" class=\"size-6 fill-current\" />\n                <Play v-else class=\"ml-0.5 size-6 fill-current\" />\n              </Button>\n\n              <!-- Skip Button -->\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                class=\"text-muted-foreground hover:text-foreground size-11 rounded-full\"\n                title=\"Skip to next phase\"\n                @click=\"skipPhase\"\n                aria-label=\"Action\"\n              >\n                <SkipForward class=\"size-4\" />\n              </Button>\n            </div>\n\n            <Separator />\n\n            <!-- Session Tracker 4-Dot Indicator -->\n            <div class=\"text-muted-foreground flex w-full items-center justify-between text-xs\">\n              <span class=\"text-foreground font-medium\">Session {{ currentSession }} of 4</span>\n\n              <div class=\"flex items-center gap-2\">\n                <div\n                  v-for=\"index in 4\"\n                  :key=\"index\"\n                  class=\"flex size-4 items-center justify-center rounded-full transition-colors\"\n                  :class=\"[\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                  <Check v-if=\"index < currentSession\" class=\"size-2.5 stroke-[3]\" />\n                </div>\n              </div>\n\n              <span>Long break after 4</span>\n            </div>\n          </CardFooter>\n        </Card>\n\n        <!-- Daily Focus Analytics Card -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <BarChart3 class=\"text-primary size-4\" />\n                <CardTitle class=\"text-base font-semibold\">Daily Focus Analytics</CardTitle>\n              </div>\n              <Badge wrap variant=\"outline\" class=\"text-muted-foreground text-xs font-normal\"> Today </Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Aggregated productivity stats and session completion rate\n            </CardDescription>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4\">\n            <!-- 3 Mini Metric Tiles -->\n            <div class=\"grid grid-cols-3 gap-3\">\n              <div class=\"border-border/60 bg-muted/30 rounded-lg border p-3 text-center\">\n                <div class=\"text-muted-foreground text-xs font-medium\">Total Focus</div>\n                <div class=\"text-foreground mt-1 font-mono text-lg font-bold tabular-nums\">3h 45m</div>\n                <div class=\"text-success mt-0.5 text-xs\">+28m vs avg</div>\n              </div>\n\n              <div class=\"border-border/60 bg-muted/30 rounded-lg border p-3 text-center\">\n                <div class=\"text-muted-foreground text-xs font-medium\">Completed</div>\n                <div class=\"text-foreground mt-1 font-mono text-lg font-bold tabular-nums\">\n                  {{ completedSessionsToday }} <span class=\"text-muted-foreground text-xs font-normal\">/ 10</span>\n                </div>\n                <div class=\"text-muted-foreground mt-0.5 text-xs\">80% of goal</div>\n              </div>\n\n              <div class=\"border-border/60 bg-muted/30 rounded-lg border p-3 text-center\">\n                <div class=\"text-muted-foreground text-xs font-medium\">Focus Score</div>\n                <div class=\"text-foreground mt-1 font-mono text-lg font-bold tabular-nums\">94%</div>\n                <div class=\"text-primary mt-0.5 text-xs font-semibold\">High Flow</div>\n              </div>\n            </div>\n\n            <!-- Daily Goal Progress -->\n            <div class=\"space-y-1.5\">\n              <div class=\"flex items-center justify-between text-xs\">\n                <span class=\"text-muted-foreground\">Daily Session Goal</span>\n                <span class=\"text-foreground font-semibold tabular-nums\">{{ completedSessionsToday }}/10 (80%)</span>\n              </div>\n              <Progress :model-value=\"80\" class=\"h-2\" />\n            </div>\n\n            <Separator />\n\n            <!-- Recent Sessions History -->\n            <div class=\"space-y-2\">\n              <div class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                Recent Completed Intervals\n              </div>\n              <div class=\"space-y-1.5 text-xs\">\n                <div class=\"bg-muted/30 flex items-center justify-between rounded-md px-2.5 py-1.5\">\n                  <div class=\"flex items-center gap-2 truncate\">\n                    <span class=\"text-muted-foreground font-mono tabular-nums\">10:45 AM</span>\n                    <span class=\"text-foreground truncate font-medium\">Refactor OKLCH color-mix</span>\n                  </div>\n                  <Badge wrap variant=\"success\" class=\"h-5 px-1.5 text-xs\">25m Focus</Badge>\n                </div>\n                <div class=\"bg-muted/30 flex items-center justify-between rounded-md px-2.5 py-1.5\">\n                  <div class=\"flex items-center gap-2 truncate\">\n                    <span class=\"text-muted-foreground font-mono tabular-nums\">10:15 AM</span>\n                    <span class=\"text-muted-foreground truncate\">Short Break · Lofi Beats</span>\n                  </div>\n                  <Badge wrap variant=\"secondary\" class=\"h-5 px-1.5 text-xs\">5m Rest</Badge>\n                </div>\n                <div class=\"bg-muted/30 flex items-center justify-between rounded-md px-2.5 py-1.5\">\n                  <div class=\"flex items-center gap-2 truncate\">\n                    <span class=\"text-muted-foreground font-mono tabular-nums\">09:30 AM</span>\n                    <span class=\"text-foreground truncate font-medium\">Audit ARIA roles</span>\n                  </div>\n                  <Badge wrap variant=\"success\" class=\"h-5 px-1.5 text-xs\">25m Focus</Badge>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Right Column: Active Task Queue -->\n      <div class=\"space-y-6 lg:col-span-6\">\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <ListTodo class=\"text-primary size-4\" />\n                <CardTitle class=\"text-base font-semibold\">Active Focus Task Queue</CardTitle>\n              </div>\n              <Badge wrap variant=\"secondary\" class=\"text-xs\">\n                {{ completedTasksCount }}/{{ tasks.length }} Completed\n              </Badge>\n            </div>\n            <CardDescription class=\"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 class=\"space-y-4\">\n            <!-- Add New Task Form -->\n            <form class=\"flex items-center gap-2\" @submit.prevent=\"addTask\">\n              <div class=\"flex-1\">\n                <Input v-model=\"newTaskTitle\" placeholder=\"Add a new focus task...\" size=\"middle\" class=\"text-xs\" />\n              </div>\n              <div class=\"w-20\">\n                <Input\n                  v-model=\"newTaskEstimate\"\n                  type=\"number\"\n                  min=\"1\"\n                  max=\"12\"\n                  placeholder=\"🍅 Est\"\n                  size=\"middle\"\n                  class=\"text-center text-xs tabular-nums\"\n                  title=\"Estimated Pomodoros\"\n                />\n              </div>\n              <Button type=\"submit\" size=\"default\" class=\"gap-1 text-xs\">\n                <Plus class=\"size-3.5\" />\n                <span>Add</span>\n              </Button>\n            </form>\n\n            <Separator />\n\n            <!-- Tasks List -->\n            <div class=\"space-y-2.5\">\n              <div\n                v-for=\"task in tasks\"\n                :key=\"task.id\"\n                class=\"group flex items-center justify-between gap-3 rounded-lg border p-3 transition-colors\"\n                :class=\"[\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 class=\"flex min-w-0 flex-1 items-start gap-3\">\n                  <div class=\"pt-0.5\">\n                    <Checkbox :model-value=\"task.done\" @update:model-value=\"() => toggleTaskDone(task.id)\" />\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    class=\"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                    @click=\"selectActiveTask(task.id)\"\n                  >\n                    <div class=\"flex items-center gap-2\">\n                      <p\n                        class=\"text-foreground text-xs font-medium transition-colors\"\n                        :class=\"task.done && 'text-muted-foreground line-through'\"\n                      >\n                        {{ task.title }}\n                      </p>\n                      <Badge\n                        wrap\n                        v-if=\"task.id === activeTaskId && !task.done\"\n                        variant=\"default\"\n                        class=\"h-4.5 px-1.5 text-xs\"\n                      >\n                        Active\n                      </Badge>\n                    </div>\n\n                    <div class=\"text-muted-foreground mt-1 flex items-center gap-2 text-xs\">\n                      <Badge wrap variant=\"outline\" class=\"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 class=\"flex items-center gap-2\">\n                  <Badge\n                    :variant=\"task.done ? 'secondary' : task.id === activeTaskId ? 'default' : 'outline'\"\n                    class=\"shrink-0 gap-1 text-xs font-medium whitespace-normal tabular-nums\"\n                  >\n                    <span>🍅 {{ task.currentPomodoros }}/{{ task.targetPomodoros }}</span>\n                  </Badge>\n\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    class=\"text-muted-foreground hover:text-destructive size-7 opacity-0 group-hover:opacity-100\"\n                    title=\"Remove task\"\n                    @click=\"removeTask(task.id)\"\n                  >\n                    <Trash2 class=\"size-3.5\" />\n                  </Button>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n\n          <CardFooter\n            class=\"border-border/50 bg-muted/20 text-muted-foreground flex items-center justify-between border-t py-3 text-xs\"\n          >\n            <span>Tip: Switch tasks any time without resetting timer elapsed time.</span>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"text-muted-foreground hover:text-foreground h-7 text-xs\"\n              @click=\"tasks = tasks.filter((t) => !t.done)\"\n            >\n              Clear Done ({{ completedTasksCount }})\n            </Button>\n          </CardFooter>\n        </Card>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PomodoroFocusTimer.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/checkbox.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/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"
  ]
}