@jjlmoya/utils-hardware 1.18.0 → 1.20.0

package/src/tool/mouseDoubleClickTest/mouse-double-click-test.css

@@ -0,0 +1,488 @@
+.mdct-root {
+  --mdct-ink: #111827;
+  --mdct-muted: #667085;
+  --mdct-panel: #f8fafc;
+  --mdct-line: rgba(102, 112, 133, 0.18);
+  --mdct-line-strong: rgba(102, 112, 133, 0.32);
+  --mdct-blue: #2f86ff;
+  --mdct-green: #00a878;
+  --mdct-red: #e83f64;
+  --mdct-violet: #7c5cff;
+  --mdct-mouse: #d9e0ea;
+  --mdct-mouse-hi: #f2f5f9;
+  --mdct-button-bg: rgba(17, 24, 39, 0.035);
+  --mdct-button-border: rgba(17, 24, 39, 0.09);
+  --mdct-grid: rgba(47, 134, 255, 0.065);
+  --mdct-target-text: rgba(17, 24, 39, 0.64);
+  --mdct-chip-bg: rgba(17, 24, 39, 0.025);
+  --mdct-card-highlight: rgba(255, 255, 255, 0.8);
+  --mdct-shadow: rgba(16, 24, 40, 0.18);
+
+  width: 100%;
+  color: var(--mdct-ink);
+}
+
+.mdct-root *,
+.mdct-root *::before,
+.mdct-root *::after {
+  box-sizing: border-box;
+}
+
+.mdct-card {
+  width: min(100%, 62rem);
+  margin: 0 auto;
+  padding: 1.35rem;
+  border: 1px solid var(--mdct-line);
+  border-radius: 1.25rem;
+  background: var(--mdct-panel);
+  box-shadow: 0 24px 70px -42px var(--mdct-shadow), inset 0 1px 0 var(--mdct-card-highlight);
+  overflow: hidden;
+}
+
+.mdct-stage {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1.25rem;
+}
+
+.mdct-target {
+  min-height: 22rem;
+  border: 0;
+  background:
+    radial-gradient(circle at 50% 44%, rgba(47, 134, 255, 0.09), transparent 12rem),
+    linear-gradient(var(--mdct-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--mdct-grid) 1px, transparent 1px);
+  background-size: auto, 4rem 4rem, 4rem 4rem;
+  color: #fff;
+  cursor: crosshair;
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  position: relative;
+  overflow: hidden;
+  touch-action: none;
+}
+
+.mdct-target[data-flash='clean'] {
+  background:
+    radial-gradient(circle at 50% 44%, rgba(20, 214, 155, 0.16), transparent 12rem),
+    linear-gradient(var(--mdct-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--mdct-grid) 1px, transparent 1px);
+  background-size: auto, 4rem 4rem, 4rem 4rem;
+}
+
+.mdct-target[data-flash='warning'] {
+  background:
+    radial-gradient(circle at 50% 44%, rgba(255, 63, 109, 0.18), transparent 12rem),
+    linear-gradient(var(--mdct-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--mdct-grid) 1px, transparent 1px);
+  background-size: auto, 4rem 4rem, 4rem 4rem;
+}
+
+.mdct-mouse {
+  width: min(72vw, 22rem);
+  aspect-ratio: 0.78;
+  position: relative;
+  display: block;
+  border-radius: 48% 48% 42% 42% / 31% 31% 56% 56%;
+  background:
+    linear-gradient(90deg, transparent calc(50% - 1px), rgba(17, 24, 39, 0.1) calc(50% - 1px), rgba(17, 24, 39, 0.1) calc(50% + 1px), transparent calc(50% + 1px)),
+    linear-gradient(145deg, var(--mdct-mouse-hi), var(--mdct-mouse));
+  box-shadow:
+    0 2rem 4rem rgba(16, 24, 40, 0.14),
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    inset 0 -3rem 4rem rgba(102, 112, 133, 0.12);
+}
+
+.mdct-cable {
+  position: absolute;
+  left: 50%;
+  bottom: 99%;
+  width: 0.2rem;
+  height: 4.2rem;
+  background: linear-gradient(transparent, rgba(102, 112, 133, 0.28));
+  transform: translateX(-50%);
+}
+
+.mdct-button {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--mdct-button-border);
+  background: var(--mdct-button-bg);
+  color: var(--mdct-muted);
+  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
+}
+
+.mdct-button::before {
+  content: attr(data-label);
+  font-size: 0.62rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.mdct-button::after {
+  content: attr(data-count);
+  position: absolute;
+  right: 0.55rem;
+  bottom: 0.45rem;
+  color: var(--mdct-blue);
+  font-size: 0.82rem;
+  font-weight: 950;
+}
+
+.mdct-button[data-count='0']::after {
+  color: rgba(102, 112, 133, 0.32);
+}
+
+.mdct-button[data-flash='clean'] {
+  background: rgba(20, 214, 155, 0.18);
+  border-color: rgba(20, 214, 155, 0.42);
+  color: var(--mdct-green);
+}
+
+.mdct-button[data-flash='warning'],
+.mdct-button[data-state='warning'] {
+  background: rgba(255, 63, 109, 0.16);
+  border-color: rgba(255, 63, 109, 0.42);
+  color: var(--mdct-red);
+}
+
+.mdct-left,
+.mdct-right {
+  top: 1rem;
+  width: calc(50% - 0.75rem);
+  height: 34%;
+}
+
+.mdct-left {
+  left: 0.75rem;
+  border-radius: 7rem 0.8rem 0.7rem 1.4rem;
+}
+
+.mdct-right {
+  right: 0.75rem;
+  border-radius: 0.8rem 7rem 1.4rem 0.7rem;
+}
+
+.mdct-middle {
+  left: 50%;
+  top: 1.35rem;
+  width: 1.1rem;
+  height: 4.1rem;
+  border-radius: 999rem;
+  background: linear-gradient(var(--mdct-blue), var(--mdct-violet));
+  border-color: rgba(47, 134, 255, 0.45);
+  box-shadow: 0 0 1.3rem rgba(47, 134, 255, 0.28);
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+.mdct-middle::before {
+  writing-mode: vertical-rl;
+  font-size: 0.48rem;
+  color: white;
+}
+
+.mdct-middle::after {
+  right: 50%;
+  bottom: -1.35rem;
+  transform: translateX(50%);
+}
+
+.mdct-back,
+.mdct-forward {
+  left: -0.42rem;
+  width: 3.2rem;
+  height: 2.35rem;
+  border-radius: 999rem;
+  background: rgba(47, 134, 255, 0.08);
+}
+
+.mdct-back {
+  top: 39%;
+}
+
+.mdct-forward {
+  top: 51%;
+}
+
+.mdct-palm {
+  position: absolute;
+  left: 18%;
+  right: 18%;
+  bottom: 13%;
+  height: 38%;
+  border-radius: 50%;
+  border: 1px solid rgba(102, 112, 133, 0.13);
+  background: radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.28), transparent 62%);
+}
+
+.mdct-target-copy {
+  display: grid;
+  gap: 0.35rem;
+  margin-top: 1.1rem;
+  text-align: center;
+}
+
+.mdct-target-kicker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  color: var(--mdct-muted);
+  font-size: 0.68rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.mdct-target-icon {
+  width: 0.95rem;
+  height: 0.95rem;
+}
+
+.mdct-target strong {
+  color: var(--mdct-ink);
+  font-size: 0.9rem;
+  font-weight: 950;
+}
+
+.mdct-target small {
+  color: var(--mdct-target-text);
+  font-size: 0.75rem;
+  font-weight: 800;
+}
+
+.mdct-dashboard {
+  display: grid;
+  align-content: start;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.mdct-readout,
+.mdct-metrics,
+.mdct-threshold,
+.mdct-speed-row {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--mdct-line);
+}
+
+.mdct-readout {
+  display: grid;
+  gap: 0.2rem;
+}
+
+.mdct-readout span,
+.mdct-threshold span,
+.mdct-speed-row span,
+.mdct-log-head span,
+.mdct-metric span {
+  color: var(--mdct-muted);
+  font-size: 0.72rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.mdct-readout strong {
+  color: var(--mdct-violet);
+  font-size: clamp(2.4rem, 6vw, 3.2rem);
+  font-weight: 950;
+  line-height: 0.95;
+}
+
+.mdct-readout small {
+  color: var(--mdct-green);
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.mdct-readout small[data-state='warning'] {
+  color: var(--mdct-red);
+}
+
+.mdct-metrics,
+.mdct-speed-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.mdct-metric,
+.mdct-speed-row div {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.mdct-metric strong {
+  font-size: 1.35rem;
+  line-height: 1;
+}
+
+.mdct-metric-total strong,
+.mdct-threshold b {
+  color: var(--mdct-blue);
+}
+
+.mdct-metric-alert strong {
+  color: var(--mdct-red);
+}
+
+.mdct-threshold {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.65rem;
+  align-items: center;
+}
+
+.mdct-threshold input {
+  grid-column: 1 / -1;
+  width: 100%;
+  accent-color: var(--mdct-blue);
+}
+
+.mdct-threshold b {
+  font-size: 0.82rem;
+}
+
+.mdct-speed-row strong {
+  color: var(--mdct-ink);
+  font-size: 1rem;
+}
+
+.mdct-log-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.mdct-reset {
+  border: 1px solid var(--mdct-line-strong);
+  border-radius: 0.45rem;
+  padding: 0.52rem 1rem;
+  background: transparent;
+  color: var(--mdct-muted);
+  font-size: 0.78rem;
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.mdct-reset:hover {
+  border-color: var(--mdct-blue);
+  color: var(--mdct-blue);
+}
+
+.mdct-log {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.mdct-log-item,
+.mdct-empty {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.42rem;
+  min-height: 1.85rem;
+  padding: 0.35rem 0.55rem;
+  border: 1px solid var(--mdct-line);
+  border-radius: 999rem;
+  background: var(--mdct-chip-bg);
+  font-size: 0.72rem;
+  font-weight: 900;
+}
+
+.mdct-log-item.clean b {
+  color: var(--mdct-green);
+}
+
+.mdct-log-item.suspect b {
+  color: var(--mdct-red);
+}
+
+.mdct-log-item span,
+.mdct-log-item em,
+.mdct-empty {
+  color: var(--mdct-muted);
+}
+
+.mdct-log-item em {
+  font-style: normal;
+  opacity: 0.76;
+}
+
+@media (min-width: 780px) {
+  .mdct-card {
+    padding: 1.4rem;
+  }
+
+  .mdct-stage {
+    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.72fr);
+    align-items: stretch;
+  }
+
+  .mdct-target {
+    min-height: 27rem;
+  }
+}
+
+@media (max-width: 520px) {
+  .mdct-card {
+    padding: 1rem;
+  }
+
+  .mdct-target {
+    min-height: 22rem;
+  }
+
+  .mdct-mouse {
+    width: min(78vw, 18rem);
+  }
+}
+
+body.is-widget .mdct-card {
+  width: 100%;
+}
+
+.theme-dark .mdct-root {
+  --mdct-ink: #f5f7fb;
+  --mdct-muted: #8f97a8;
+  --mdct-panel: #11151c;
+  --mdct-line: rgba(145, 154, 174, 0.2);
+  --mdct-line-strong: rgba(145, 154, 174, 0.34);
+  --mdct-green: #14d69b;
+  --mdct-red: #ff3f6d;
+  --mdct-violet: #9c7bff;
+  --mdct-mouse: #1a202b;
+  --mdct-mouse-hi: #252c39;
+  --mdct-button-bg: rgba(255, 255, 255, 0.045);
+  --mdct-button-border: rgba(255, 255, 255, 0.08);
+  --mdct-grid: rgba(47, 134, 255, 0.035);
+  --mdct-target-text: rgba(245, 247, 251, 0.68);
+  --mdct-chip-bg: rgba(255, 255, 255, 0.025);
+  --mdct-card-highlight: rgba(255, 255, 255, 0.035);
+  --mdct-shadow: rgba(0, 0, 0, 0.5);
+}
+
+.theme-dark .mdct-mouse {
+  background:
+    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.12) calc(50% - 1px), rgba(255, 255, 255, 0.12) calc(50% + 1px), transparent calc(50% + 1px)),
+    linear-gradient(145deg, var(--mdct-mouse-hi), var(--mdct-mouse));
+  box-shadow:
+    0 2rem 4rem rgba(0, 0, 0, 0.32),
+    inset 0 1px 0 rgba(255, 255, 255, 0.11),
+    inset 0 -3rem 4rem rgba(0, 0, 0, 0.24);
+}
+
+.theme-dark .mdct-cable {
+  background: linear-gradient(transparent, rgba(143, 151, 168, 0.32));
+}
+
+.theme-dark .mdct-palm {
+  border-color: rgba(143, 151, 168, 0.11);
+  background: radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.04), transparent 62%);
+}

package/src/tool/mouseDoubleClickTest/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { mouseDoubleClickTest } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await mouseDoubleClickTest.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/mouseDoubleClickTest/ui.ts

@@ -0,0 +1,26 @@
+export interface MouseDoubleClickTestUI extends Record<string, string> {
+  badge: string;
+  clickTarget: string;
+  clickTargetHint: string;
+  totalClicks: string;
+  suspiciousClicks: string;
+  fastestGap: string;
+  healthScore: string;
+  thresholdLabel: string;
+  thresholdUnit: string;
+  cleanEvent: string;
+  suspiciousEvent: string;
+  reset: string;
+  statusIdle: string;
+  statusClean: string;
+  statusWarning: string;
+  lastGap: string;
+  logTitle: string;
+  emptyLog: string;
+  leftButton: string;
+  middleButton: string;
+  rightButton: string;
+  backButton: string;
+  forwardButton: string;
+  otherButton: string;
+}

package/src/tool/mousePollingTest/logic/RatonManager.ts

@@ -83,19 +83,19 @@ export class RatonManager {
   }
 
   private updateUI(hz: number, avg: number): void {
-    const { max, avg: avgEl, placeholder } = this.el;
+    const { max, avg: avgEl, placeholder, area } = this.el;
+    const rect = area?.getBoundingClientRect();
     if (max) max.textContent = Math.round(this.maxHz).toString();
     if (avgEl) avgEl.textContent = Math.round(avg).toString();
     if (placeholder) placeholder.style.opacity = '0';
-    this.updateFollower(hz);
+    this.updateFollower(hz, rect);
     this.updateGraph();
   }
 
-  private updateFollower(hz: number): void {
-    const { follower, area } = this.el;
-    if (!follower || !this.lastMouseEvent || !area) return;
+  private updateFollower(hz: number, rect: DOMRect | undefined): void {
+    const { follower } = this.el;
+    if (!follower || !this.lastMouseEvent || !rect) return;
     follower.textContent = `${Math.round(hz)} Hz`;
-    const rect = area.getBoundingClientRect();
     const x: number = this.lastMouseEvent.clientX - rect.left + 15;
     const y: number = this.lastMouseEvent.clientY - rect.top + 15;
     follower.style.transform = `translate(${x}px, ${y}px)`;

package/src/tool/toneGenerator/component.astro

@@ -39,7 +39,7 @@ const S = JSON.stringify({ bp: t.btnPlay, bs: t.btnStop });
 
       <div class="tg-section">
         <div class="tg-section-header">
-          <label class="tg-label">{t.freqLabel}</label>
+          <label class="tg-label" for="tg-freq">{t.freqLabel}</label>
           <div class="tg-presets">
             <button class="tg-preset" data-val="60">{t.preset60}</button>
             <button class="tg-preset" data-val="440">{t.preset440}</button>
@@ -73,7 +73,7 @@ const S = JSON.stringify({ bp: t.btnPlay, bs: t.btnStop });
         </div>
 
         <div class="tg-section">
-          <label class="tg-label">{t.volLabel}</label>
+          <label class="tg-label" for="tg-vol">{t.volLabel}</label>
           <div class="tg-vol-row">
             <Icon name="mdi:volume-high" class="tg-vol-icon" />
             <input type="range" id="tg-vol" class="tg-slider tg-vol-slider" min="0" max="1" value="0.5" step="0.01" />
@@ -131,11 +131,6 @@ const S = JSON.stringify({ bp: t.btnPlay, bs: t.btnStop });
       return true;
     }
 
-    function updateUI(playing: boolean): void {
-      if (toggleBtn) toggleBtn.dataset.playing = playing ? 'true' : 'false';
-      if (btnText) btnText.textContent = playing ? BS : BP;
-    }
-
     function resizeCanvas(): void {
       if (!canvas) return;
       const parent = canvas.parentElement;
@@ -145,6 +140,11 @@ const S = JSON.stringify({ bp: t.btnPlay, bs: t.btnStop });
       if (canvas.height !== rect.height) canvas.height = rect.height;
     }
 
+    function updateUI(playing: boolean): void {
+      if (toggleBtn) toggleBtn.dataset.playing = playing ? 'true' : 'false';
+      if (btnText) btnText.textContent = playing ? BS : BP;
+    }
+
     function drawWave(w: number, h: number, data: Uint8Array): void {
       if (!canvasCtx) return;
       canvasCtx.fillStyle = 'rgb(0,0,0)';

package/src/tools.ts

@@ -9,6 +9,7 @@ import { ESTIMADOR_SALUD_BATERIA_TOOL } from './tool/batteryHealthEstimator/inde
 import { TONE_GENERATOR_TOOL } from './tool/toneGenerator/index';
 import { REFRESH_RATE_DETECTOR_TOOL } from './tool/refreshRateDetector/index';
 import { SPECTRUM_CANVAS_TOOL } from './tool/colorAccuracyTest/index';
+import { MOUSE_DOUBLE_CLICK_TEST_TOOL } from './tool/mouseDoubleClickTest/index';
+import { MONITOR_GHOSTING_TEST_TOOL } from './tool/monitorGhostingTest/index';
 
-export const ALL_TOOLS: ToolDefinition[] = [PIXELES_PANTALLA_TOOL, TEST_TECLADO_TOOL, TEST_MANDO_TOOL, PROBADOR_VIBRACION_MANDO_TOOL, TEST_RATON_TOOL, ESTIMADOR_SALUD_BATERIA_TOOL, TONE_GENERATOR_TOOL, REFRESH_RATE_DETECTOR_TOOL, SPECTRUM_CANVAS_TOOL];
-
+export const ALL_TOOLS: ToolDefinition[] = [PIXELES_PANTALLA_TOOL, TEST_TECLADO_TOOL, TEST_MANDO_TOOL, PROBADOR_VIBRACION_MANDO_TOOL, TEST_RATON_TOOL, MOUSE_DOUBLE_CLICK_TEST_TOOL, ESTIMADOR_SALUD_BATERIA_TOOL, TONE_GENERATOR_TOOL, REFRESH_RATE_DETECTOR_TOOL, MONITOR_GHOSTING_TEST_TOOL, SPECTRUM_CANVAS_TOOL];