-
-
-
-
-
- );
+
+ );
};
export default RoutineTimerItemForm;
diff --git a/src/tooling.test.ts b/src/tooling.test.ts
new file mode 100644
index 0000000..2f37af2
--- /dev/null
+++ b/src/tooling.test.ts
@@ -0,0 +1,9 @@
+import packageJson from '../package.json';
+
+describe('commit tooling', () => {
+ test('formats staged source files before commit', () => {
+ expect(packageJson['lint-staged']).toEqual({
+ '*.{ts,tsx,js,cjs,json,css,md}': 'prettier --write',
+ });
+ });
+});
diff --git a/src/utils/colorMode.test.ts b/src/utils/colorMode.test.ts
new file mode 100644
index 0000000..96da16f
--- /dev/null
+++ b/src/utils/colorMode.test.ts
@@ -0,0 +1,15 @@
+import { applyColorMode } from './colorMode';
+
+describe('applyColorMode', () => {
+ afterEach(() => {
+ document.documentElement.classList.remove('dark');
+ });
+
+ test('uses the selected app theme instead of the browser preference', () => {
+ applyColorMode('white');
+ expect(document.documentElement.classList.contains('dark')).toBe(true);
+
+ applyColorMode('black');
+ expect(document.documentElement.classList.contains('dark')).toBe(false);
+ });
+});
diff --git a/src/utils/colorMode.ts b/src/utils/colorMode.ts
new file mode 100644
index 0000000..146ace5
--- /dev/null
+++ b/src/utils/colorMode.ts
@@ -0,0 +1,3 @@
+export const applyColorMode = (compColor: 'white' | 'black') => {
+ document.documentElement.classList.toggle('dark', compColor === 'white');
+};
diff --git a/src/utils/editorDialStyles.test.ts b/src/utils/editorDialStyles.test.ts
new file mode 100644
index 0000000..15d6406
--- /dev/null
+++ b/src/utils/editorDialStyles.test.ts
@@ -0,0 +1,10 @@
+import { editorDialContainerClassName } from './editorDialStyles';
+
+describe('editor dial surface', () => {
+ test('uses the shared translucent surface used by timer editors', () => {
+ expect(editorDialContainerClassName).toContain('rounded-3xl');
+ expect(editorDialContainerClassName).toContain('bg-white/40');
+ expect(editorDialContainerClassName).toContain('dark:bg-black/20');
+ expect(editorDialContainerClassName).toContain('backdrop-blur-md');
+ });
+});
diff --git a/src/utils/editorDialStyles.ts b/src/utils/editorDialStyles.ts
new file mode 100644
index 0000000..2f7313c
--- /dev/null
+++ b/src/utils/editorDialStyles.ts
@@ -0,0 +1,2 @@
+export const editorDialContainerClassName =
+ 'flex flex-col items-center justify-center rounded-3xl border border-white/30 bg-white/40 p-4 shadow-soft backdrop-blur-md dark:bg-black/20';
diff --git a/src/utils/soundEngine.test.ts b/src/utils/soundEngine.test.ts
new file mode 100644
index 0000000..b820623
--- /dev/null
+++ b/src/utils/soundEngine.test.ts
@@ -0,0 +1,37 @@
+import { playSound } from './soundEngine';
+
+describe('playSound', () => {
+ beforeEach(() => {
+ const context = {
+ state: 'running',
+ currentTime: 0,
+ destination: {},
+ resume: jest.fn(),
+ createOscillator: jest.fn(() => ({
+ type: 'sine',
+ frequency: { setValueAtTime: jest.fn() },
+ connect: jest.fn(),
+ start: jest.fn(),
+ stop: jest.fn(),
+ })),
+ createGain: jest.fn(() => ({
+ gain: {
+ setValueAtTime: jest.fn(),
+ exponentialRampToValueAtTime: jest.fn(),
+ },
+ connect: jest.fn(),
+ })),
+ };
+
+ Object.defineProperty(window, 'AudioContext', {
+ configurable: true,
+ value: jest.fn(() => context),
+ });
+ });
+
+ test('returns a stop function for a synth alarm', () => {
+ const stop = playSound('synth:classic-beep');
+
+ expect(stop).toEqual(expect.any(Function));
+ });
+});
diff --git a/src/utils/soundEngine.ts b/src/utils/soundEngine.ts
index c6771b5..44e6115 100644
--- a/src/utils/soundEngine.ts
+++ b/src/utils/soundEngine.ts
@@ -18,13 +18,13 @@ class SoundEngine {
}
// 1. Zen Bell (Rich meditative chime with harmonic overtones)
- playZenBell(volume = 1) {
+ playZenBell(volume = 1): () => void {
const ctx = this.getContext();
const now = ctx.currentTime;
const frequencies = [528, 1056, 1584, 2112]; // Solfeggio Love frequency harmonics
const gains = [0.6, 0.25, 0.1, 0.05];
- frequencies.forEach((freq, i) => {
+ const oscillators = frequencies.map((freq, i) => {
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.type = 'sine';
@@ -38,16 +38,19 @@ class SoundEngine {
osc.start(now);
osc.stop(now + 3.0);
+ return osc;
});
+
+ return () => oscillators.forEach((osc) => osc.stop());
}
// 2. Digital Chime (Upbeat marimba melody)
- playDigitalChime(volume = 1) {
+ playDigitalChime(volume = 1): () => void {
const ctx = this.getContext();
const now = ctx.currentTime;
const notes = [523.25, 659.25, 783.99, 1046.5]; // C5, E5, G5, C6 arpeggio
- notes.forEach((freq, i) => {
+ const oscillators = notes.map((freq, i) => {
const startTime = now + i * 0.12;
const osc = ctx.createOscillator();
const gain = ctx.createGain();
@@ -63,14 +66,18 @@ class SoundEngine {
osc.start(startTime);
osc.stop(startTime + 1.2);
+ return osc;
});
+
+ return () => oscillators.forEach((osc) => osc.stop());
}
// 3. Classic Alarm Beep
- playClassicAlarm(volume = 1) {
+ playClassicAlarm(volume = 1): () => void {
const ctx = this.getContext();
const now = ctx.currentTime;
+ const oscillators: OscillatorNode[] = [];
for (let b = 0; b < 3; b++) {
const startTime = now + b * 0.25;
const osc = ctx.createOscillator();
@@ -87,16 +94,19 @@ class SoundEngine {
osc.start(startTime);
osc.stop(startTime + 0.15);
+ oscillators.push(osc);
}
+
+ return () => oscillators.forEach((osc) => osc.stop());
}
// 4. Gentle Gong (Deep calming gong)
- playGentleGong(volume = 1) {
+ playGentleGong(volume = 1): () => void {
const ctx = this.getContext();
const now = ctx.currentTime;
const frequencies = [220, 440, 660, 880];
- frequencies.forEach((freq, i) => {
+ const oscillators = frequencies.map((freq, i) => {
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.type = 'sine';
@@ -110,22 +120,29 @@ class SoundEngine {
osc.start(now);
osc.stop(now + 4.0);
+ return osc;
});
+
+ return () => oscillators.forEach((osc) => osc.stop());
}
// 5. Play Audio File or User Uploaded Sound
playAudioUrl(url: string, volume = 1, loop = false): () => void {
try {
const audio = new Audio(url);
+ let stopped = false;
+ let stopFallback: (() => void) | undefined;
audio.volume = Math.max(0, Math.min(1, volume));
audio.loop = loop;
void audio.play().catch((err) => {
console.debug('Audio play fallback to synth:', err);
- this.playZenBell(volume);
+ if (!stopped) stopFallback = this.playZenBell(volume);
});
return () => {
+ stopped = true;
audio.pause();
audio.currentTime = 0;
+ stopFallback?.();
};
} catch {
this.playZenBell(volume);
@@ -154,24 +171,20 @@ export const PRESET_SOUNDS: SoundOption[] = [
{ id: 'beep-beep', label: '🔊 Beep Beep Alarm', type: 'audio', description: 'Crisp audible alarm', value: '/visual-timer/audios/beep-beep.mp3' },
];
-export function playSound(soundId: string, volume = 1, mute = false): (() => void) | void {
- if (mute || volume <= 0) return;
+export function playSound(soundId: string, volume = 1, mute = false): (() => void) | undefined {
+ if (mute || volume <= 0) return undefined;
if (soundId === 'synth:zen-bell' || soundId === 'zen-bell') {
- soundEngine.playZenBell(volume);
- return;
+ return soundEngine.playZenBell(volume);
}
if (soundId === 'synth:digital-chime' || soundId === 'digital-chime') {
- soundEngine.playDigitalChime(volume);
- return;
+ return soundEngine.playDigitalChime(volume);
}
if (soundId === 'synth:gentle-gong' || soundId === 'gentle-gong') {
- soundEngine.playGentleGong(volume);
- return;
+ return soundEngine.playGentleGong(volume);
}
if (soundId === 'synth:classic-beep' || soundId === 'classic-beep') {
- soundEngine.playClassicAlarm(volume);
- return;
+ return soundEngine.playClassicAlarm(volume);
}
// Audio file path or data URL
diff --git a/src/versionMetadata.test.ts b/src/versionMetadata.test.ts
new file mode 100644
index 0000000..9652d63
--- /dev/null
+++ b/src/versionMetadata.test.ts
@@ -0,0 +1,7 @@
+import packageMetadata from '../package.json';
+
+describe('release metadata', () => {
+ test('reports the current patch release version', () => {
+ expect(packageMetadata.version).toBe('0.4.1');
+ });
+});
diff --git a/tailwind.config.js b/tailwind.config.js
index bbbde75..00de7e6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,57 +1,58 @@
/** @type {import('tailwindcss').Config} */
export default {
- content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
- theme: {
- extend: {
- fontFamily: {
- sans: ['"Plus Jakarta Sans"', 'system-ui', '-apple-system', 'sans-serif'],
- display: ['Outfit', '"Plus Jakarta Sans"', 'sans-serif'],
- mono: ['"JetBrains Mono"', 'monospace'],
- },
- boxShadow: {
- 'soft': '0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04)',
- 'dial': '0 15px 35px -5px rgba(0, 0, 0, 0.12), inset 0 2px 4px rgba(255, 255, 255, 0.6)',
- 'float': '0 20px 40px -10px rgba(0, 0, 0, 0.18)',
- },
- animation: {
- 'pulse-subtle': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
- 'fade-in': 'fadeIn 0.25s ease-out',
- 'scale-up': 'scaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
- },
- keyframes: {
- fadeIn: {
- '0%': { opacity: '0' },
- '100%': { opacity: '1' },
+ darkMode: 'class',
+ content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
+ theme: {
+ extend: {
+ fontFamily: {
+ sans: ['"Plus Jakarta Sans"', 'system-ui', '-apple-system', 'sans-serif'],
+ display: ['Outfit', '"Plus Jakarta Sans"', 'sans-serif'],
+ mono: ['"JetBrains Mono"', 'monospace'],
+ },
+ boxShadow: {
+ soft: '0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04)',
+ dial: '0 15px 35px -5px rgba(0, 0, 0, 0.12), inset 0 2px 4px rgba(255, 255, 255, 0.6)',
+ float: '0 20px 40px -10px rgba(0, 0, 0, 0.18)',
+ },
+ animation: {
+ 'pulse-subtle': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+ 'fade-in': 'fadeIn 0.25s ease-out',
+ 'scale-up': 'scaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
+ },
+ keyframes: {
+ fadeIn: {
+ '0%': { opacity: '0' },
+ '100%': { opacity: '1' },
+ },
+ scaleUp: {
+ '0%': { opacity: '0', transform: 'scale(0.95)' },
+ '100%': { opacity: '1', transform: 'scale(1)' },
+ },
+ },
},
- scaleUp: {
- '0%': { opacity: '0', transform: 'scale(0.95)' },
- '100%': { opacity: '1', transform: 'scale(1)' },
- },
- },
},
- },
- plugins: [
- function ({ addBase, addUtilities }) {
- addBase({
- body: {
- 'overscroll-behavior': 'none',
- position: 'fixed',
- width: '100%',
- height: '100%',
- overflow: 'hidden',
- '-webkit-overflow-scrolling': 'touch',
- },
- });
+ plugins: [
+ function ({ addBase, addUtilities }) {
+ addBase({
+ body: {
+ 'overscroll-behavior': 'none',
+ position: 'fixed',
+ width: '100%',
+ height: '100%',
+ overflow: 'hidden',
+ '-webkit-overflow-scrolling': 'touch',
+ },
+ });
- addUtilities({
- '.no-scrollbar': {
- '&::-webkit-scrollbar': {
- display: 'none',
- },
- '-ms-overflow-style': 'none',
- 'scrollbar-width': 'none',
+ addUtilities({
+ '.no-scrollbar': {
+ '&::-webkit-scrollbar': {
+ display: 'none',
+ },
+ '-ms-overflow-style': 'none',
+ 'scrollbar-width': 'none',
+ },
+ });
},
- });
- },
- ],
+ ],
};
diff --git a/tsconfig.json b/tsconfig.json
index ca696e3..3cd1580 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,5 +18,5 @@
"types": ["vite/client", "vite-plugin-pwa/client"]
},
"include": ["src", "vite.config.ts"],
- "exclude": ["node_modules", "dist"]
+ "exclude": ["node_modules", "dist", "src/**/*.test.ts"]
}
-- **UI & routing:** React 18, React Router 7, Headless UI, React Icons
-- **State & forms:** Zustand 5, React Hook Form
-- **Build & styling:** Vite 6, TypeScript 5, Tailwind CSS 3
-- **Offline support:** Vite PWA and Workbox
+- **UI & routing:** React 18, React Router 7, Headless UI, React Icons
+- **State & forms:** Zustand 5, React Hook Form
+- **Build & styling:** Vite 6, TypeScript 5, Tailwind CSS 3
+- **Offline support:** Vite PWA and Workbox
## 📦 Setup and Installation
@@ -173,6 +172,7 @@ Feel free to open [issues](https://github.com/do0ori/visual-timer/issues) for bu
## Release History
+- **v0.4.1:** Stoppable alarm previews, app-theme-driven editor surfaces, wider desktop timer cards, and an aligned Routine Timer interactive dial.
- **v0.4.0:** A streamlined Routine Timer editing flow with clearer step creation, inline editing, reordering, deletion, context-aware timer creation, and compact timer cards.
- **v0.3.0:** Vite migration, focus stats, custom alarm audio, unified settings, updated themes, and version information.
diff --git a/babel.config.cjs b/babel.config.cjs
new file mode 100644
index 0000000..8165fe4
--- /dev/null
+++ b/babel.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+ presets: [
+ ['@babel/preset-env', { targets: { node: 'current' } }],
+ '@babel/preset-typescript',
+ ],
+};
diff --git a/jest.config.cjs b/jest.config.cjs
new file mode 100644
index 0000000..897c6a5
--- /dev/null
+++ b/jest.config.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+ testEnvironment: 'jsdom',
+ testMatch: ['