@jjlmoya/utils-tools 1.1.0

package/src/tool/morse-beacon/component.astro

@@ -0,0 +1,534 @@
+---
+import type { KnownLocale } from '../../types';
+import type { MorseBeaconUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as MorseBeaconUI;
+---
+
+<div class="mb-root" data-ui={JSON.stringify(t)}>
+  <div class="mb-card">
+    <div class="mb-display">
+      <div id="mb-bulb" class="mb-bulb">
+        <svg id="mb-bulb-icon" width="40" height="40" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M11 21h2v1h-2zm1-19C7.86 2 4 5.86 4 10c0 2.76 1.4 5.19 3.54 6.66V19h9v-2.34C18.6 15.19 20 12.76 20 10c0-4.14-3.86-8-8-8zm1 17h-2v-1h2v1zm2.12-4.29A5.96 5.96 0 0115 10c0-1.65-.67-3.14-1.76-4.24L12 7l-1.24-1.24C9.67 6.86 9 8.35 9 10c0 1.45.52 2.78 1.38 3.81L11 15h2l.62-.81c.44-.52.82-1.1 1.1-1.74z"/>
+        </svg>
+      </div>
+
+      <div class="mb-ticker-wrap">
+        <div id="mb-ticker" class="mb-ticker"></div>
+      </div>
+
+      <div class="mb-status-badge">
+        <span id="mb-status-led" class="mb-status-led"></span>
+        <span id="mb-status-text" class="mb-status-text">{t.statusStandby}</span>
+      </div>
+    </div>
+
+    <div class="mb-controls">
+      <div class="mb-field">
+        <div class="mb-field-header">
+          <label for="mb-input" class="mb-field-label">{t.labelMessage}</label>
+          <span id="mb-char-count" class="mb-char-count">0/100</span>
+        </div>
+        <textarea
+          id="mb-input"
+          class="mb-textarea"
+          rows="2"
+          placeholder={t.placeholder}
+          maxlength="100"
+        ></textarea>
+      </div>
+
+      <div class="mb-btn-row">
+        <button id="mb-transmit-btn" class="mb-btn mb-btn-transmit">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+          </svg>
+          {t.btnTransmit}
+        </button>
+        <button id="mb-sos-btn" class="mb-btn mb-btn-sos">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+          </svg>
+          {t.btnSosLoop}
+        </button>
+      </div>
+
+      <div class="mb-extras">
+        <label class="mb-toggle-label" for="mb-torch">
+          <div class="mb-toggle-wrap">
+            <input type="checkbox" id="mb-torch" class="mb-toggle" checked />
+            <div class="mb-toggle-track"></div>
+          </div>
+          <span class="mb-toggle-text">{t.labelTorch}</span>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .mb-root {
+    --mb-accent: #16a34a;
+    --mb-accent-hover: #15803d;
+    --mb-sos-bg: #fff1f2;
+    --mb-sos-color: #e11d48;
+    --mb-sos-border: #fecdd3;
+    --mb-sos-hover-bg: #ffe4e6;
+    --mb-display-bg: #111827;
+    --mb-bulb-off: #1e293b;
+    --mb-bulb-border-off: #334155;
+    --mb-ticker-color: #4ade80;
+    --mb-status-bg: rgba(30, 41, 59, 0.8);
+    --mb-status-border: #334155;
+    --mb-card-bg: #fff;
+    --mb-card-border: #f1f5f9;
+    --mb-text-main: #1e293b;
+    --mb-text-label: #64748b;
+    --mb-text-hint: #94a3b8;
+    --mb-field-border: #e2e8f0;
+    --mb-field-focus: #16a34a;
+    --mb-extras-border: #f1f5f9;
+    --mb-toggle-off: #cbd5e1;
+
+    width: 100%;
+    max-width: 42rem;
+    margin: 0 auto;
+  }
+
+  :global(.theme-dark) .mb-root {
+    --mb-card-bg: #0f172a;
+    --mb-card-border: #1e293b;
+    --mb-text-main: #e2e8f0;
+    --mb-text-label: #94a3b8;
+    --mb-text-hint: #475569;
+    --mb-field-border: #334155;
+    --mb-sos-bg: rgba(225, 29, 72, 0.1);
+    --mb-sos-border: rgba(225, 29, 72, 0.2);
+    --mb-sos-hover-bg: rgba(225, 29, 72, 0.15);
+    --mb-extras-border: #1e293b;
+    --mb-toggle-off: #475569;
+  }
+
+  .mb-card {
+    border-radius: 1.5rem;
+    overflow: hidden;
+    border: 1px solid var(--mb-card-border);
+    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.08);
+    background: var(--mb-card-bg);
+  }
+
+  .mb-display {
+    background: var(--mb-display-bg);
+    padding: 2rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 220px;
+    gap: 1.25rem;
+  }
+
+  .mb-bulb {
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    background: var(--mb-bulb-off);
+    border: 4px solid var(--mb-bulb-border-off);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #475569;
+    position: relative;
+    z-index: 1;
+    transition: background 0.05s, border-color 0.05s, box-shadow 0.05s, color 0.05s;
+  }
+
+  .mb-ticker-wrap {
+    height: 2rem;
+    overflow: hidden;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .mb-ticker {
+    color: var(--mb-ticker-color);
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: 0.2em;
+    white-space: nowrap;
+  }
+
+  .mb-status-badge {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: var(--mb-status-bg);
+    border: 1px solid var(--mb-status-border);
+    padding: 0.375rem 0.75rem;
+    border-radius: 9999px;
+    backdrop-filter: blur(4px);
+  }
+
+  .mb-status-led {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background: #64748b;
+    transition: background 0.2s;
+  }
+
+  .mb-status-text {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    color: #94a3b8;
+    letter-spacing: 0.08em;
+  }
+
+  .mb-controls {
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .mb-field-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+  }
+
+  .mb-field-label {
+    font-size: 0.8125rem;
+    font-weight: 700;
+    color: var(--mb-text-label);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .mb-char-count {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--mb-accent);
+  }
+
+  .mb-textarea {
+    width: 100%;
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--mb-text-main);
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid var(--mb-field-border);
+    outline: none;
+    padding: 0.5rem 0;
+    resize: none;
+    text-transform: uppercase;
+    transition: border-color 0.2s;
+  }
+
+  .mb-textarea::placeholder {
+    color: var(--mb-text-hint);
+    text-transform: none;
+    font-weight: 400;
+  }
+
+  .mb-textarea:focus {
+    border-color: var(--mb-field-focus);
+  }
+
+  .mb-btn-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+  }
+
+  .mb-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 1rem 1.25rem;
+    border-radius: 0.75rem;
+    font-weight: 700;
+    font-size: 0.875rem;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    border: none;
+    cursor: pointer;
+    transition: background 0.15s, transform 0.1s, opacity 0.15s;
+  }
+
+  .mb-btn:active {
+    transform: scale(0.97);
+  }
+
+  .mb-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .mb-btn-transmit {
+    background: var(--mb-accent);
+    color: #fff;
+    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
+  }
+
+  .mb-btn-transmit:hover:not(:disabled) {
+    background: var(--mb-accent-hover);
+  }
+
+  .mb-btn-sos {
+    background: var(--mb-sos-bg);
+    color: var(--mb-sos-color);
+    border: 2px solid var(--mb-sos-border);
+  }
+
+  .mb-btn-sos:hover:not(:disabled) {
+    background: var(--mb-sos-hover-bg);
+  }
+
+  .mb-extras {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 1rem;
+    border-top: 1px solid var(--mb-extras-border);
+  }
+
+  .mb-toggle-label {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+  }
+
+  .mb-toggle-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .mb-toggle {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .mb-toggle-track {
+    width: 2.75rem;
+    height: 1.5rem;
+    background: var(--mb-toggle-off);
+    border-radius: 9999px;
+    cursor: pointer;
+    transition: background 0.2s;
+    position: relative;
+  }
+
+  .mb-toggle-track::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: #fff;
+    transition: transform 0.2s;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  .mb-toggle:checked + .mb-toggle-track {
+    background: var(--mb-accent);
+  }
+
+  .mb-toggle:checked + .mb-toggle-track::after {
+    transform: translateX(1.25rem);
+  }
+
+  .mb-toggle-text {
+    font-size: 0.9375rem;
+    font-weight: 500;
+    color: var(--mb-text-label);
+    transition: color 0.15s;
+  }
+
+  .mb-toggle-label:hover .mb-toggle-text {
+    color: var(--mb-accent);
+  }
+</style>
+
+<script>
+  import { MorseEngine } from './logic/MorseEngine';
+  import type { MorseBit } from './logic/MorseEngine';
+
+  interface TorchCapabilities { torch?: boolean; }
+  interface TorchConstraintSet extends MediaTrackConstraintSet { torch?: boolean; }
+
+  const root = document.querySelector('.mb-root') as HTMLElement | null;
+  const t = JSON.parse(root?.dataset.ui ?? '{}') as Record<string, string>;
+
+  const inputEl = document.getElementById('mb-input') as HTMLTextAreaElement;
+  const transmitBtn = document.getElementById('mb-transmit-btn') as HTMLButtonElement;
+  const sosBtn = document.getElementById('mb-sos-btn') as HTMLButtonElement;
+  const bulb = document.getElementById('mb-bulb') as HTMLElement;
+  const bulbIcon = document.getElementById('mb-bulb-icon') as HTMLElement;
+  const ticker = document.getElementById('mb-ticker') as HTMLElement;
+  const statusLed = document.getElementById('mb-status-led') as HTMLElement;
+  const statusText = document.getElementById('mb-status-text') as HTMLElement;
+  const charCount = document.getElementById('mb-char-count') as HTMLElement;
+  const torchToggle = document.getElementById('mb-torch') as HTMLInputElement;
+
+  let currentEngine: MorseEngine | null = null;
+  let torchTrack: MediaStreamTrack | null = null;
+  let isTorchCapable = false;
+
+  const LED_COLORS: Record<string, string> = {
+    green: '#22c55e', amber: '#f59e0b', red: '#ef4444', slate: '#64748b',
+  };
+
+  function setStatus(text: string, color: 'green' | 'amber' | 'red' | 'slate') {
+    statusText.textContent = text;
+    statusLed.style.background = LED_COLORS[color] ?? '#64748b';
+  }
+
+  async function setTorchState(on: boolean) {
+    if (!isTorchCapable || !torchTrack || !torchToggle.checked) return;
+    try {
+      await torchTrack.applyConstraints({ advanced: [{ torch: on } as TorchConstraintSet] });
+    } catch (e) {
+      console.warn('Torch toggle failed', e);
+    }
+  }
+
+  function onSignalChange(active: boolean, bit: MorseBit | null) {
+    if (active) {
+      bulb.style.backgroundColor = '#4ade80';
+      bulb.style.boxShadow = '0 0 60px #4ade80';
+      bulb.style.borderColor = '#ffffff';
+      bulbIcon.style.color = '#ffffff';
+    } else {
+      bulb.style.backgroundColor = '';
+      bulb.style.boxShadow = '';
+      bulb.style.borderColor = '';
+      bulbIcon.style.color = '';
+    }
+
+    setTorchState(active);
+
+    if (bit) {
+      statusText.textContent = `${t.statusSending ?? 'SENDING:'} ${bit.type.toUpperCase()}`;
+    }
+  }
+
+  async function initTorch() {
+    if (!torchToggle.checked) return;
+
+    if (!navigator.mediaDevices?.getUserMedia) {
+      isTorchCapable = false;
+      const isHttp = location.protocol === 'http:' && location.hostname !== 'localhost';
+      setStatus(isHttp ? (t.statusReqHttps ?? 'REQ. HTTPS') : (t.statusNotSupported ?? 'NOT SUPPORTED'), 'amber');
+      return;
+    }
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
+      const track = stream.getVideoTracks()[0];
+      if (!track) { isTorchCapable = false; return; }
+
+      if (track.getCapabilities) {
+        const caps = track.getCapabilities() as unknown as TorchCapabilities;
+        if (caps?.torch) {
+          torchTrack = track;
+          isTorchCapable = true;
+          setStatus(t.statusReady ?? 'READY', 'green');
+        } else {
+          track.stop();
+          isTorchCapable = false;
+          setStatus(t.statusNoTorch ?? 'NO TORCH', 'amber');
+        }
+      } else {
+        torchTrack = track;
+        isTorchCapable = true;
+        setStatus(t.statusReady ?? 'READY', 'green');
+      }
+    } catch {
+      isTorchCapable = false;
+      setStatus(t.statusNoPermission ?? 'NO PERMISSION', 'red');
+    }
+  }
+
+  function stopTransmission() {
+    currentEngine?.stop();
+    setStatus(t.statusStopping ?? 'STOPPING...', 'amber');
+  }
+
+  function resetButtons() {
+    inputEl.disabled = false;
+    transmitBtn.disabled = false;
+
+    sosBtn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>${t.btnSosLoop ?? 'SOS'}`;
+    sosBtn.onclick = () => startTransmission('SOS', true);
+    transmitBtn.onclick = () => startTransmission(inputEl.value, false);
+  }
+
+  async function startTransmission(text: string, loop: boolean) {
+    if (!text.trim()) return;
+
+    if (currentEngine) {
+      currentEngine.stop();
+      await new Promise<void>((r) => setTimeout(r, 100));
+    }
+
+    currentEngine = new MorseEngine(15, onSignalChange);
+    const sequence = MorseEngine.compileSequence(text, 15);
+    ticker.textContent = MorseEngine.textToMorse(text);
+
+    inputEl.disabled = true;
+    transmitBtn.disabled = true;
+
+    const stopIcon = `<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/></svg>${t.btnStop ?? 'STOP'}`;
+    sosBtn.innerHTML = stopIcon;
+    sosBtn.onclick = (e) => { e.preventDefault(); stopTransmission(); };
+    if (!loop) {
+      transmitBtn.onclick = (e) => { e.preventDefault(); stopTransmission(); };
+    }
+
+    setStatus(t.statusTransmitting ?? 'TRANSMITTING', 'green');
+
+    if (!torchTrack && torchToggle.checked) await initTorch();
+
+    await currentEngine.transmit(sequence, loop);
+
+    setTorchState(false);
+    setStatus(t.statusWaiting ?? 'WAITING', 'slate');
+    onSignalChange(false, null);
+    currentEngine = null;
+    resetButtons();
+  }
+
+  transmitBtn.onclick = () => startTransmission(inputEl.value, false);
+  sosBtn.onclick = () => startTransmission('SOS', true);
+
+  inputEl.addEventListener('input', () => {
+    charCount.textContent = `${inputEl.value.length}/100`;
+  });
+
+  torchToggle.addEventListener('change', async () => {
+    if (torchToggle.checked && !torchTrack) await initTorch();
+  });
+</script>

package/src/tool/morse-beacon/i18n/en.ts

@@ -0,0 +1,157 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { MorseBeaconUI } from '../ui';
+
+const faqData = [
+  {
+    question: 'What is the SOS distress signal in Morse code?',
+    answer: "The signal is '... --- ...' (three dots, three dashes, three dots). It is transmitted continuously without spaces between the letters to indicate an immediate emergency.",
+  },
+  {
+    question: 'Why is the torch not working in my browser?',
+    answer: 'Activating the torch requires the browser to have camera permissions. Some mobile browsers or older desktop versions do not support this API for privacy reasons.',
+  },
+  {
+    question: 'Is the SOS screen signal visible?',
+    answer: 'Yes, in conditions of total darkness, the maximum brightness of a white screen flashing in Morse can be seen from several hundred metres away, making it a useful alternative if the torch fails.',
+  },
+  {
+    question: 'What is the international Morse code?',
+    answer: 'It is a communication system that uses sequences of short (dots) and long (dashes) signals to represent letters and numbers, standardised by the ITU for radio communications and optical signals.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Write the message',
+    text: "Enter the text you want to transmit or use the pre-configured 'SOS' button for emergencies.",
+  },
+  {
+    name: 'Configure speed',
+    text: 'Adjust the WPM (words per minute) to make the signal faster or slower depending on visibility.',
+  },
+  {
+    name: 'Choose light source',
+    text: 'Enable full-screen flashing or allow access to the camera torch for a stronger signal.',
+  },
+  {
+    name: 'Start transmission',
+    text: 'Press Transmit to have the system convert the text into automatic visual pulses following the Morse standard.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: 'How to use the Morse beacon to transmit messages',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Morse Beacon: Tactical SOS Transmitter',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Turn your device into a Morse transmission station. Use flash and screen as emergency light signals and tactical communication.',
+};
+
+const ui: MorseBeaconUI = {
+  labelMessage: 'Message to Transmit',
+  placeholder: 'Type your message here (SOS, HELLO, HELP)...',
+  btnTransmit: 'Transmit',
+  btnSosLoop: 'SOS Loop',
+  btnStop: 'Stop',
+  labelTorch: 'Flash/Torch',
+  statusStandby: 'STANDBY',
+  statusTransmitting: 'TRANSMITTING',
+  statusStopping: 'STOPPING...',
+  statusWaiting: 'WAITING',
+  statusReady: 'HARDWARE READY',
+  statusNoTorch: 'NO TORCH',
+  statusNoPermission: 'NO PERMISSION',
+  statusNotSupported: 'NOT SUPPORTED',
+  statusReqHttps: 'REQ. HTTPS',
+  statusSending: 'SENDING:',
+};
+
+export const content: ToolLocaleContent<MorseBeaconUI> = {
+  slug: 'morse-beacon',
+  title: 'Morse Beacon: Tactical SOS Transmitter',
+  description: 'Turn your device into a Morse transmission station. Use flash and screen as emergency light signals and tactical communication.',
+  ui,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'References',
+  bibliography: [
+    { name: 'ITU-R M.1677-1 — International Morse Code', url: 'https://www.itu.int/dms_pubrec/itu-r/rec/m/R-REC-M.1677-1-200910-I!!PDF-E.pdf' },
+    { name: 'W3C MediaCapture Image — Torch', url: 'https://w3c.github.io/mediacapture-image/#torch' },
+    { name: 'Morse code — Wikipedia', url: 'https://en.wikipedia.org/wiki/Morse_code' },
+  ],
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'The Language of Light',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'This tool turns your device into an optical signalling beacon capable of transmitting messages visible from kilometres away. Using the international Morse Code standard, it enables silent or emergency communication via light pulses (torch and screen).',
+    },
+    {
+      type: 'comparative',
+      columns: 2,
+      items: [
+        {
+          icon: 'mdi:history',
+          title: 'A Universal Standard',
+          description: 'Developed in 1830 by Samuel Morse, this binary system of dots and dashes revolutionised telecommunications. Its simplicity makes it extremely robust: it can be transmitted by sound, radio, electricity or light, and remains readable even under severe interference.',
+          points: [],
+        },
+        {
+          icon: 'mdi:flash-alert',
+          title: 'SOS Emergency Mode',
+          description: "The 'SOS Loop' button continuously transmits the sequence ··· --- ···. This signal is universally recognised as a distress call and, thanks to the high contrast of the LED torch, is visible from a great distance even in daylight under certain conditions.",
+          points: [],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      text: 'ITU-R M.1677-1 Standard',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'This tool strictly respects the <strong>regulatory timings</strong> of the international Morse code as defined by the International Telecommunication Union.',
+    },
+    {
+      type: 'list',
+      items: [
+        '1 dot = 1 time unit',
+        '1 dash = 3 time units',
+        'Space between elements = 1 unit',
+        'Space between letters = 3 units',
+        'Space between words = 7 units',
+      ],
+    },
+    {
+      type: 'tip',
+      title: 'Standard speed',
+      html: 'The default speed is <strong>15 WPM</strong> (words per minute), which corresponds to a professional transmission pace. At 15 WPM, 1 unit = 80 ms.',
+    },
+  ],
+};