@jjlmoya/utils-hardware 1.22.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-hardware",
-    "version": "1.22.0",
+    "version": "1.24.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -12,10 +12,11 @@ import { refreshRateDetector } from '../tool/refreshRateDetector/index';
 import { monitorGhostingTest } from '../tool/monitorGhostingTest/index';
 import { spectrumCanvas } from '../tool/colorAccuracyTest/index';
 import { upsRuntimeCalculator } from '../tool/upsRuntimeCalculator/index';
+import { stereoAudioTest } from '../tool/stereoAudioTest/index';
 
 export const hardwareCategory: HardwareCategoryEntry = {
   icon: 'mdi:memory',
-  tools: [pixelesPantalla, testTeclado, testMando, probadorVibracionMando, testRaton, mouseDoubleClickTest, mouseScrollTest, estimadorSaludBateria, toneGenerator, refreshRateDetector, monitorGhostingTest, spectrumCanvas, upsRuntimeCalculator],
+  tools: [pixelesPantalla, testTeclado, testMando, probadorVibracionMando, testRaton, mouseDoubleClickTest, mouseScrollTest, estimadorSaludBateria, toneGenerator, refreshRateDetector, monitorGhostingTest, spectrumCanvas, upsRuntimeCalculator, stereoAudioTest],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -24,6 +24,8 @@ export { spectrumCanvas } from './tool/colorAccuracyTest/entry';
 export type { SpectrumCanvasLocaleContent } from './tool/colorAccuracyTest/entry';
 export { upsRuntimeCalculator } from './tool/upsRuntimeCalculator/entry';
 export type { UpsRuntimeCalculatorLocaleContent } from './tool/upsRuntimeCalculator/entry';
+export { stereoAudioTest } from './tool/stereoAudioTest/entry';
+export type { StereoAudioTestLocaleContent } from './tool/stereoAudioTest/entry';
 export { hardwareCategory } from './category';
 import { estimadorSaludBateria } from './tool/batteryHealthEstimator/entry';
 import { pixelesPantalla } from './tool/deadPixelTest/entry';
@@ -38,4 +40,5 @@ import { refreshRateDetector } from './tool/refreshRateDetector/entry';
 import { monitorGhostingTest } from './tool/monitorGhostingTest/entry';
 import { spectrumCanvas } from './tool/colorAccuracyTest/entry';
 import { upsRuntimeCalculator } from './tool/upsRuntimeCalculator/entry';
-export const ALL_ENTRIES = [estimadorSaludBateria, pixelesPantalla, testMando, probadorVibracionMando, testTeclado, testRaton, mouseDoubleClickTest, mouseScrollTest, toneGenerator, refreshRateDetector, monitorGhostingTest, spectrumCanvas, upsRuntimeCalculator];
+import { stereoAudioTest } from './tool/stereoAudioTest/entry';
+export const ALL_ENTRIES = [estimadorSaludBateria, pixelesPantalla, testMando, probadorVibracionMando, testTeclado, testRaton, mouseDoubleClickTest, mouseScrollTest, toneGenerator, refreshRateDetector, monitorGhostingTest, spectrumCanvas, upsRuntimeCalculator, stereoAudioTest];

package/src/index.ts

@@ -30,3 +30,4 @@ export { REFRESH_RATE_DETECTOR_TOOL } from './tool/refreshRateDetector/index';
 export { MONITOR_GHOSTING_TEST_TOOL } from './tool/monitorGhostingTest/index';
 export { SPECTRUM_CANVAS_TOOL } from './tool/colorAccuracyTest/index';
 export { UPS_RUNTIME_CALCULATOR_TOOL } from './tool/upsRuntimeCalculator/index';
+export { STEREO_AUDIO_TEST_TOOL } from './tool/stereoAudioTest/index';

package/src/tests/locale_completeness.test.ts

@@ -21,8 +21,8 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 13 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(13);
+  it('all 14 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(14);
   });
 });
 

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { hardwareCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 13 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(13);
+    it('should have 14 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(14);
     });
 
     it('hardwareCategory should be defined', () => {

package/src/tool/mouseScrollTest/mouse-scroll-test.css

@@ -1,5 +1,14 @@
 .mst-root {
+  box-sizing: border-box;
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.mst-root *,
+.mst-root *::before,
+.mst-root *::after {
+  box-sizing: inherit;
 }
 
 .mst-card {
@@ -7,6 +16,8 @@
   grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
   gap: 1rem;
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
   padding: clamp(0.9rem, 3vw, 1.25rem);
   border: 1px solid rgba(21, 94, 117, 0.22);
   border-radius: 8px;
@@ -29,6 +40,8 @@
 .mst-capture {
   position: relative;
   display: grid;
+  width: 100%;
+  min-width: 0;
   min-height: 430px;
   overflow: hidden;
   padding: clamp(1rem, 4vw, 1.5rem);
@@ -89,6 +102,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
+  max-width: 100%;
   padding: 0.5rem 0.7rem;
   border-radius: 999px;
   font-size: 0.82rem;
@@ -109,6 +123,7 @@
 }
 
 .mst-lock-text {
+  width: 100%;
   max-width: 28rem;
   margin: 0;
   color: #fff;
@@ -196,6 +211,7 @@
   display: grid;
   gap: 0.45rem;
   max-width: 30rem;
+  min-width: 0;
 }
 
 @keyframes mst-locked-pulse {
@@ -250,7 +266,9 @@
 }
 
 .mst-capture-copy small {
+  display: block;
   max-width: 24rem;
+  overflow-wrap: anywhere;
   color: #0f172a;
   font-size: clamp(1.1rem, 3.4vw, 1.35rem);
   font-weight: 900;
@@ -310,6 +328,7 @@
   display: grid;
   gap: 0.85rem;
   align-content: start;
+  min-width: 0;
 }
 
 .mst-score,
@@ -349,6 +368,7 @@
   font-size: 0.94rem;
   font-weight: 750;
   line-height: 1.35;
+  overflow-wrap: anywhere;
 }
 
 .theme-dark .mst-direction-note {
@@ -495,10 +515,12 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
+  min-width: 0;
   font-weight: 800;
 }
 
 .mst-log-head button {
+  flex: 0 0 auto;
   border: 0;
   border-radius: 999px;
   background: #0f766e;
@@ -534,6 +556,7 @@
   border-radius: 8px;
   background: rgba(236, 253, 245, 0.82);
   font-size: 0.86rem;
+  overflow-wrap: anywhere;
 }
 
 .mst-log-item.reversal {

package/src/tool/stereoAudioTest/bibliography.astro

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

package/src/tool/stereoAudioTest/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Microsoft Support - Fix sound or audio problems in Windows',
+    url: 'https://support.microsoft.com/windows/fix-sound-or-audio-problems-in-windows-73025246-b61c-40fb-671a-2535c7cd56c8',
+  },
+  {
+    name: 'Apple Support - Adjust audio balance and mono audio on Mac',
+    url: 'https://support.apple.com/guide/mac-help/change-sound-output-settings-mchlp2256/mac',
+  },
+  {
+    name: 'Crutchfield - Speaker placement for stereo listening',
+    url: 'https://www.crutchfield.com/learn/home-stereo-speaker-placement.html',
+  },
+];

package/src/tool/stereoAudioTest/component.astro

@@ -0,0 +1,251 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { KnownLocale } from '../../types';
+import type { StereoAudioTestUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as StereoAudioTestUI;
+---
+
+<div
+  class="sat-root"
+  data-config={JSON.stringify({
+    left: t.left,
+    center: t.center,
+    right: t.right,
+    sweep: t.sweep,
+    stop: t.stop,
+    activeIdle: t.activeIdle,
+    activeLeft: t.activeLeft,
+    activeCenter: t.activeCenter,
+    activeRight: t.activeRight,
+    activeSweep: t.activeSweep,
+    secondsUnit: t.secondsUnit,
+  })}
+>
+  <section class="sat-panel">
+    <div class="sat-stage" aria-live="polite">
+      <div class="sat-speaker sat-left">
+        <span></span>
+        <strong>{t.leftSpeaker}</strong>
+      </div>
+      <div class="sat-orbit" aria-hidden="true">
+        <i data-dot></i>
+        <b>{t.centerLine}</b>
+      </div>
+      <div class="sat-speaker sat-right">
+        <span></span>
+        <strong>{t.rightSpeaker}</strong>
+      </div>
+    </div>
+
+    <div class="sat-controls">
+      <div class="sat-buttons">
+        <button type="button" data-play="left"><Icon name="mdi:play" />{t.left}</button>
+        <button type="button" data-play="center"><Icon name="mdi:play" />{t.center}</button>
+        <button type="button" data-play="right"><Icon name="mdi:play" />{t.right}</button>
+        <button type="button" data-play="sweep"><Icon name="mdi:play" />{t.sweep}</button>
+        <button type="button" data-stop>{t.stop}</button>
+      </div>
+
+      <div class="sat-sliders">
+        <label class="sat-control-row">
+          <span>{t.volume}</span>
+          <strong data-volume-label>24%</strong>
+          <input data-volume type="range" min="1" max="80" value="24" />
+        </label>
+        <label class="sat-control-row" data-duration-control>
+          <span>{t.duration}</span>
+          <strong><output data-duration-label>3</output>{t.secondsUnit}</strong>
+          <input data-duration type="range" min="1" max="8" value="3" />
+        </label>
+        <label class="sat-control-row">
+          <span>{t.tone}</span>
+          <strong><output data-frequency-label>520</output>{t.hertzUnit}</strong>
+          <input data-frequency type="range" min="220" max="1200" step="10" value="520" />
+        </label>
+      </div>
+
+      <label class="sat-loop">
+        <input data-loop type="checkbox" />
+        <span>
+          <strong>{t.infiniteMode}</strong>
+          <em>{t.infiniteModeHint}</em>
+        </span>
+      </label>
+
+      <div class="sat-readout">
+        <span>{t.balance}</span>
+        <strong data-status>{t.activeIdle}</strong>
+        <meter min="-1" max="1" low="-0.65" high="0.65" optimum="0" value="0" data-meter></meter>
+      </div>
+      <p>{t.safety}</p>
+    </div>
+  </section>
+</div>
+
+<link rel="stylesheet" href="./stereo-audio-test.css" />
+
+<script>
+  type Channel = 'left' | 'center' | 'right' | 'sweep';
+  interface Config {
+    left: string;
+    center: string;
+    right: string;
+    sweep: string;
+    stop: string;
+    activeIdle: string;
+    activeLeft: string;
+    activeCenter: string;
+    activeRight: string;
+    activeSweep: string;
+    secondsUnit: string;
+  }
+
+  const root = document.querySelector<HTMLElement>('.sat-root');
+  const config = JSON.parse(root?.dataset.config ?? '{}') as Config;
+  const audioState: {
+    context?: AudioContext;
+    oscillator?: OscillatorNode;
+    gain?: GainNode;
+    stopTimer?: number;
+    sweepTimer?: number;
+  } = {};
+  const els = {
+    dot: root?.querySelector<HTMLElement>('[data-dot]'),
+    meter: root?.querySelector<HTMLMeterElement>('[data-meter]'),
+    status: root?.querySelector<HTMLElement>('[data-status]'),
+    volume: root?.querySelector<HTMLInputElement>('[data-volume]'),
+    volumeLabel: root?.querySelector<HTMLElement>('[data-volume-label]'),
+    duration: root?.querySelector<HTMLInputElement>('[data-duration]'),
+    durationControl: root?.querySelector<HTMLElement>('[data-duration-control]'),
+    durationLabel: root?.querySelector<HTMLOutputElement>('[data-duration-label]'),
+    frequency: root?.querySelector<HTMLInputElement>('[data-frequency]'),
+    frequencyLabel: root?.querySelector<HTMLOutputElement>('[data-frequency-label]'),
+    loop: root?.querySelector<HTMLInputElement>('[data-loop]'),
+  };
+
+  function ensureContext() {
+    audioState.context ??= new AudioContext();
+    return audioState.context;
+  }
+
+  function play(channel: Channel) {
+    stop();
+    const context = ensureContext();
+    const oscillator = context.createOscillator();
+    const gain = context.createGain();
+    const panner = context.createStereoPanner();
+    const duration = readNumber(els.duration, 3);
+    const volume = readNumber(els.volume, 24) / 100;
+    const frequency = readNumber(els.frequency, 520);
+
+    oscillator.type = 'sine';
+    oscillator.frequency.value = frequency;
+    gain.gain.setValueAtTime(0.0001, context.currentTime);
+    gain.gain.exponentialRampToValueAtTime(Math.max(0.0001, volume), context.currentTime + 0.03);
+    oscillator.connect(gain).connect(panner).connect(context.destination);
+    oscillator.start();
+    audioState.oscillator = oscillator;
+    audioState.gain = gain;
+
+    const shouldLoop = Boolean(els.loop?.checked);
+    if (channel === 'sweep') {
+      runSweep(panner, duration);
+    } else {
+      setPan(panner, getPan(channel));
+    }
+    if (!shouldLoop) {
+      gain.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + duration);
+      oscillator.stop(context.currentTime + duration + 0.05);
+      audioState.stopTimer = window.setTimeout(stop, (duration + 0.08) * 1000);
+    }
+    setStatus(channel);
+  }
+
+  function runSweep(panner: StereoPannerNode, duration: number) {
+    const start = performance.now();
+    const tick = (now: number) => {
+      const progress = ((now - start) % (duration * 1000)) / (duration * 1000);
+      const pan = Math.sin(progress * Math.PI * 2);
+      setPan(panner, pan);
+      audioState.sweepTimer = requestAnimationFrame(tick);
+    };
+    audioState.sweepTimer = requestAnimationFrame(tick);
+  }
+
+  function setPan(panner: StereoPannerNode, pan: number) {
+    panner.pan.value = pan;
+    root?.style.setProperty('--sat-pan', String(pan));
+    els.meter!.value = pan;
+  }
+
+  function getPan(channel: Channel) {
+    if (channel === 'left') return -1;
+    if (channel === 'right') return 1;
+    return 0;
+  }
+
+  function stop() {
+    if (audioState.stopTimer) window.clearTimeout(audioState.stopTimer);
+    if (audioState.sweepTimer) cancelAnimationFrame(audioState.sweepTimer);
+    if (audioState.oscillator) {
+      try {
+        audioState.oscillator.stop();
+      } catch {
+      }
+      audioState.oscillator = undefined;
+    }
+    audioState.gain = undefined;
+    root?.style.setProperty('--sat-pan', '0');
+    if (els.meter) els.meter.value = 0;
+    if (els.status) els.status.textContent = config.activeIdle;
+  }
+
+  function setStatus(channel: Channel) {
+    const labels = {
+      left: config.activeLeft,
+      center: config.activeCenter,
+      right: config.activeRight,
+      sweep: config.activeSweep,
+    };
+    if (els.status) els.status.textContent = labels[channel];
+  }
+
+  function readNumber(input: HTMLInputElement | null | undefined, fallback: number) {
+    return input ? Number(input.value) : fallback;
+  }
+
+  function syncLabels() {
+    if (els.volumeLabel && els.volume) els.volumeLabel.textContent = `${els.volume.value}%`;
+    if (els.durationLabel && els.duration) els.durationLabel.textContent = els.duration.value;
+    if (els.frequencyLabel && els.frequency) els.frequencyLabel.textContent = els.frequency.value;
+    syncLoopState();
+    updateActiveVolume();
+  }
+
+  function syncLoopState() {
+    const isLooping = Boolean(els.loop?.checked);
+    if (els.duration) els.duration.disabled = isLooping;
+    els.durationControl?.classList.toggle('is-disabled', isLooping);
+  }
+
+  function updateActiveVolume() {
+    if (!audioState.context || !audioState.gain || !els.volume) return;
+    const volume = Math.max(0.0001, Number(els.volume.value) / 100);
+    audioState.gain.gain.setTargetAtTime(volume, audioState.context.currentTime, 0.015);
+  }
+
+  root?.querySelectorAll<HTMLButtonElement>('[data-play]').forEach((button) => {
+    button.addEventListener('click', () => play(button.dataset.play as Channel));
+  });
+  root?.querySelector<HTMLButtonElement>('[data-stop]')?.addEventListener('click', stop);
+  [els.volume, els.duration, els.frequency].forEach((input) => input?.addEventListener('input', syncLabels));
+  els.loop?.addEventListener('change', syncLabels);
+  syncLabels();
+</script>

package/src/tool/stereoAudioTest/entry.ts

@@ -0,0 +1,29 @@
+import type { HardwareToolEntry, ToolLocaleContent } from '../../types';
+import type { StereoAudioTestUI } from './ui';
+
+export type StereoAudioTestLocaleContent = ToolLocaleContent<StereoAudioTestUI>;
+
+export const stereoAudioTest: HardwareToolEntry<StereoAudioTestUI> = {
+  id: 'stereo-audio-test',
+  icons: {
+    bg: 'mdi:speaker-multiple',
+    fg: 'mdi:surround-sound',
+  },
+  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),
+  },
+};