@jjlmoya/utils-cooking 1.2.0

package/src/tool/kitchen-timer/i18n/en.ts

@@ -0,0 +1,154 @@
+import type { ToolLocaleContent } from '../../../types';
+
+export const content: ToolLocaleContent = {
+	slug: 'kitchen-timer',
+	title: 'Multiple Kitchen Timer',
+	description:
+		'Manage multiple cooking times simultaneously. Independent alarms, ideal for chefs and kitchen organization (Mise en Place).',
+	faqTitle: 'Frequently Asked Questions',
+	bibliographyTitle: 'References',
+
+	ui: {
+		addTimer: 'Add Timer',
+		stopAll: 'Stop All',
+		defaultName: 'Timer',
+		newTimerName: 'New Timer',
+		timerDefault1: 'Timer 1',
+		timerDefault2: 'Timer 2',
+		timerDefault3: 'Timer 3',
+		label: 'Label',
+		hours: 'Hours',
+		minutes: 'Min',
+		seconds: 'Sec',
+		ready: 'Ready',
+		start: 'Start',
+		pause: 'Pause',
+		reset: 'Reset',
+		addOneMin: '+1 min',
+		addFiveMin: '+5 min',
+		status: {
+			ready: 'Ready',
+			running: 'Running',
+			paused: 'Paused',
+			finished: 'TIME!',
+		},
+	},
+
+	faq: [
+		{
+			question: 'How many timers can I create?',
+			answer:
+				'Unlimited. Add as many as you need with the \'+\' button. Perfect for cooking multiple dishes simultaneously: pasta boiling, sauce reducing, meat resting, and oven baking, all at once.',
+		},
+		{
+			question: 'Why is resting time important for meat?',
+			answer:
+				'When you cut meat fresh from heat, juices escape onto the plate. If you rest 5-10 minutes, fibers relax and juices redistribute. Result: juicy meat instead of dry. Resting is passive cooking.',
+		},
+		{
+			question: 'Does it work with screen locked?',
+			answer:
+				'Yes, but you need to grant notification permissions. Timers keep running in background and will alert you with sound and browser notification even if you switch tabs or lock your phone.',
+		},
+		{
+			question: 'What is the food \'Danger Zone\'?',
+			answer:
+				'Between 5°C and 65°C bacteria multiply rapidly. Cooked foods shouldn\'t stay in this range more than 2 hours (1 hour if temperature exceeds 30°C). Use a timer to monitor cooling before refrigerating.',
+		},
+	],
+
+	bibliography: [
+		{
+			name: 'Food Safety: USDA Guidelines',
+			url: 'https://www.fsis.usda.gov/',
+		},
+		{
+			name: 'Mise en Place - Professional Cooking',
+			url: 'https://www.escoffier.edu/',
+		},
+	],
+
+	howTo: [
+		{
+			name: 'Create multiple timers',
+			text: 'Use the \'+\' button to add as many timers as you need. Perfect for orchestrating multiple dishes simultaneously.',
+		},
+		{
+			name: 'Customize each timer',
+			text: 'Change the name of each timer to identify what\'s cooking: \'Oven\', \'Rice\', \'Sauce\', etc.',
+		},
+		{
+			name: 'Control from mobile dock',
+			text: 'On mobile, active timers appear in a sliding dock at the bottom. Pause or restart directly from there.',
+		},
+		{
+			name: 'Receive notifications',
+			text: 'Authorize notifications so the browser alerts you when time\'s up, even if you switch tabs.',
+		},
+	],
+
+	seo: [
+		{
+			type: 'title',
+			text: 'Temporal Mastery in the Kitchen',
+			level: 2,
+		},
+		{
+			type: 'paragraph',
+			html: 'Professional cooking isn\'t based solely on recipes, but on <strong>precise time management</strong>. The French concept <em>"Mise en Place"</em> (everything in its place) includes time as an ingredient. A steak that rests 5 minutes redistributes its juices and becomes tender; one that doesn\'t rest loses them at the first cut.',
+		},
+		{
+			type: 'paragraph',
+			html: 'This <strong>Multiple Timer</strong> tool has been designed for home chefs and professionals who need to orchestrate a symphony of dishes: pasta boiling, roast in the oven, and sauce reducing, all happening simultaneously.',
+		},
+		{
+			type: 'title',
+			text: 'The Role of Temperature and Time',
+			level: 3,
+		},
+		{
+			type: 'paragraph',
+			html: 'Cooking is essentially applying heat for a specific duration to transform the chemical structure of food. Protein denaturation and the Maillard reaction (which gives golden color and flavor) critically depend on the timer.',
+		},
+		{
+			type: 'table',
+			headers: ['Food', 'Cooking Point', 'Time', 'Benefit'],
+			rows: [
+				['Soft-boiled Eggs', 'Liquid yolk', '3-4 min', 'Soft protein, easy digestion'],
+				['Mollet Eggs', 'Dense yolk', '5-6 min', 'Perfect texture balance'],
+				['Hard-boiled Eggs', 'Fully set', '9-11 min', 'Maximum firmness'],
+				['Meat - Searing', 'High heat', '1-2 min/side', 'Maillard reaction, juiciness'],
+				['Meat - Fine Rest', 'Resting', '5 min', 'Juice redistribution'],
+				['Meat - Large Rest', 'Resting', '15-20 min', 'Relaxed fibers'],
+			],
+		},
+		{
+			type: 'title',
+			text: 'Food Safety: The Danger Zone',
+			level: 3,
+		},
+		{
+			type: 'paragraph',
+			html: 'Time doesn\'t just affect quality, it affects safety. The bacterial "Danger Zone" sits between 5°C and 65°C. Cooked foods must not remain in this range for more than <strong>2 hours</strong> (or 1 hour if ambient temperature exceeds 30°C). Use a timer to monitor cooling before storing food in the fridge.',
+		},
+		{
+			type: 'title',
+			text: 'Professional Organization Tips',
+			level: 3,
+		},
+		{
+			type: 'list',
+			items: [
+				'<strong>Stagger finishing times:</strong> If everything finishes at once, you\'ll feel overwhelmed plating. Try to have side dishes ready 5 minutes before the main course.',
+				'<strong>Use residual heat:</strong> Turn off vegetables or pasta 1-2 minutes before the timer sounds. Residual heat will finish cooking gently.',
+				'<strong>Name your timers:</strong> In a busy kitchen it\'s easy to forget which alarm is which. Use this tool\'s renaming feature to label \'Oven\', \'Rice\', or \'Sauce\'.',
+			],
+		},
+		{
+			type: 'tip',
+			html: '<strong>Professional tip:</strong> Time precision is what separates a chef from a home cook. Invest in a good timer and use it always. Experience tells you when something "looks ready", but time guarantees consistency.',
+		},
+	],
+
+	schemas: [],
+};

package/src/tool/kitchen-timer/i18n/es.ts

@@ -0,0 +1,154 @@
+import type { ToolLocaleContent } from '../../../types';
+
+export const content: ToolLocaleContent = {
+	slug: 'temporizador-cocina',
+	title: 'Temporizador de Cocina Múltiple',
+	description:
+		'Gestiona múltiples tiempos de cocción simultáneamente. Alarmas independientes, ideal para chefs y organización en la cocina (Mise en Place).',
+	faqTitle: 'Preguntas Frecuentes',
+	bibliographyTitle: 'Referencias',
+
+	ui: {
+		addTimer: 'Añadir Temporizador',
+		stopAll: 'Detener Todas',
+		defaultName: 'Temporizador',
+		newTimerName: 'Nuevo Temporizador',
+		timerDefault1: 'Temporizador 1',
+		timerDefault2: 'Temporizador 2',
+		timerDefault3: 'Temporizador 3',
+		label: 'Etiqueta',
+		hours: 'Horas',
+		minutes: 'Min',
+		seconds: 'Seg',
+		ready: 'Listo',
+		start: 'Iniciar',
+		pause: 'Pausar',
+		reset: 'Reset',
+		addOneMin: '+1 min',
+		addFiveMin: '+5 min',
+		status: {
+			ready: 'Listo',
+			running: 'Corriendo',
+			paused: 'Pausado',
+			finished: '¡TIEMPO!',
+		},
+	},
+
+	faq: [
+		{
+			question: '¿Cuántos temporizadores puedo crear?',
+			answer:
+				'Ilimitados. Añade tantos como necesites con el botón \'+\'. Ideal para cocinar varios platos simultáneamente: pasta hirviendo, salsa reduciéndose, carne reposando, y horno funcionando, todo a la vez.',
+		},
+		{
+			question: '¿Por qué es importante el tiempo de reposo en carnes?',
+			answer:
+				'Cuando cortas carne recién salida del fuego, los jugos escapan al plato. Si reposas 5-10 minutos, las fibras se relajan y los jugos se redistribuyen. Resultado: carne jugosa en lugar de seca. El reposo es cocción pasiva.',
+		},
+		{
+			question: '¿Funciona con la pantalla bloqueada?',
+			answer:
+				'Sí, pero necesitas dar permisos de notificaciones. Los temporizadores siguen corriendo en segundo plano y te avisarán con sonido y notificación del navegador incluso si cambias de pestaña o bloqueas el móvil.',
+		},
+		{
+			question: '¿Qué es la \'Zona de Peligro\' alimentaria?',
+			answer:
+				'Entre 5°C y 65°C las bacterias se multiplican rápidamente. Los alimentos cocinados no deben estar en esta zona más de 2 horas (1 hora si hace >30°C). Usa un temporizador para controlar el enfriamiento antes de refrigerar.',
+		},
+	],
+
+	bibliography: [
+		{
+			name: 'Seguridad Alimentaria: USDA Guidelines',
+			url: 'https://www.fsis.usda.gov/',
+		},
+		{
+			name: 'Mise en Place - La Cocina Profesional',
+			url: 'https://www.escoffier.edu/',
+		},
+	],
+
+	howTo: [
+		{
+			name: 'Crea múltiples temporizadores',
+			text: 'Usa el botón \'+\' para añadir tantos temporizadores como necesites. Ideal para orquestar varios platos simultáneamente.',
+		},
+		{
+			name: 'Personaliza cada temporizador',
+			text: 'Cambia el nombre de cada temporizador para identificar qué está cocinando: \'Horno\', \'Arroz\', \'Salsa\', etc.',
+		},
+		{
+			name: 'Controla desde el dock móvil',
+			text: 'En móviles, los temporizadores activos aparecen en un dock deslizable en la parte inferior. Pausa o reinicia directamente desde ahí.',
+		},
+		{
+			name: 'Recibe notificaciones',
+			text: 'Autoriza notificaciones para que el navegador te avise cuando se acabe el tiempo, incluso si cambias de pestaña.',
+		},
+	],
+
+	seo: [
+		{
+			type: 'title',
+			text: 'Maestría Temporal en la Cocina',
+			level: 2,
+		},
+		{
+			type: 'paragraph',
+			html: 'La cocina profesional no se basa solo en recetas, sino en la <strong>gestión precisa del tiempo</strong>. El concepto francés <em>"Mise en Place"</em> (todo en su lugar) incluye el tiempo como un ingrediente más. Un filete que reposa 5 minutos redistribuye sus jugos y se vuelve tierno; uno que no reposa, los pierde al primer corte.',
+		},
+		{
+			type: 'paragraph',
+			html: 'Esta herramienta de <strong>Temporizador Múltiple</strong> ha sido diseñada para chefs caseros y profesionales que necesitan orquestar una sinfonía de platos: la pasta hirviendo, el asado en el horno, y la reducción de salsa, todo ocurriendo simultáneamente.',
+		},
+		{
+			type: 'title',
+			text: 'El Papel de la Temperatura y el Tiempo',
+			level: 3,
+		},
+		{
+			type: 'paragraph',
+			html: 'Cocinar es esencialmente aplicar calor durante un tiempo determinado para transformar la estructura química de los alimentos. La desnaturalización de las proteínas y la reacción de Maillard (que da el color dorado y sabor) dependen críticamente del cronómetro.',
+		},
+		{
+			type: 'table',
+			headers: ['Alimento', 'Punto de Cocción', 'Tiempo', 'Beneficio'],
+			rows: [
+				['Huevos Pasados por agua', 'Yema líquida', '3-4 min', 'Proteína suave, fácil digestión'],
+				['Huevos Mollet', 'Yema densa', '5-6 min', 'Balance perfecto entre textura'],
+				['Huevos Duros', 'Cuajado total', '9-11 min', 'Máxima consistencia'],
+				['Carnes - Sellado', 'Alta temperatura', '1-2 min/lado', 'Reacción Maillard, jugosidad'],
+				['Carnes - Reposo fino', 'Reposo', '5 min', 'Redistribución de jugos'],
+				['Carnes - Reposo grande', 'Reposo', '15-20 min', 'Fibras relajadas'],
+			],
+		},
+		{
+			type: 'title',
+			text: 'Seguridad Alimentaria: La Zona de Peligro',
+			level: 3,
+		},
+		{
+			type: 'paragraph',
+			html: 'El tiempo no solo afecta la calidad, sino la seguridad. La "Zona de Peligro" bacteriana se sitúa entre los 5°C y los 65°C. Los alimentos cocinados no deben permanecer en este rango por más de <strong>2 horas</strong> (o 1 hora si la temperatura ambiente supera los 30°C). Usa un temporizador para controlar el enfriamiento antes de guardar la comida en la nevera.',
+		},
+		{
+			type: 'title',
+			text: 'Consejos Profesionales de Organización',
+			level: 3,
+		},
+		{
+			type: 'list',
+			items: [
+				'<strong>Escalona los tiempos de finalización:</strong> Si todo termina a la vez, te agobiarás emplatando. Intenta que los acompañamientos estén listos 5 minutos antes que el plato principal.',
+				'<strong>Usa el calor residual:</strong> Apaga el fuego de las verduras o pastas 1-2 minutos antes de que el temporizador suene. El calor residual terminará la cocción suavemente.',
+				'<strong>Nombra tus temporizadores:</strong> En una cocina ajetreada es fácil olvidar qué alarma es cual. Usa la función de renombrado de esta herramienta para etiquetar \'Horno\', \'Arroz\' o \'Salsa\'.',
+			],
+		},
+		{
+			type: 'tip',
+			html: '<strong>Consejo profesional:</strong> La precisión del tiempo es lo que diferencia a un chef de un cocinero casero. Invierte en un buen temporizador y úsalo siempre. La experiencia te dice cuándo algo "se ve listo", pero el tiempo te garantiza consistencia.',
+		},
+	],
+
+	schemas: [],
+};

package/src/tool/kitchen-timer/i18n/fr.ts

@@ -0,0 +1,154 @@
+import type { ToolLocaleContent } from '../../../types';
+
+export const content: ToolLocaleContent = {
+	slug: 'kitchen-timer',
+	title: 'Multiple Kitchen Timer',
+	description:
+		'Manage multiple cooking times simultaneously. Independent alarms, ideal for chefs and kitchen organization (Mise en Place).',
+	faqTitle: 'Questions Fréquemment Posées',
+	bibliographyTitle: 'Références',
+
+	ui: {
+		addTimer: 'Add Timer',
+		stopAll: 'Stop All',
+		defaultName: 'Timer',
+		newTimerName: 'New Timer',
+		timerDefault1: 'Timer 1',
+		timerDefault2: 'Timer 2',
+		timerDefault3: 'Timer 3',
+		label: 'Label',
+		hours: 'Hours',
+		minutes: 'Min',
+		seconds: 'Sec',
+		ready: 'Ready',
+		start: 'Start',
+		pause: 'Pause',
+		reset: 'Reset',
+		addOneMin: '+1 min',
+		addFiveMin: '+5 min',
+		status: {
+			ready: 'Ready',
+			running: 'Running',
+			paused: 'Paused',
+			finished: 'TIME!',
+		},
+	},
+
+	faq: [
+		{
+			question: 'How many timers can I create?',
+			answer:
+				'Unlimited. Add as many as you need with the \'+\' button. Perfect for cooking multiple dishes simultaneously: pasta boiling, sauce reducing, meat resting, and oven baking, all at once.',
+		},
+		{
+			question: 'Why is resting time important for meat?',
+			answer:
+				'When you cut meat fresh from heat, juices escape onto the plate. If you rest 5-10 minutes, fibers relax and juices redistribute. Result: juicy meat instead of dry. Resting is passive cooking.',
+		},
+		{
+			question: 'Does it work with screen locked?',
+			answer:
+				'Yes, but you need to grant notification permissions. Timers keep running in background and will alert you with sound and browser notification even if you switch tabs or lock your phone.',
+		},
+		{
+			question: 'What is the food \'Danger Zone\'?',
+			answer:
+				'Between 5°C and 65°C bacteria multiply rapidly. Cooked foods shouldn\'t stay in this range more than 2 hours (1 hour if temperature exceeds 30°C). Use a timer to monitor cooling before refrigerating.',
+		},
+	],
+
+	bibliography: [
+		{
+			name: 'Food Safety: USDA Guidelines',
+			url: 'https://www.fsis.usda.gov/',
+		},
+		{
+			name: 'Mise en Place - Professional Cooking',
+			url: 'https://www.escoffier.edu/',
+		},
+	],
+
+	howTo: [
+		{
+			name: 'Create multiple timers',
+			text: 'Use the \'+\' button to add as many timers as you need. Perfect for orchestrating multiple dishes simultaneously.',
+		},
+		{
+			name: 'Customize each timer',
+			text: 'Change the name of each timer to identify what\'s cooking: \'Oven\', \'Rice\', \'Sauce\', etc.',
+		},
+		{
+			name: 'Control from mobile dock',
+			text: 'On mobile, active timers appear in a sliding dock at the bottom. Pause or restart directly from there.',
+		},
+		{
+			name: 'Receive notifications',
+			text: 'Authorize notifications so the browser alerts you when time\'s up, even if you switch tabs.',
+		},
+	],
+
+	seo: [
+		{
+			type: 'title',
+			text: 'Temporal Mastery in the Kitchen',
+			level: 2,
+		},
+		{
+			type: 'paragraph',
+			html: 'Professional cooking isn\'t based solely on recipes, but on <strong>precise time management</strong>. The French concept <em>"Mise en Place"</em> (everything in its place) includes time as an ingredient. A steak that rests 5 minutes redistributes its juices and becomes tender; one that doesn\'t rest loses them at the first cut.',
+		},
+		{
+			type: 'paragraph',
+			html: 'This <strong>Multiple Timer</strong> tool has been designed for home chefs and professionals who need to orchestrate a symphony of dishes: pasta boiling, roast in the oven, and sauce reducing, all happening simultaneously.',
+		},
+		{
+			type: 'title',
+			text: 'The Role of Temperature and Time',
+			level: 3,
+		},
+		{
+			type: 'paragraph',
+			html: 'Cooking is essentially applying heat for a specific duration to transform the chemical structure of food. Protein denaturation and the Maillard reaction (which gives golden color and flavor) critically depend on the timer.',
+		},
+		{
+			type: 'table',
+			headers: ['Food', 'Cooking Point', 'Time', 'Benefit'],
+			rows: [
+				['Soft-boiled Eggs', 'Liquid yolk', '3-4 min', 'Soft protein, easy digestion'],
+				['Mollet Eggs', 'Dense yolk', '5-6 min', 'Perfect texture balance'],
+				['Hard-boiled Eggs', 'Fully set', '9-11 min', 'Maximum firmness'],
+				['Meat - Searing', 'High heat', '1-2 min/side', 'Maillard reaction, juiciness'],
+				['Meat - Fine Rest', 'Resting', '5 min', 'Juice redistribution'],
+				['Meat - Large Rest', 'Resting', '15-20 min', 'Relaxed fibers'],
+			],
+		},
+		{
+			type: 'title',
+			text: 'Food Safety: The Danger Zone',
+			level: 3,
+		},
+		{
+			type: 'paragraph',
+			html: 'Time doesn\'t just affect quality, it affects safety. The bacterial "Danger Zone" sits between 5°C and 65°C. Cooked foods must not remain in this range for more than <strong>2 hours</strong> (or 1 hour if ambient temperature exceeds 30°C). Use a timer to monitor cooling before storing food in the fridge.',
+		},
+		{
+			type: 'title',
+			text: 'Professional Organization Tips',
+			level: 3,
+		},
+		{
+			type: 'list',
+			items: [
+				'<strong>Stagger finishing times:</strong> If everything finishes at once, you\'ll feel overwhelmed plating. Try to have side dishes ready 5 minutes before the main course.',
+				'<strong>Use residual heat:</strong> Turn off vegetables or pasta 1-2 minutes before the timer sounds. Residual heat will finish cooking gently.',
+				'<strong>Name your timers:</strong> In a busy kitchen it\'s easy to forget which alarm is which. Use this tool\'s renaming feature to label \'Oven\', \'Rice\', or \'Sauce\'.',
+			],
+		},
+		{
+			type: 'tip',
+			html: '<strong>Professional tip:</strong> Time precision is what separates a chef from a home cook. Invest in a good timer and use it always. Experience tells you when something "looks ready", but time guarantees consistency.',
+		},
+	],
+
+	schemas: [],
+};

package/src/tool/kitchen-timer/index.ts

@@ -0,0 +1,26 @@
+import type { CookingToolEntry, ToolDefinition } from '../../types';
+import KitchenTimerComponent from './component.astro';
+import KitchenTimerSEO from './seo.astro';
+import KitchenTimerBibliography from './bibliography.astro';
+
+export const kitchenTimer: CookingToolEntry = {
+	id: 'kitchen-timer',
+	icons: {
+		bg: 'mdi:clock-outline',
+		fg: 'mdi:fire',
+	},
+	i18n: {
+		es: () => import('./i18n/es').then((m) => m.content),
+		en: () => import('./i18n/en').then((m) => m.content),
+		fr: () => import('./i18n/fr').then((m) => m.content),
+	},
+};
+
+export { KitchenTimerComponent, KitchenTimerSEO, KitchenTimerBibliography };
+
+export const KITCHEN_TIMER_TOOL: ToolDefinition = {
+	entry: kitchenTimer,
+	Component: KitchenTimerComponent,
+	SEOComponent: KitchenTimerSEO,
+	BibliographyComponent: KitchenTimerBibliography,
+};

package/src/tool/kitchen-timer/init.ts

@@ -0,0 +1,55 @@
+import { KitchenTimer } from "./lib/KitchenTimer";
+
+function setupAddTimerButton(
+	timerTemplate: HTMLTemplateElement,
+	timersGrid: HTMLElement,
+	activeTimers: KitchenTimer[]
+) {
+	document.getElementById("add-timer-btn")?.addEventListener("click", () => {
+		if (!timerTemplate || !timersGrid) return;
+
+		const clone = timerTemplate.content.cloneNode(true) as DocumentFragment;
+		const newCard = clone.querySelector(".timer-card") as HTMLElement;
+
+		const count = activeTimers.length + 1;
+		newCard.setAttribute("data-index", count.toString());
+		const nameInput = newCard.querySelector(".timer-name") as HTMLInputElement;
+		if (nameInput) nameInput.value = `Temporizador ${count}`;
+
+		timersGrid.appendChild(newCard);
+
+		const timer = new KitchenTimer(newCard);
+		activeTimers.push(timer);
+
+		newCard.scrollIntoView({ behavior: "smooth", block: "center" });
+	});
+}
+
+function setupStopAllButton(activeTimers: KitchenTimer[]) {
+	document.getElementById("stop-all")?.addEventListener("click", () => {
+		activeTimers.forEach((t) => t.pause());
+	});
+}
+
+function requestNotificationPermission() {
+	if ("Notification" in window) {
+		if (Notification.permission !== "granted" && Notification.permission !== "denied") {
+			Notification.requestPermission();
+		}
+	}
+}
+
+export function initKitchenTimers() {
+	const timersGrid = document.getElementById("timers-grid") as HTMLElement;
+	const timerTemplate = document.getElementById("timer-template") as HTMLTemplateElement;
+	const activeTimers: KitchenTimer[] = [];
+
+	document.querySelectorAll(".timer-card").forEach((card) => {
+		const timer = new KitchenTimer(card as HTMLElement);
+		activeTimers.push(timer);
+	});
+
+	setupAddTimerButton(timerTemplate, timersGrid, activeTimers);
+	setupStopAllButton(activeTimers);
+	requestNotificationPermission();
+}

package/src/tool/kitchen-timer/lib/AudioHelper.ts

@@ -0,0 +1,27 @@
+export function getAudioContext(): AudioContext | null {
+	try {
+		const audioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+		if (audioContextClass) {
+			return new audioContextClass();
+		}
+	} catch {
+		console.warn("AudioContext not available");
+	}
+	return null;
+}
+
+export function playBeep(audioContext: AudioContext, frequency: number = 800, duration: number = 0.1): void {
+	const now = audioContext.currentTime;
+	const osc = audioContext.createOscillator();
+	const gain = audioContext.createGain();
+
+	osc.connect(gain);
+	gain.connect(audioContext.destination);
+	osc.type = "sine";
+	osc.frequency.value = frequency;
+	gain.gain.setValueAtTime(0.3, now);
+	gain.gain.exponentialRampToValueAtTime(0.01, now + duration);
+
+	osc.start(now);
+	osc.stop(now + duration);
+}

package/src/tool/kitchen-timer/lib/DockManager.ts

@@ -0,0 +1,97 @@
+import type { KitchenTimer } from "./KitchenTimer";
+
+export class DockManager {
+	private dockElement: HTMLElement | null;
+	private containerElement: HTMLElement | null;
+	private timers: KitchenTimer[] = [];
+
+	constructor(dockId: string, containerId: string) {
+		this.dockElement = document.getElementById(dockId);
+		this.containerElement = document.getElementById(containerId);
+	}
+
+	public registerTimer(timer: KitchenTimer) {
+		this.timers.push(timer);
+
+		timer.addEventListener("update", () => this.sync());
+		this.sync();
+	}
+
+	public sync() {
+		if (!this.containerElement || !this.dockElement) return;
+
+		const relevantTimers = this.timers.filter(
+			(t) => t.totalSeconds > 0 && t.remainingSeconds > 0
+		);
+
+		if (relevantTimers.length === 0) {
+			this.dockElement.setAttribute("data-visible", "false");
+			return;
+		}
+
+		this.dockElement.setAttribute("data-visible", "true");
+		this.containerElement.innerHTML = "";
+
+		relevantTimers.sort((a, b) => a.remainingSeconds - b.remainingSeconds);
+
+		relevantTimers.forEach((t) => {
+			const item = this.createDockItem(t);
+			this.containerElement?.appendChild(item);
+		});
+	}
+
+	private createDockItem(timer: KitchenTimer): HTMLElement {
+		const item = document.createElement("div");
+		const baseClasses =
+			"flex items-center gap-2 px-3 py-2 rounded-lg border min-w-[130px] max-w-[160px] flex-shrink-0 shadow-sm transition-colors";
+		const stateClasses = timer.isRunning
+			? "border-orange-500 bg-orange-50/30 dark:border-orange-500 dark:bg-orange-900/20"
+			: "bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700";
+
+		item.className = `${baseClasses} ${stateClasses}`;
+		item.innerHTML = this.getDockItemHTML(timer);
+
+		this.attachDockItemListeners(item, timer);
+		return item;
+	}
+
+	private getDockItemHTML(timer: KitchenTimer): string {
+		const formattedTime = this.formatTimeMin(timer.remainingSeconds);
+		const timerName = timer.getName();
+		const buttonClass = timer.isRunning
+			? "bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200"
+			: "bg-orange-500 text-white hover:bg-orange-600";
+		const iconPath = timer.isRunning
+			? '<path d="M14,19H18V5H14M6,19H10V5H6V19Z" />'
+			: '<path d="M8,5.14V19.14L19,12.14L8,5.14Z" />';
+
+		return `
+            <div class="flex-1 min-w-0 flex flex-col justify-center">
+                <div class="text-[10px] text-slate-500 dark:text-slate-400 truncate uppercase tracking-wide leading-tight font-bold">${timerName}</div>
+                <div class="text-base font-mono font-bold text-slate-900 dark:text-white leading-none mt-0.5 tabular-nums">${formattedTime}</div>
+            </div>
+            <button class="dock-toggle p-1.5 rounded-full flex-shrink-0 transition-colors ${buttonClass}">
+                <svg class="w-3.5 h-3.5 pointer-events-none" viewBox="0 0 24 24" fill="currentColor">${iconPath}</svg>
+            </button>
+        `;
+	}
+
+	private attachDockItemListeners(item: HTMLElement, timer: KitchenTimer) {
+		const btn = item.querySelector(".dock-toggle");
+		btn?.addEventListener("click", (e) => {
+			e.stopPropagation();
+			timer.toggle();
+		});
+
+		item.addEventListener("click", () => {
+			timer.element.scrollIntoView({ behavior: "smooth", block: "center" });
+		});
+	}
+
+	private formatTimeMin(seconds: number): string {
+		if (seconds < 60) return `${seconds}s`;
+		const m = Math.floor(seconds / 60);
+		const s = seconds % 60;
+		return `${m}:${s.toString().padStart(2, "0")}`;
+	}
+}