@jjlmoya/utils-health 1.31.0 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-health",
-    "version": "1.31.0",
+    "version": "1.32.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -7,6 +7,7 @@ import { waistHipRatioCalculator } from '../tool/waistHipRatioCalculator/entry';
 import { waistHeightRatioCalculator } from '../tool/waistHeightRatioCalculator/entry';
 import { daltonismSimulator } from '../tool/daltonismSimulator/entry';
 import { tinnitusReliever } from '../tool/tinnitusReliever/entry';
+import { parametricNoiseSynthesizer } from '../tool/parametricNoiseSynthesizer/entry';
 import { breathingVisualizer } from '../tool/breathingVisualizer/entry';
 import { caffeineTracker } from '../tool/caffeineTracker/entry';
 import { caloricDeficitCalculator } from '../tool/caloricDeficitCalculator/entry';
@@ -30,7 +31,7 @@ import { correctedReticulocyteIndex } from '../tool/correctedReticulocyteIndex/e
 
 export const healthCategory: HealthCategoryEntry = {
   icon: 'mdi:heart-pulse',
-  tools: [bmiCalculator, amputationAdjustedBmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, leanBodyMassCalculator, metabolicAgeCalculator, caloricDeficitCalculator, dailyProteinCalculator, macronutrientCalculator, tdeeCalculator, bunCreatinineCalculator, serumOsmolalityCalculator, correctedSodiumHyperglycemiaCalculator, fractionalExcretionSodiumCalculator, correctedReticulocyteIndex, targetHeightEstimator, daltonismSimulator, tinnitusReliever, breathingVisualizer, caffeineTracker, waterPurifier, digestionStopwatch, binauralTuner, pelliRobsonTest, peripheralVisionTrainer, epworthSleepinessScale],
+  tools: [bmiCalculator, amputationAdjustedBmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, leanBodyMassCalculator, metabolicAgeCalculator, caloricDeficitCalculator, dailyProteinCalculator, macronutrientCalculator, tdeeCalculator, bunCreatinineCalculator, serumOsmolalityCalculator, correctedSodiumHyperglycemiaCalculator, fractionalExcretionSodiumCalculator, correctedReticulocyteIndex, targetHeightEstimator, daltonismSimulator, tinnitusReliever, parametricNoiseSynthesizer, breathingVisualizer, caffeineTracker, waterPurifier, digestionStopwatch, binauralTuner, pelliRobsonTest, peripheralVisionTrainer, epworthSleepinessScale],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -29,6 +29,7 @@ export { peripheralVisionTrainer } from './tool/peripheralVisionTrainer/entry';
 export { readingDistanceCalculator } from './tool/readingDistanceCalculator/entry';
 export { screenDecompressionTime } from './tool/screenDecompressionTime/entry';
 export { tinnitusReliever } from './tool/tinnitusReliever/entry';
+export { parametricNoiseSynthesizer } from './tool/parametricNoiseSynthesizer/entry';
 export { ubeCalculator } from './tool/ubeCalculator/entry';
 export { waterPurifier } from './tool/waterPurifier/entry';
 export { healthCategory } from './category';
@@ -63,6 +64,7 @@ import { peripheralVisionTrainer } from './tool/peripheralVisionTrainer/entry';
 import { readingDistanceCalculator } from './tool/readingDistanceCalculator/entry';
 import { screenDecompressionTime } from './tool/screenDecompressionTime/entry';
 import { tinnitusReliever } from './tool/tinnitusReliever/entry';
+import { parametricNoiseSynthesizer } from './tool/parametricNoiseSynthesizer/entry';
 import { ubeCalculator } from './tool/ubeCalculator/entry';
 import { waterPurifier } from './tool/waterPurifier/entry';
-export const ALL_ENTRIES = [binauralTuner, bloodUnitConverter, bmiCalculator, amputationAdjustedBmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, breathingVisualizer, caffeineTracker, caloricDeficitCalculator, dailyProteinCalculator, macronutrientCalculator, tdeeCalculator, bunCreatinineCalculator, serumOsmolalityCalculator, correctedSodiumHyperglycemiaCalculator, fractionalExcretionSodiumCalculator, correctedReticulocyteIndex, targetHeightEstimator, daltonismSimulator, digestionStopwatch, epworthSleepinessScale, hydrationCalculator, leanBodyMassCalculator, metabolicAgeCalculator, pelliRobsonTest, peripheralVisionTrainer, readingDistanceCalculator, screenDecompressionTime, tinnitusReliever, ubeCalculator, waterPurifier];
+export const ALL_ENTRIES = [binauralTuner, bloodUnitConverter, bmiCalculator, amputationAdjustedBmiCalculator, bodyAdiposityIndexCalculator, bodyFatPercentageCalculator, waistHipRatioCalculator, waistHeightRatioCalculator, breathingVisualizer, caffeineTracker, caloricDeficitCalculator, dailyProteinCalculator, macronutrientCalculator, tdeeCalculator, bunCreatinineCalculator, serumOsmolalityCalculator, correctedSodiumHyperglycemiaCalculator, fractionalExcretionSodiumCalculator, correctedReticulocyteIndex, targetHeightEstimator, daltonismSimulator, digestionStopwatch, epworthSleepinessScale, hydrationCalculator, leanBodyMassCalculator, metabolicAgeCalculator, pelliRobsonTest, peripheralVisionTrainer, readingDistanceCalculator, screenDecompressionTime, tinnitusReliever, parametricNoiseSynthesizer, ubeCalculator, waterPurifier];

package/src/index.ts

@@ -2,6 +2,7 @@ export * from './tool/bmiCalculator';
 export * from './tool/amputationAdjustedBmiCalculator';
 export * from './tool/daltonismSimulator';
 export * from './tool/tinnitusReliever';
+export * from './tool/parametricNoiseSynthesizer';
 export * from './tool/breathingVisualizer';
 export * from './tool/caffeineTracker';
 export * from './tool/caloricDeficitCalculator';

package/src/tests/locale_completeness.test.ts

@@ -36,6 +36,6 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(33);
+    expect(ALL_TOOLS.length).toBe(34);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -5,7 +5,7 @@ import { healthCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have 33 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(33);
+      expect(ALL_TOOLS.length).toBe(34);
     });
 
     it('healthCategory should be defined', () => {

package/src/tool/parametricNoiseSynthesizer/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography } from '@jjlmoya/utils-shared';
+import { parametricNoiseSynthesizer } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await parametricNoiseSynthesizer.i18n[locale]?.();
+---
+
+{content && <Bibliography links={content.bibliography} />}

package/src/tool/parametricNoiseSynthesizer/bibliography.ts

@@ -0,0 +1,24 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Colors of noise: white, pink, brown and blue spectral models',
+    url: 'https://en.wikipedia.org/wiki/Colors_of_noise',
+  },
+  {
+    name: 'Tyler RS, et al. Tinnitus retraining therapy: clinical guidelines',
+    url: 'https://pubmed.ncbi.nlm.nih.gov/23981084/',
+  },
+  {
+    name: 'Hobson JA and Pace-Schott EF. The cognitive neuroscience of sleep',
+    url: 'https://pubmed.ncbi.nlm.nih.gov/11825156/',
+  },
+  {
+    name: 'Zhou J, et al. Pink noise and sleep-dependent memory consolidation',
+    url: 'https://pubmed.ncbi.nlm.nih.gov/27920639/',
+  },
+  {
+    name: 'World Health Organization: safe listening and hearing health',
+    url: 'https://www.who.int/activities/making-listening-safe',
+  },
+];

package/src/tool/parametricNoiseSynthesizer/client.ts

@@ -0,0 +1,342 @@
+/* eslint-disable max-lines */
+
+type NoiseType = 'white' | 'pink' | 'brown' | 'blue';
+type PinkState = [number, number, number, number, number, number, number];
+
+interface NoiseElements {
+  canvas: HTMLCanvasElement;
+  playButton: HTMLButtonElement;
+  playIcon: HTMLElement;
+  stopIcon: HTMLElement;
+  status: HTMLElement;
+  slope: HTMLElement;
+  volume: HTMLInputElement;
+  cutoff: HTMLInputElement;
+  q: HTMLInputElement;
+  timerPicker: HTMLElement;
+  timerTrigger: HTMLButtonElement;
+  timerMenu: HTMLElement;
+  timerLabel: HTMLElement;
+  volumeOutput: HTMLOutputElement;
+  cutoffOutput: HTMLOutputElement;
+  qOutput: HTMLOutputElement;
+  timerOptions: NodeListOf<HTMLButtonElement>;
+  typeButtons: NodeListOf<HTMLButtonElement>;
+}
+
+function required<T extends Element>(root: Element, selector: string): T {
+  const element = root.querySelector<T>(selector);
+  if (!element) throw new Error(`Missing ${selector}`);
+  return element;
+}
+
+function collectElements(root: Element): NoiseElements {
+  return {
+    canvas: required<HTMLCanvasElement>(root, '[data-spectrum]'),
+    playButton: required<HTMLButtonElement>(root, '[data-play]'),
+    playIcon: required<HTMLElement>(root, '.pns__play-icon--play'),
+    stopIcon: required<HTMLElement>(root, '.pns__play-icon--stop'),
+    status: required<HTMLElement>(root, '[data-status]'),
+    slope: required<HTMLElement>(root, '[data-slope]'),
+    volume: required<HTMLInputElement>(root, '[data-volume]'),
+    cutoff: required<HTMLInputElement>(root, '[data-cutoff]'),
+    q: required<HTMLInputElement>(root, '[data-q]'),
+    timerPicker: required<HTMLElement>(root, '[data-timer-picker]'),
+    timerTrigger: required<HTMLButtonElement>(root, '[data-timer-trigger]'),
+    timerMenu: required<HTMLElement>(root, '[data-timer-menu]'),
+    timerLabel: required<HTMLElement>(root, '[data-timer-label]'),
+    volumeOutput: required<HTMLOutputElement>(root, '[data-volume-output]'),
+    cutoffOutput: required<HTMLOutputElement>(root, '[data-cutoff-output]'),
+    qOutput: required<HTMLOutputElement>(root, '[data-q-output]'),
+    timerOptions: root.querySelectorAll<HTMLButtonElement>('[data-timer-option]'),
+    typeButtons: root.querySelectorAll<HTMLButtonElement>('[data-type]'),
+  };
+}
+
+class ParametricNoiseSynth {
+  elements: NoiseElements;
+  canvasContext: CanvasRenderingContext2D;
+  ctx: AudioContext | null = null;
+  source: AudioBufferSourceNode | null = null;
+  gain: GainNode | null = null;
+  filter: BiquadFilterNode | null = null;
+  analyser: AnalyserNode | null = null;
+  animation = 0;
+  fadeTimeout = 0;
+  timerValue = 0;
+  activeType: NoiseType = 'pink';
+  playing = false;
+
+  constructor(root: Element) {
+    this.elements = collectElements(root);
+    this.canvasContext = this.elements.canvas.getContext('2d')!;
+    this.bind();
+    this.resize();
+    this.paintIdle();
+  }
+
+  bind() {
+    const { playButton, volume, cutoff, q, timerTrigger, timerOptions, typeButtons, timerPicker } = this.elements;
+    playButton.addEventListener('click', () => this.toggle());
+    volume.addEventListener('input', () => this.updateParams());
+    cutoff.addEventListener('input', () => this.updateParams());
+    q.addEventListener('input', () => this.updateParams());
+    timerTrigger.addEventListener('click', () => this.toggleTimerMenu());
+    timerTrigger.addEventListener('keydown', (event) => this.handleTimerTriggerKey(event));
+    timerOptions.forEach((option) => option.addEventListener('click', () => this.selectTimer(option)));
+    typeButtons.forEach((button) => this.bindTypeButton(button));
+    document.addEventListener('click', (event) => {
+      if (!timerPicker.contains(event.target as Node)) this.closeTimerMenu();
+    });
+    window.addEventListener('resize', () => this.resize());
+  }
+
+  resize() {
+    this.elements.canvas.width = this.elements.canvas.offsetWidth;
+    this.elements.canvas.height = this.elements.canvas.offsetHeight;
+    this.paintIdle();
+  }
+
+  bindTypeButton(button: HTMLButtonElement) {
+    button.addEventListener('click', () => {
+      this.activeType = button.dataset.type as NoiseType;
+      this.elements.typeButtons.forEach((item) => (item.dataset.active = String(item === button)));
+      this.elements.slope.textContent = `Slope: ${this.slopeFor(this.activeType)} dB/oct`;
+      if (this.playing) this.restart();
+      else this.paintIdle();
+    });
+  }
+
+  ensureAudio() {
+    type AudioWindow = Window & { webkitAudioContext?: typeof AudioContext };
+    const AudioCtor = window.AudioContext ?? (window as AudioWindow).webkitAudioContext;
+    if (!this.ctx && AudioCtor) this.ctx = new AudioCtor();
+    if (this.ctx?.state === 'suspended') void this.ctx.resume();
+  }
+
+  toggle() {
+    if (this.playing) this.stop();
+    else this.start();
+  }
+
+  start() {
+    this.ensureAudio();
+    if (!this.ctx) return;
+    this.gain = this.ctx.createGain();
+    this.filter = this.ctx.createBiquadFilter();
+    this.analyser = this.ctx.createAnalyser();
+    this.source = this.ctx.createBufferSource();
+    this.source.buffer = this.makeBuffer(this.activeType);
+    this.source.loop = true;
+    this.filter.type = 'lowpass';
+    this.filter.frequency.value = Number(this.elements.cutoff.value);
+    this.filter.Q.value = Number(this.elements.q.value);
+    this.analyser.fftSize = 2048;
+    this.gain.gain.setValueAtTime(0, this.ctx.currentTime);
+    this.gain.gain.linearRampToValueAtTime(Number(this.elements.volume.value) / 100, this.ctx.currentTime + 1.2);
+    this.connectAudio();
+    this.source.start();
+    this.playing = true;
+    this.setPlayingUi();
+    this.updateParams();
+    this.armTimer();
+    this.draw();
+  }
+
+  connectAudio() {
+    this.source!.connect(this.filter!);
+    this.filter!.connect(this.gain!);
+    this.gain!.connect(this.analyser!);
+    this.analyser!.connect(this.ctx!.destination);
+  }
+
+  stop() {
+    window.clearTimeout(this.fadeTimeout);
+    cancelAnimationFrame(this.animation);
+    this.source?.stop();
+    this.source?.disconnect();
+    this.filter?.disconnect();
+    this.gain?.disconnect();
+    this.analyser?.disconnect();
+    this.source = null;
+    this.playing = false;
+    this.setIdleUi();
+    this.paintIdle();
+  }
+
+  restart() {
+    this.stop();
+    this.start();
+  }
+
+  setPlayingUi() {
+    this.elements.status.textContent = 'Playing';
+    this.elements.playIcon.hidden = true;
+    this.elements.stopIcon.hidden = false;
+  }
+
+  setIdleUi() {
+    this.elements.status.textContent = 'Ready';
+    this.elements.playIcon.hidden = false;
+    this.elements.stopIcon.hidden = true;
+  }
+
+  toggleTimerMenu() {
+    const isOpen = this.elements.timerTrigger.getAttribute('aria-expanded') === 'true';
+    if (isOpen) this.closeTimerMenu();
+    else this.openTimerMenu();
+  }
+
+  openTimerMenu() {
+    this.elements.timerMenu.hidden = false;
+    this.elements.timerTrigger.setAttribute('aria-expanded', 'true');
+  }
+
+  closeTimerMenu() {
+    this.elements.timerMenu.hidden = true;
+    this.elements.timerTrigger.setAttribute('aria-expanded', 'false');
+  }
+
+  handleTimerTriggerKey(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      this.closeTimerMenu();
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.toggleTimerMenu();
+    }
+  }
+
+  selectTimer(option: HTMLButtonElement) {
+    this.timerValue = Number(option.value);
+    this.elements.timerLabel.textContent = option.textContent ?? 'Off';
+    this.elements.timerOptions.forEach((item) => item.setAttribute('aria-selected', String(item === option)));
+    this.closeTimerMenu();
+    this.armTimer();
+  }
+
+  armTimer() {
+    window.clearTimeout(this.fadeTimeout);
+    const minutes = this.timerValue;
+    if (!minutes || !this.playing || !this.ctx || !this.gain) return;
+    this.fadeTimeout = window.setTimeout(() => this.fadeOut(), minutes * 60 * 1000);
+  }
+
+  fadeOut() {
+    if (!this.ctx || !this.gain) return;
+    this.elements.status.textContent = 'Fading out';
+    this.gain.gain.cancelScheduledValues(this.ctx.currentTime);
+    this.gain.gain.setValueAtTime(this.gain.gain.value, this.ctx.currentTime);
+    this.gain.gain.linearRampToValueAtTime(0.0001, this.ctx.currentTime + 24);
+    window.setTimeout(() => this.stop(), 24500);
+  }
+
+  updateParams() {
+    const volumeValue = Number(this.elements.volume.value);
+    const cutoffValue = Number(this.elements.cutoff.value);
+    const qValue = Number(this.elements.q.value);
+    this.elements.volumeOutput.textContent = `${volumeValue}%`;
+    this.elements.cutoffOutput.textContent = `${cutoffValue} Hz`;
+    this.elements.qOutput.textContent = qValue.toFixed(1);
+    if (!this.ctx) return;
+    this.gain?.gain.setTargetAtTime(volumeValue / 100, this.ctx.currentTime, 0.08);
+    this.filter?.frequency.setTargetAtTime(cutoffValue, this.ctx.currentTime, 0.08);
+    this.filter?.Q.setTargetAtTime(qValue, this.ctx.currentTime, 0.08);
+  }
+
+  makeBuffer(type: NoiseType) {
+    const sampleRate = this.ctx!.sampleRate;
+    const buffer = this.ctx!.createBuffer(1, sampleRate * 4, sampleRate);
+    const data = buffer.getChannelData(0);
+    this.fillNoiseBuffer(data, type);
+    return buffer;
+  }
+
+  fillNoiseBuffer(data: Float32Array, type: NoiseType) {
+    let pinkState: PinkState = [0, 0, 0, 0, 0, 0, 0];
+    let brownLast = 0;
+    let blueLast = 0;
+    for (let i = 0; i < data.length; i++) {
+      const white = Math.random() * 2 - 1;
+      if (type === 'white') data[i] = white * 0.42;
+      if (type === 'pink') [data[i], pinkState] = this.pinkSample(white, pinkState);
+      if (type === 'brown') {
+        brownLast = (brownLast + 0.02 * white) / 1.02;
+        data[i] = brownLast * 3.2;
+      }
+      if (type === 'blue') {
+        data[i] = (white - blueLast) * 0.38;
+        blueLast = white;
+      }
+    }
+  }
+
+  pinkSample(white: number, state: PinkState): [number, PinkState] {
+    let [b0, b1, b2, b3, b4, b5] = state;
+    const b6 = state[6];
+    b0 = 0.99886 * b0 + white * 0.0555179;
+    b1 = 0.99332 * b1 + white * 0.0750759;
+    b2 = 0.969 * b2 + white * 0.153852;
+    b3 = 0.8665 * b3 + white * 0.3104856;
+    b4 = 0.55 * b4 + white * 0.5329522;
+    b5 = -0.7616 * b5 - white * 0.016898;
+    const sample = (b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362) * 0.09;
+    return [sample, [b0, b1, b2, b3, b4, b5, white * 0.115926]];
+  }
+
+  slopeFor(type: NoiseType) {
+    return { white: 0, pink: -3, brown: -6, blue: 3 }[type];
+  }
+
+  draw() {
+    if (!this.playing || !this.analyser) return;
+    this.animation = requestAnimationFrame(() => this.draw());
+    const data = new Uint8Array(this.analyser.frequencyBinCount);
+    this.analyser.getByteFrequencyData(data);
+    this.paint(data);
+  }
+
+  paint(data?: Uint8Array) {
+    const { canvas } = this.elements;
+    const ctx = this.canvasContext;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.strokeStyle = this.makeGradient(canvas.width, canvas.height);
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    this.drawSpectrumPath(data);
+    ctx.stroke();
+    ctx.lineTo(canvas.width, canvas.height);
+    ctx.lineTo(0, canvas.height);
+    ctx.fillStyle = 'rgba(56, 189, 248, 0.12)';
+    ctx.fill();
+  }
+
+  makeGradient(width: number, height: number) {
+    const gradient = this.canvasContext.createLinearGradient(0, 0, width, height);
+    gradient.addColorStop(0, '#38bdf8');
+    gradient.addColorStop(0.55, '#22c55e');
+    gradient.addColorStop(1, '#f59e0b');
+    return gradient;
+  }
+
+  drawSpectrumPath(data?: Uint8Array) {
+    const { canvas } = this.elements;
+    const points = data ?? new Uint8Array(96).map((_, i) => 120 - i * 0.8 + Math.sin(i / 4) * 10);
+    for (let i = 0; i < points.length; i++) {
+      const x = (i / (points.length - 1)) * canvas.width;
+      const y = canvas.height - (points[i] / 255) * canvas.height * 0.86 - canvas.height * 0.07;
+      if (i === 0) this.canvasContext.moveTo(x, y);
+      else this.canvasContext.lineTo(x, y);
+    }
+  }
+
+  paintIdle() {
+    this.elements.slope.textContent = `Slope: ${this.slopeFor(this.activeType)} dB/oct`;
+    this.paint();
+  }
+}
+
+export function initParametricNoiseSynthesizer(root: Element) {
+  new ParametricNoiseSynth(root);
+}

package/src/tool/parametricNoiseSynthesizer/component.astro

@@ -0,0 +1,77 @@
+---
+import { Icon } from 'astro-icon/components';
+import './parametric-pink-brown-noise-synthesizer.css';
+import type { KnownLocale } from '../../types';
+import type { ParametricNoiseSynthesizerUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const t = (Astro.props.ui ?? {}) as ParametricNoiseSynthesizerUI;
+---
+
+<div class="pns" data-noise-synth>
+  <section class="pns__scope" aria-label="Noise spectrum visualizer">
+    <canvas class="pns__canvas" data-spectrum></canvas>
+    <div class="pns__readout">
+      <span data-status>{t.statusIdle ?? 'Ready'}</span>
+      <strong data-slope>{t.spectralSlope ?? 'Slope'}: -3 dB/oct</strong>
+    </div>
+    <button class="pns__play" type="button" data-play aria-label={t.play ?? 'Play'}>
+      <span class="pns__play-icon pns__play-icon--play"><Icon name="mdi:play" /></span>
+      <span class="pns__play-icon pns__play-icon--stop" hidden><Icon name="mdi:stop" /></span>
+    </button>
+  </section>
+
+  <section class="pns__desk" aria-label="Parametric noise controls">
+    <div class="pns__types" role="group" aria-label="Noise type">
+      <button type="button" class="pns__type" data-type="pink" data-active="true">{t.typePink ?? 'Pink'}</button>
+      <button type="button" class="pns__type" data-type="brown" data-active="false">{t.typeBrown ?? 'Brown'}</button>
+      <button type="button" class="pns__type" data-type="white" data-active="false">{t.typeWhite ?? 'White'}</button>
+      <button type="button" class="pns__type" data-type="blue" data-active="false">{t.typeBlue ?? 'Blue'}</button>
+    </div>
+
+    <div class="pns__mix">
+      <label class="pns__fader">
+        <span>{t.labelVolume ?? 'Volume'}</span>
+        <output data-volume-output>34%</output>
+        <input data-volume type="range" min="0" max="90" value="34" />
+      </label>
+      <label class="pns__fader">
+        <span>{t.labelCutoff ?? 'Cutoff'}</span>
+        <output data-cutoff-output>3200 Hz</output>
+        <input data-cutoff type="range" min="100" max="10000" step="10" value="3200" />
+      </label>
+      <label class="pns__fader">
+        <span>{t.labelResonance ?? 'Q'}</span>
+        <output data-q-output>0.7</output>
+        <input data-q type="range" min="0.1" max="12" step="0.1" value="0.7" />
+      </label>
+    </div>
+
+    <div class="pns__timer">
+      <span>{t.labelTimer ?? 'Sleep timer'}</span>
+      <div class="pns__timer-picker" data-timer-picker>
+        <button class="pns__timer-trigger" type="button" data-timer-trigger aria-haspopup="listbox" aria-expanded="false">
+          <span data-timer-label>{t.timerOff ?? 'Off'}</span>
+          <span class="pns__timer-chevron" aria-hidden="true"><Icon name="mdi:chevron-down" /></span>
+        </button>
+        <div class="pns__timer-menu" role="listbox" data-timer-menu hidden>
+          <button type="button" role="option" data-timer-option value="0" aria-selected="true">{t.timerOff ?? 'Off'}</button>
+          <button type="button" role="option" data-timer-option value="15" aria-selected="false">{t.timer15 ?? '15 min'}</button>
+          <button type="button" role="option" data-timer-option value="30" aria-selected="false">{t.timer30 ?? '30 min'}</button>
+          <button type="button" role="option" data-timer-option value="45" aria-selected="false">{t.timer45 ?? '45 min'}</button>
+          <button type="button" role="option" data-timer-option value="60" aria-selected="false">{t.timer60 ?? '60 min'}</button>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script>
+  import { initParametricNoiseSynthesizer } from './client';
+
+  document.querySelectorAll('[data-noise-synth]').forEach(initParametricNoiseSynthesizer);
+</script>

package/src/tool/parametricNoiseSynthesizer/entry.ts

@@ -0,0 +1,27 @@
+import type { HealthToolEntry } from '../../types';
+import type { ParametricNoiseSynthesizerUI } from './ui';
+
+export const parametricNoiseSynthesizer: HealthToolEntry<ParametricNoiseSynthesizerUI> = {
+  id: 'parametricNoiseSynthesizer',
+  icons: {
+    bg: 'mdi:waveform',
+    fg: 'mdi:tune',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};