{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "pomodoro-focus-timer", "title": "Pomodoro Focus Timer", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/pomodoro-focus-timer/pomodoro-focus-timer.component.ts", "content": "// Pomodoro productivity workspace: focus / break interval timers with an SVG circular\n// progress countdown, active task queue with pomodoro estimate pills, ambient sound\n// generator switcher, and daily focus analytics. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n BarChart3,\n Check,\n Flame,\n Headphones,\n ListTodo,\n LucideAngularModule,\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-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\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 const MODE_DURATIONS: Record = {\n focus: 25 * 60,\n shortBreak: 5 * 60,\n longBreak: 15 * 60,\n}\n\nconst defaultTasks: 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\ninterface AmbientSound {\n id: string\n name: string\n label: string\n}\n\nconst ambientSounds: AmbientSound[] = [\n { id: 'off', name: 'Off / Mute', label: 'Silent' },\n { id: 'whitenoise', name: 'Deep Focus White Noise', label: 'White Noise' },\n { id: 'lofi', name: 'Lofi Beats', label: 'Lofi Beats' },\n { id: 'rainforest', name: 'Rainforest', label: 'Rainforest' },\n]\n\n// SVG geometry: radius 104, circumference 2 * PI * 104 โ‰ˆ 653.451\nconst RADIUS = 104\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nexport function formatTimerTime(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@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-pomodoro-focus-timer, [ui-pomodoro-focus-timer]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCheckboxComponent,\n UiInputComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n
\n
\n
\n

\n Focus Space & Pomodoro Timer\n

\n v2.4 \n
\n

\n High-yield interval productivity engine with ambient soundscapes and active task execution.\n

\n
\n\n
\n \n \n ๐Ÿ”ฅ 6-Day Focus Streak ยท {{ completedSessionsToday() }} Sessions Complete Today\n \n
\n
\n\n \n
\n
\n
\n \n Ambient Sound:\n Choose your background audio focus generator\n
\n\n
\n @for (sound of ambientSounds; track sound.id) {\n \n \n {{ sound.name }}\n @if (selectedSound() === sound.id && !isSoundMuted() && sound.id !== 'off') {\n \n \n \n \n \n }\n \n }\n\n \n @if (isSoundMuted()) {\n \n } @else {\n \n }\n \n
\n
\n
\n\n \n
\n \n
\n
\n
\n
\n \n Focus 25m\n \n \n Short Break 5m\n \n \n Long Break 15m\n \n
\n
\n\n
\n
\n \n \n \n \n\n
\n
\n \n \n {{\n currentMode() === 'focus'\n ? 'Deep Focus'\n : currentMode() === 'shortBreak'\n ? 'Short Break'\n : 'Rest Phase'\n }}\n \n
\n\n \n {{ formatTime(remainingSeconds()) }}\n
\n\n
\n @if (isRunning()) {\n Session {{ currentSession() }} of 4 active\n } @else {\n Timer Paused\n }\n
\n
\n
\n\n \n
\n \n
\n {{ activeTask().title }}\n
\n
\n \n ๐Ÿ… {{ activeTask().currentPomodoros }}/{{ activeTask().targetPomodoros }}\n \n
\n
\n\n
\n
\n \n \n \n\n \n @if (isRunning()) {\n \n } @else {\n \n }\n \n\n \n \n \n
\n\n \n\n
\n Session {{ currentSession() }} of 4\n\n
\n @for (index of [1, 2, 3, 4]; track index) {\n
\n @if (index < currentSession()) {\n \n }\n
\n }\n
\n\n Long break after 4\n
\n
\n
\n\n \n
\n
\n
\n
\n \n

Daily Focus Analytics

\n
\n Today \n
\n

Aggregated productivity stats and session completion rate

\n
\n\n
\n
\n
\n
Total Focus
\n
3h 45m
\n
+28m vs avg
\n
\n\n
\n
Completed
\n
\n {{ completedSessionsToday() }} / 10\n
\n
80% of goal
\n
\n\n
\n
Focus Score
\n
94%
\n
High Flow
\n
\n
\n\n
\n
\n Daily Session Goal\n {{ completedSessionsToday() }}/10 (80%)\n
\n \n
\n\n \n\n
\n
\n Recent Completed Intervals\n
\n
\n
\n
\n 10:45 AM\n Refactor OKLCH color-mix\n
\n 25m Focus\n
\n
\n
\n 10:15 AM\n Short Break ยท Lofi Beats\n
\n 5m Rest\n
\n
\n
\n 09:30 AM\n Audit ARIA roles\n
\n 25m Focus\n
\n
\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n \n

Active Focus Task Queue

\n
\n \n {{ completedTasksCount() }}/{{ tasks().length }} Completed\n \n
\n

\n Select an item to link it to the active timer countdown. Check off tasks as you finish.\n

\n
\n\n
\n
\n
\n \n
\n
\n \n
\n \n
\n\n \n\n
\n @for (task of tasks(); track task.id) {\n
\n
\n
\n \n
\n\n \n
\n

\n {{ task.title }}\n

\n @if (task.id === activeTaskId() && !task.done) {\n Active \n }\n
\n\n
\n \n {{ task.tag }}\n \n Estimated: {{ task.targetPomodoros * 25 }}m\n
\n \n
\n\n
\n \n ๐Ÿ… {{ task.currentPomodoros }}/{{ task.targetPomodoros }}\n \n\n \n \n \n
\n
\n }\n
\n
\n\n \n Tip: Switch tasks any time without resetting timer elapsed time.\n \n Clear Done ({{ completedTasksCount() }})\n \n
\n
\n
\n \n \n `,\n})\nexport class UiPomodoroFocusTimerComponent {\n protected readonly BarChart3 = BarChart3\n protected readonly Check = Check\n protected readonly Flame = Flame\n protected readonly Headphones = Headphones\n protected readonly ListTodo = ListTodo\n protected readonly Music2 = Music2\n protected readonly Pause = Pause\n protected readonly Play = Play\n protected readonly Plus = Plus\n protected readonly RotateCcw = RotateCcw\n protected readonly SkipForward = SkipForward\n protected readonly Target = Target\n protected readonly Trash2 = Trash2\n protected readonly Trees = Trees\n protected readonly Volume2 = Volume2\n protected readonly VolumeX = VolumeX\n protected readonly Waves = Waves\n\n protected readonly ambientSounds = ambientSounds\n protected readonly radius = RADIUS\n protected readonly circumference = CIRCUMFERENCE\n\n @Input('class') className?: string\n @Input() set initialMode(v: TimerMode | undefined) {\n if (v) {\n this.currentMode.set(v)\n this.remainingSeconds.set(MODE_DURATIONS[v])\n }\n }\n @Input() set initialTime(v: number | undefined) {\n if (v !== undefined) this.remainingSeconds.set(v)\n }\n @Input() set initialSound(v: string | undefined) {\n if (v) this.selectedSound.set(v)\n }\n @Input() set initialSession(v: number | undefined) {\n if (v !== undefined) this.currentSession.set(v)\n }\n\n readonly currentMode = signal('focus')\n readonly remainingSeconds = signal(1485)\n readonly isRunning = signal(false)\n readonly currentSession = signal(3)\n readonly completedSessionsToday = signal(8)\n readonly selectedSound = signal('lofi')\n readonly isSoundMuted = signal(false)\n readonly newTaskTitle = signal('')\n readonly newTaskEstimate = signal(2)\n readonly tasks = signal(defaultTasks.map((t) => ({ ...t })))\n readonly activeTaskId = signal('task-1')\n\n private timerInterval: ReturnType | null = null\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n if (this.timerInterval) clearInterval(this.timerInterval)\n })\n }\n\n readonly activeTask = computed(() => {\n const list = this.tasks()\n return (\n list.find((t) => t.id === this.activeTaskId()) ??\n list.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\n readonly completedTasksCount = computed(() => this.tasks().filter((t) => t.done).length)\n readonly totalModeSeconds = computed(() => MODE_DURATIONS[this.currentMode()])\n readonly progressPercentage = computed(() => {\n const elapsed = this.totalModeSeconds() - this.remainingSeconds()\n return Math.min(100, Math.max(0, (elapsed / this.totalModeSeconds()) * 100))\n })\n readonly strokeDashoffset = computed(() => CIRCUMFERENCE * (1 - this.progressPercentage() / 100))\n readonly newTaskEstimateText = computed(() => String(this.newTaskEstimate()))\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-5xl space-y-6', this.className)\n }\n\n get progressRingClass(): string {\n return cn(\n 'transition-colors duration-700 ease-out motion-reduce:transition-none',\n this.currentMode() === 'focus' && 'text-primary',\n this.currentMode() === 'shortBreak' && 'text-success',\n this.currentMode() === 'longBreak' && 'text-info',\n )\n }\n\n get statusDotClass(): string {\n return cn(\n 'size-2 rounded-full',\n this.isRunning() ? 'animate-ping' : 'opacity-60',\n this.currentMode() === 'focus' && 'bg-primary',\n this.currentMode() === 'shortBreak' && 'bg-success',\n this.currentMode() === 'longBreak' && 'bg-info',\n )\n }\n\n get modeLabelClass(): string {\n return cn(\n 'text-xs font-semibold tracking-wider uppercase',\n this.currentMode() === 'focus' && 'text-primary',\n this.currentMode() === 'shortBreak' && 'text-success',\n this.currentMode() === 'longBreak' && 'text-info',\n )\n }\n\n sessionDotClass(index: number): string {\n return cn(\n 'flex size-4 items-center justify-center rounded-full transition-colors',\n index < this.currentSession()\n ? 'bg-primary text-primary-foreground'\n : index === this.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\n taskRowClass(task: FocusTask): string {\n return cn(\n 'group flex items-center justify-between gap-3 rounded-lg border p-3 transition-colors',\n task.id === this.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\n taskTitleClass(task: FocusTask): string {\n return cn(\n 'text-foreground text-xs font-medium transition-colors',\n task.done && 'text-muted-foreground line-through',\n )\n }\n\n soundIcon(id: string): typeof VolumeX {\n if (id === 'off') return VolumeX\n if (id === 'whitenoise') return Waves\n if (id === 'rainforest') return Trees\n return Music2\n }\n\n formatTime(seconds: number): string {\n return formatTimerTime(seconds)\n }\n\n selectAmbientSound(id: string): void {\n this.selectedSound.set(id)\n this.isSoundMuted.set(id === 'off')\n }\n\n startTimer(): void {\n if (this.isRunning()) return\n this.isRunning.set(true)\n this.timerInterval = setInterval(() => {\n if (this.remainingSeconds() > 0) {\n this.remainingSeconds.update((s) => s - 1)\n } else {\n this.skipPhase()\n }\n }, 1000)\n }\n\n pauseTimer(): void {\n this.isRunning.set(false)\n if (this.timerInterval) {\n clearInterval(this.timerInterval)\n this.timerInterval = null\n }\n }\n\n toggleTimer(): void {\n if (this.isRunning()) this.pauseTimer()\n else this.startTimer()\n }\n\n resetTimer(): void {\n this.pauseTimer()\n this.remainingSeconds.set(MODE_DURATIONS[this.currentMode()])\n }\n\n setMode(mode: TimerMode): void {\n this.pauseTimer()\n this.currentMode.set(mode)\n this.remainingSeconds.set(MODE_DURATIONS[mode])\n }\n\n skipPhase(): void {\n this.pauseTimer()\n if (this.currentMode() === 'focus') {\n this.completedSessionsToday.update((c) => c + 1)\n const task = this.tasks().find((t) => t.id === this.activeTaskId())\n if (task && task.currentPomodoros < task.targetPomodoros) {\n this.tasks.update((prev) =>\n prev.map((t) => (t.id === task.id ? { ...t, currentPomodoros: t.currentPomodoros + 1 } : t)),\n )\n }\n if (this.currentSession() >= 4) {\n this.currentMode.set('longBreak')\n this.currentSession.set(1)\n } else {\n this.currentMode.set('shortBreak')\n this.currentSession.update((s) => s + 1)\n }\n } else {\n this.currentMode.set('focus')\n }\n this.remainingSeconds.set(MODE_DURATIONS[this.currentMode()])\n }\n\n toggleTaskDone(taskId: string): void {\n this.tasks.update((prev) =>\n prev.map((t) => {\n if (t.id !== taskId) return t\n const done = !t.done\n return {\n ...t,\n done,\n currentPomodoros: done ? Math.max(t.currentPomodoros, t.targetPomodoros) : t.currentPomodoros,\n }\n }),\n )\n }\n\n selectActiveTask(taskId: string): void {\n this.activeTaskId.set(taskId)\n }\n\n removeTask(taskId: string): void {\n this.tasks.update((prev) => prev.filter((t) => t.id !== taskId))\n if (this.activeTaskId() === taskId) {\n const rest = this.tasks()\n if (rest.length > 0) this.activeTaskId.set(rest[0].id)\n }\n }\n\n addTask(): void {\n const trimmed = this.newTaskTitle().trim()\n if (!trimmed) return\n const id = `task-${Date.now()}`\n this.tasks.update((prev) => [\n ...prev,\n {\n id,\n title: trimmed,\n tag: 'Focus',\n done: false,\n currentPomodoros: 0,\n targetPomodoros: Math.max(1, this.newTaskEstimate() || 2),\n },\n ])\n this.newTaskTitle.set('')\n this.newTaskEstimate.set(2)\n if (this.tasks().length === 1) this.activeTaskId.set(id)\n }\n\n addTaskFromForm(event: Event): void {\n event.preventDefault()\n this.addTask()\n }\n\n clearDoneTasks(): void {\n this.tasks.update((prev) => prev.filter((t) => !t.done))\n }\n\n toggleSoundMute(): void {\n this.isSoundMuted.update((m) => !m)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/pomodoro-focus-timer/pomodoro-focus-timer.component.ts" }, { "path": "packages/registry-angular/blocks/pomodoro-focus-timer/index.ts", "content": "export {\n UiPomodoroFocusTimerComponent,\n MODE_DURATIONS,\n formatTimerTime,\n type FocusTask,\n type TimerMode,\n} from './pomodoro-focus-timer.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/pomodoro-focus-timer/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/checkbox.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/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" ] }