@jjlmoya/utils-hardware 1.11.0 → 1.13.0

package/src/tool/toneGenerator/component.astro

@@ -16,68 +16,7 @@ const S = JSON.stringify({ bp: t.btnPlay, bs: t.btnStop });
 
 <div id="tg-root" class="tg-wrapper" data-s={S}>
 
-  <style is:global>
-    .tg-wrapper {
-      --tg-accent: #e11d48;
-      --tg-accent-glow: rgba(225, 29, 72, 0.3);
-      --tg-canvas-line: #f43f5e;
-      --tg-btn-bg: #e11d48;
-      --tg-btn-stop-bg: #1e293b;
-      --tg-surface: #fff;
-      --tg-surface-alt: #f8fafc;
-      --tg-border: #e2e8f0;
-      --tg-text: #0f172a;
-      --tg-text-muted: #64748b;
-      --tg-text-faint: #94a3b8;
-    }
-
-    .theme-dark .tg-wrapper {
-      --tg-btn-stop-bg: #27272a;
-      --tg-surface: #09090b;
-      --tg-surface-alt: #18181b;
-      --tg-border: #27272a;
-      --tg-text: #fafafa;
-      --tg-text-muted: #a1a1aa;
-      --tg-text-faint: #52525b;
-    }
-
-    .tg-wave-btn[data-active='true'] {
-      background: var(--tg-accent);
-      color: #fff;
-      box-shadow: 0 4px 14px var(--tg-accent-glow);
-    }
-
-    #tg-toggle[data-playing='true'] {
-      background: var(--tg-btn-stop-bg);
-      box-shadow: none;
-    }
-
-    #tg-play-icon {
-      display: inline-flex;
-    }
-
-    #tg-stop-icon {
-      display: none;
-    }
-
-    #tg-toggle[data-playing='true'] #tg-play-icon {
-      display: none;
-    }
-
-    #tg-toggle[data-playing='true'] #tg-stop-icon {
-      display: inline-flex;
-    }
-
-    @keyframes tg-pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.4; }
-    }
-
-    body.is-widget .tg-wrapper {
-      padding: 0;
-    }
-  </style>
-
+  
   <div class="tg-card">
 
     <div class="tg-header">
@@ -155,274 +94,7 @@ const S = JSON.stringify({ bp: t.btnPlay, bs: t.btnStop });
     </div>
   </div>
 
-  <style>
-    .tg-wrapper {
-      width: 100%;
-      color: var(--tg-text);
-    }
-
-    .tg-card {
-      background: var(--tg-surface);
-      border: 1px solid var(--tg-border);
-      border-radius: 1.5rem;
-      padding: 2rem;
-      display: flex;
-      flex-direction: column;
-      gap: 2rem;
-    }
-
-    .tg-header {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-    }
-
-    .tg-icon-wrap {
-      flex-shrink: 0;
-      padding: 0.75rem;
-      background: rgba(225, 29, 72, 0.1);
-      color: var(--tg-accent);
-      border-radius: 1rem;
-    }
-
-    .tg-icon {
-      width: 2rem;
-      height: 2rem;
-    }
-
-    .tg-header-text {
-      display: flex;
-      flex-direction: column;
-      gap: 0.125rem;
-    }
-
-    .tg-badge {
-      display: inline-block;
-      font-size: 0.625rem;
-      font-weight: 900;
-      text-transform: uppercase;
-      letter-spacing: 0.12em;
-      color: var(--tg-accent);
-      background: rgba(225, 29, 72, 0.08);
-      border: 1px solid rgba(225, 29, 72, 0.2);
-      padding: 0.2rem 0.6rem;
-      border-radius: 9999px;
-      width: fit-content;
-    }
-
-    .tg-title {
-      font-size: 1.75rem;
-      font-weight: 900;
-      letter-spacing: -0.02em;
-      margin: 0;
-      color: var(--tg-text);
-    }
-
-    .tg-desc {
-      font-size: 0.875rem;
-      color: var(--tg-text-muted);
-      margin: 0;
-    }
-
-    .tg-canvas-wrap {
-      position: relative;
-      width: 100%;
-      height: 12rem;
-      background: #000;
-      border-radius: 1rem;
-      overflow: hidden;
-      border: 1px solid #111;
-    }
-
-    .tg-canvas {
-      width: 100%;
-      height: 100%;
-    }
-
-    .tg-hz-display {
-      position: absolute;
-      top: 1rem;
-      right: 1rem;
-      font-size: 0.75rem;
-      color: #f43f5e;
-      letter-spacing: 0.05em;
-      animation: tg-pulse 2s ease-in-out infinite;
-    }
-
-    .tg-controls {
-      display: flex;
-      flex-direction: column;
-      gap: 2rem;
-    }
-
-    .tg-section {
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-    }
-
-    .tg-section-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .tg-label {
-      font-size: 0.7rem;
-      font-weight: 800;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      color: var(--tg-text-muted);
-    }
-
-    .tg-presets {
-      display: flex;
-      gap: 0.375rem;
-    }
-
-    .tg-preset {
-      padding: 0.25rem 0.5rem;
-      background: var(--tg-surface-alt);
-      border: 1px solid var(--tg-border);
-      border-radius: 0.375rem;
-      font-size: 0.75rem;
-      color: var(--tg-text-muted);
-      cursor: pointer;
-      transition: background 150ms, color 150ms;
-    }
-
-    .tg-preset:hover {
-      background: var(--tg-border);
-      color: var(--tg-text);
-    }
-
-    .tg-slider {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 100%;
-      height: 6px;
-      background: var(--tg-border);
-      border-radius: 3px;
-      outline: none;
-      accent-color: var(--tg-accent);
-    }
-
-    .tg-slider::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 18px;
-      height: 18px;
-      background: var(--tg-accent);
-      border-radius: 50%;
-      cursor: pointer;
-      border: 4px solid var(--tg-surface);
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-    }
-
-    .tg-range-hints {
-      display: flex;
-      justify-content: space-between;
-      font-size: 0.625rem;
-      color: var(--tg-text-faint);
-      letter-spacing: 0.02em;
-    }
-
-    .tg-two-col {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 2rem;
-    }
-
-    @media (max-width: 640px) {
-      .tg-two-col {
-        grid-template-columns: 1fr;
-      }
-    }
-
-    .tg-wave-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 0.5rem;
-    }
-
-    .tg-wave-btn {
-      padding: 0.75rem;
-      border-radius: 0.75rem;
-      background: var(--tg-surface-alt);
-      border: 1px solid var(--tg-border);
-      color: var(--tg-text-muted);
-      cursor: pointer;
-      transition: background 150ms, color 150ms, box-shadow 150ms;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .tg-wave-btn:hover {
-      background: var(--tg-border);
-      color: var(--tg-text);
-    }
-
-    .tg-wave-icon {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-
-    .tg-vol-row {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      background: var(--tg-surface-alt);
-      border: 1px solid var(--tg-border);
-      border-radius: 0.75rem;
-      padding: 0.75rem;
-    }
-
-    .tg-vol-icon {
-      width: 1.25rem;
-      height: 1.25rem;
-      color: var(--tg-text-faint);
-      flex-shrink: 0;
-    }
-
-    .tg-vol-slider {
-      height: 4px;
-    }
-
-    .tg-toggle-btn {
-      width: 100%;
-      padding: 1.5rem;
-      border-radius: 1rem;
-      background: var(--tg-btn-bg);
-      border: none;
-      color: #fff;
-      font-size: 1.125rem;
-      font-weight: 900;
-      letter-spacing: 0.05em;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 0.75rem;
-      box-shadow: 0 8px 24px var(--tg-accent-glow);
-      transition: background 200ms, box-shadow 200ms, transform 100ms;
-    }
-
-    .tg-toggle-btn:active {
-      transform: scale(0.98);
-    }
-
-    .tg-btn-icon {
-      display: inherit;
-      align-items: center;
-    }
-
-    .tg-toggle-icon {
-      width: 1.75rem;
-      height: 1.75rem;
-    }
-  </style>
-
+  
   <script>
     const root = document.getElementById('tg-root');
     const S: Record<string, string> = JSON.parse(root?.dataset?.s ?? '{}');

package/src/tool/toneGenerator/entry.ts

@@ -0,0 +1,30 @@
+import type { HardwareToolEntry, ToolLocaleContent } from '../../types';
+
+
+import type { ToneGeneratorUI } from './ui';
+export type ToneGeneratorLocaleContent = ToolLocaleContent<ToneGeneratorUI>;
+
+export const toneGenerator: HardwareToolEntry<ToneGeneratorUI> = {
+  id: 'generador-tonos',
+  icons: {
+    bg: 'mdi:sine-wave',
+    fg: 'mdi:waveform',
+  },
+  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),
+  },
+};

package/src/tool/toneGenerator/index.ts

@@ -1,35 +1,5 @@
-import type { HardwareToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
-
-
-import type { ToneGeneratorUI } from './ui';
-export type ToneGeneratorLocaleContent = ToolLocaleContent<ToneGeneratorUI>;
-
-export const toneGenerator: HardwareToolEntry<ToneGeneratorUI> = {
-  id: 'generador-tonos',
-  icons: {
-    bg: 'mdi:sine-wave',
-    fg: 'mdi:waveform',
-  },
-  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),
-  },
-};
-
-
+import { toneGenerator } from './entry';
+export * from './entry';
 export const TONE_GENERATOR_TOOL: ToolDefinition = {
   entry: toneGenerator,
   Component: () => import('./component.astro'),

package/src/tool/toneGenerator/tone-frequency-generator.css

@@ -0,0 +1,265 @@
+.tg-wrapper {
+      width: 100%;
+      color: var(--tg-text);
+    }
+
+    .tg-card {
+      background: var(--tg-surface);
+      border: 1px solid var(--tg-border);
+      border-radius: 1.5rem;
+      padding: 2rem;
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+    }
+
+    .tg-header {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+    }
+
+    .tg-icon-wrap {
+      flex-shrink: 0;
+      padding: 0.75rem;
+      background: rgba(225, 29, 72, 0.1);
+      color: var(--tg-accent);
+      border-radius: 1rem;
+    }
+
+    .tg-icon {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    .tg-header-text {
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+    }
+
+    .tg-badge {
+      display: inline-block;
+      font-size: 0.625rem;
+      font-weight: 900;
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+      color: var(--tg-accent);
+      background: rgba(225, 29, 72, 0.08);
+      border: 1px solid rgba(225, 29, 72, 0.2);
+      padding: 0.2rem 0.6rem;
+      border-radius: 9999px;
+      width: fit-content;
+    }
+
+    .tg-title {
+      font-size: 1.75rem;
+      font-weight: 900;
+      letter-spacing: -0.02em;
+      margin: 0;
+      color: var(--tg-text);
+    }
+
+    .tg-desc {
+      font-size: 0.875rem;
+      color: var(--tg-text-muted);
+      margin: 0;
+    }
+
+    .tg-canvas-wrap {
+      position: relative;
+      width: 100%;
+      height: 12rem;
+      background: #000;
+      border-radius: 1rem;
+      overflow: hidden;
+      border: 1px solid #111;
+    }
+
+    .tg-canvas {
+      width: 100%;
+      height: 100%;
+    }
+
+    .tg-hz-display {
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      font-size: 0.75rem;
+      color: #f43f5e;
+      letter-spacing: 0.05em;
+      animation: tg-pulse 2s ease-in-out infinite;
+    }
+
+    .tg-controls {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+    }
+
+    .tg-section {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .tg-section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .tg-label {
+      font-size: 0.7rem;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      color: var(--tg-text-muted);
+    }
+
+    .tg-presets {
+      display: flex;
+      gap: 0.375rem;
+    }
+
+    .tg-preset {
+      padding: 0.25rem 0.5rem;
+      background: var(--tg-surface-alt);
+      border: 1px solid var(--tg-border);
+      border-radius: 0.375rem;
+      font-size: 0.75rem;
+      color: var(--tg-text-muted);
+      cursor: pointer;
+      transition: background 150ms, color 150ms;
+    }
+
+    .tg-preset:hover {
+      background: var(--tg-border);
+      color: var(--tg-text);
+    }
+
+    .tg-slider {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 100%;
+      height: 6px;
+      background: var(--tg-border);
+      border-radius: 3px;
+      outline: none;
+      accent-color: var(--tg-accent);
+    }
+
+    .tg-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 18px;
+      height: 18px;
+      background: var(--tg-accent);
+      border-radius: 50%;
+      cursor: pointer;
+      border: 4px solid var(--tg-surface);
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    }
+
+    .tg-range-hints {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.625rem;
+      color: var(--tg-text-faint);
+      letter-spacing: 0.02em;
+    }
+
+    .tg-two-col {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 2rem;
+    }
+
+    @media (max-width: 640px) {
+      .tg-two-col {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .tg-wave-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 0.5rem;
+    }
+
+    .tg-wave-btn {
+      padding: 0.75rem;
+      border-radius: 0.75rem;
+      background: var(--tg-surface-alt);
+      border: 1px solid var(--tg-border);
+      color: var(--tg-text-muted);
+      cursor: pointer;
+      transition: background 150ms, color 150ms, box-shadow 150ms;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .tg-wave-btn:hover {
+      background: var(--tg-border);
+      color: var(--tg-text);
+    }
+
+    .tg-wave-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    .tg-vol-row {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      background: var(--tg-surface-alt);
+      border: 1px solid var(--tg-border);
+      border-radius: 0.75rem;
+      padding: 0.75rem;
+    }
+
+    .tg-vol-icon {
+      width: 1.25rem;
+      height: 1.25rem;
+      color: var(--tg-text-faint);
+      flex-shrink: 0;
+    }
+
+    .tg-vol-slider {
+      height: 4px;
+    }
+
+    .tg-toggle-btn {
+      width: 100%;
+      padding: 1.5rem;
+      border-radius: 1rem;
+      background: var(--tg-btn-bg);
+      border: none;
+      color: #fff;
+      font-size: 1.125rem;
+      font-weight: 900;
+      letter-spacing: 0.05em;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.75rem;
+      box-shadow: 0 8px 24px var(--tg-accent-glow);
+      transition: background 200ms, box-shadow 200ms, transform 100ms;
+    }
+
+    .tg-toggle-btn:active {
+      transform: scale(0.98);
+    }
+
+    .tg-btn-icon {
+      display: inherit;
+      align-items: center;
+    }
+
+    .tg-toggle-icon {
+      width: 1.75rem;
+      height: 1.75rem;
+    }

package/src/tools.ts

@@ -1,3 +1,4 @@
+export { ALL_ENTRIES } from './entries';
 import type { ToolDefinition } from './types';
 import { PIXELES_PANTALLA_TOOL } from './tool/deadPixelTest/index';
 import { TEST_TECLADO_TOOL } from './tool/keyboardTest/index';
@@ -9,4 +10,3 @@ import { TONE_GENERATOR_TOOL } from './tool/toneGenerator/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];
 
-export const ALL_ENTRIES = ALL_TOOLS.map(t => t.entry);