@jjlmoya/utils-health 1.1.0

package/src/tool/readingDistanceCalculator/ui.ts

@@ -0,0 +1,18 @@
+export interface ReadingDistanceCalculatorUI extends Record<string, string> {
+  bannerText: string;
+  zoomLabel: string;
+  previewText: string;
+  resultLabel: string;
+  resultUnit: string;
+  resultFooter: string;
+  statusWarning: string;
+  statusWarningDesc: string;
+  statusSafe: string;
+  statusSafeDesc: string;
+  statusIdeal: string;
+  statusIdealDesc: string;
+  conceptTitle1: string;
+  conceptText1: string;
+  conceptTitle2: string;
+  conceptText2: string;
+}

package/src/tool/screenDecompressionTime/bibliography.astro

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

package/src/tool/screenDecompressionTime/component.astro

@@ -0,0 +1,671 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { ScreenDecompressionTimeUI } from './ui';
+
+interface Props {
+  ui?: Partial<ScreenDecompressionTimeUI>;
+}
+
+const ui = (Astro.props.ui ?? {}) as ScreenDecompressionTimeUI;
+---
+
+<div class="sdt" data-ui={JSON.stringify(ui)}>
+  <div class="sdt__card">
+
+    
+    <div class="sdt__section">
+      <label class="sdt__section-title" for="sdt-slider" data-key="labelHours">Horas mirando pantalla</label>
+
+      <div class="sdt__slider-row">
+        <input class="sdt__slider" id="sdt-slider" type="range" min="0" max="16" step="0.5" value="8" />
+        <input class="sdt__number" id="sdt-number" type="number" min="0" max="24" step="0.5" value="8" />
+      </div>
+
+      <div class="sdt__presets">
+        <button class="sdt__preset" data-val="2"  data-key="presetLow">Poco</button>
+        <button class="sdt__preset sdt__preset--active" data-val="8" data-key="presetNormal">Normal</button>
+        <button class="sdt__preset" data-val="12" data-key="presetHigh">Mucho</button>
+      </div>
+    </div>
+
+    
+    <div class="sdt__section sdt__section--result">
+      <div class="sdt__result-inner">
+        <div class="sdt__ring-wrap">
+          <div class="sdt__ring" id="sdt-ring">
+            <div class="sdt__ring-hole"></div>
+          </div>
+          <span class="sdt__fatigue-label" id="sdt-fatigue">Moderado</span>
+        </div>
+        <div class="sdt__result-text">
+          <span class="sdt__result-num" id="sdt-minutes">16</span>
+          <span class="sdt__result-unit" data-key="resultUnit">minutos de descanso</span>
+          <span class="sdt__result-per" data-key="resultPer">por día</span>
+        </div>
+      </div>
+    </div>
+
+    
+    <div class="sdt__section sdt__section--bordered sdt__section--stats">
+      <div class="sdt__stat">
+        <span class="sdt__stat-icon"><Icon name="mdi:timer-outline" /></span>
+        <span class="sdt__stat-value" id="sdt-interval">20</span>
+        <span class="sdt__stat-unit" data-key="unitMin">min</span>
+        <span class="sdt__stat-label" data-key="statInterval">Intervalo</span>
+      </div>
+      <div class="sdt__stat">
+        <span class="sdt__stat-icon"><Icon name="mdi:refresh" /></span>
+        <span class="sdt__stat-value" id="sdt-breaks">24</span>
+        <span class="sdt__stat-label" data-key="statBreaks">Descansos/día</span>
+      </div>
+      <div class="sdt__stat">
+        <span class="sdt__stat-icon"><Icon name="mdi:ruler-square-compass" /></span>
+        <span class="sdt__stat-value" id="sdt-distance">75</span>
+        <span class="sdt__stat-unit">cm</span>
+        <span class="sdt__stat-label" data-key="statDistance">Distancia ideal</span>
+      </div>
+    </div>
+
+    
+    <div class="sdt__section sdt__section--bordered sdt__section--recs">
+      <div class="sdt__rec">
+        <span class="sdt__rec-icon"><Icon name="mdi:timer-pause-outline" /></span>
+        <div class="sdt__rec-body">
+          <strong class="sdt__rec-title" data-key="recBreaksTitle">Descansos</strong>
+          <p class="sdt__rec-text" id="sdt-rec-breaks"></p>
+        </div>
+      </div>
+      <div class="sdt__rec">
+        <span class="sdt__rec-icon"><Icon name="mdi:monitor" /></span>
+        <div class="sdt__rec-body">
+          <strong class="sdt__rec-title" data-key="recPostureTitle">Postura</strong>
+          <p class="sdt__rec-text" id="sdt-rec-posture"></p>
+        </div>
+      </div>
+      <div class="sdt__rec">
+        <span class="sdt__rec-icon"><Icon name="mdi:eye-circle-outline" /></span>
+        <div class="sdt__rec-body">
+          <strong class="sdt__rec-title" data-key="recBlinkTitle">Parpadeo</strong>
+          <p class="sdt__rec-text" id="sdt-rec-blink"></p>
+        </div>
+      </div>
+      <div class="sdt__rec">
+        <span class="sdt__rec-icon"><Icon name="mdi:lightbulb-variant-outline" /></span>
+        <div class="sdt__rec-body">
+          <strong class="sdt__rec-title" data-key="recLightTitle">Luz Azul</strong>
+          <p class="sdt__rec-text" id="sdt-rec-light"></p>
+        </div>
+      </div>
+    </div>
+
+    
+    <div class="sdt__section sdt__section--bordered">
+      <h3 class="sdt__section-title" data-key="timelineTitle">Tu Día Visual Ideal</h3>
+      <div class="sdt__timeline-bar" id="sdt-timeline-bar">
+        <div class="sdt__tl-work"  id="sdt-tl-work"></div>
+        <div class="sdt__tl-rest"  id="sdt-tl-rest"></div>
+        <div class="sdt__tl-other" id="sdt-tl-other"></div>
+      </div>
+      <div class="sdt__timeline-legend">
+        <span class="sdt__legend-item sdt__legend-item--work">
+          <span class="sdt__legend-dot"></span>
+          <span data-key="timelineWork">Trabajo</span>
+        </span>
+        <span class="sdt__legend-item sdt__legend-item--rest">
+          <span class="sdt__legend-dot"></span>
+          <span data-key="timelineRest">Descanso</span>
+        </span>
+        <span class="sdt__legend-item sdt__legend-item--other">
+          <span class="sdt__legend-dot"></span>
+          <span data-key="timelineOther">Otros</span>
+        </span>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<style>
+  .sdt {
+    --sdt-primary: #06b6d4;
+    --sdt-secondary: #0891b2;
+    --sdt-accent: #06d6a6;
+    --sdt-low: #10b981;
+    --sdt-mod: #f59e0b;
+    --sdt-high: #ef9311;
+    --sdt-critical: #dc2626;
+    --sdt-bg: #fff;
+    --sdt-border: rgba(6, 182, 212, 0.2);
+    --sdt-divider: rgba(6, 182, 212, 0.1);
+    --sdt-text: #0f172a;
+    --sdt-muted: #64748b;
+    --sdt-preset-bg: rgba(6, 182, 212, 0.07);
+    --sdt-preset-border: rgba(6, 182, 212, 0.18);
+    --sdt-input-bg: #ecfeff;
+    --sdt-input-border: rgba(6, 182, 212, 0.25);
+
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 1rem;
+  }
+
+  
+  .sdt__card {
+    background: var(--sdt-bg);
+    border: 2px solid var(--sdt-border);
+    border-radius: 2.5rem;
+    box-shadow: 0 20px 60px rgba(6, 182, 212, 0.12);
+    overflow: hidden;
+  }
+
+  
+  .sdt__section {
+    padding: 2.5rem;
+  }
+
+  .sdt__section--bordered {
+    border-top: 1px solid var(--sdt-divider);
+  }
+
+  .sdt__section-title {
+    display: block;
+    font-size: 0.8rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    color: var(--sdt-secondary);
+    margin: 0 0 1.5rem;
+  }
+
+  
+  .sdt__slider-row {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .sdt__slider {
+    flex: 1;
+    -webkit-appearance: none;
+    appearance: none;
+    height: 8px;
+    border-radius: 4px;
+    background: linear-gradient(90deg, var(--sdt-primary) 50%, rgba(6,182,212,0.15) 50%);
+    outline: none;
+    cursor: pointer;
+  }
+
+  .sdt__slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--sdt-primary) 0%, var(--sdt-secondary) 100%);
+    cursor: pointer;
+    box-shadow: 0 3px 12px rgba(6, 182, 212, 0.45);
+    transition: transform 0.15s ease;
+  }
+
+  .sdt__slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
+
+  .sdt__slider::-moz-range-thumb {
+    width: 26px; height: 26px;
+    border-radius: 50%; border: none;
+    background: linear-gradient(135deg, var(--sdt-primary) 0%, var(--sdt-secondary) 100%);
+    cursor: pointer;
+    box-shadow: 0 3px 12px rgba(6, 182, 212, 0.45);
+  }
+
+  .sdt__number {
+    width: 5rem;
+    background: var(--sdt-input-bg);
+    border: 2px solid var(--sdt-input-border);
+    border-radius: 0.875rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 1.75rem;
+    font-weight: 900;
+    color: var(--sdt-primary);
+    text-align: center;
+    outline: none;
+    transition: border-color 0.2s ease;
+  }
+
+  .sdt__number:focus { border-color: var(--sdt-primary); box-shadow: 0 0 0 3px rgba(6,182,212,0.12); }
+  .sdt__number::-webkit-inner-spin-button,
+  .sdt__number::-webkit-outer-spin-button { -webkit-appearance: none; }
+  .sdt__number[type="number"] { -moz-appearance: textfield; }
+
+  .sdt__presets {
+    display: flex;
+    gap: 0.75rem;
+  }
+
+  .sdt__preset {
+    background: var(--sdt-preset-bg);
+    border: 1px solid var(--sdt-preset-border);
+    border-radius: 2rem;
+    padding: 0.45rem 1.25rem;
+    font-size: 0.85rem;
+    font-weight: 700;
+    color: var(--sdt-secondary);
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .sdt__preset:hover, .sdt__preset--active {
+    background: linear-gradient(135deg, var(--sdt-primary) 0%, var(--sdt-secondary) 100%);
+    border-color: transparent;
+    color: #fff;
+    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);
+  }
+
+  
+  .sdt__section--result {
+    background: linear-gradient(135deg, var(--sdt-primary) 0%, var(--sdt-secondary) 100%);
+  }
+
+  .sdt__result-inner {
+    display: flex;
+    align-items: center;
+    gap: 3rem;
+  }
+
+  .sdt__ring-wrap {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .sdt__ring {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    background: conic-gradient(#10b981 75%, rgba(255,255,255,0.15) 0);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.5s ease;
+  }
+
+  .sdt__ring-hole {
+    width: 102px;
+    height: 102px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--sdt-primary) 0%, var(--sdt-secondary) 100%);
+    position: absolute;
+  }
+
+  .sdt__fatigue-label {
+    font-size: 0.9rem;
+    font-weight: 900;
+    color: rgba(255, 255, 255, 0.9);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+
+  .sdt__result-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .sdt__result-num {
+    font-size: 5rem;
+    font-weight: 950;
+    line-height: 1;
+    color: #fff;
+    text-shadow: 0 4px 16px rgba(0,0,0,0.12);
+  }
+
+  .sdt__result-unit {
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: rgba(255,255,255,0.9);
+  }
+
+  .sdt__result-per {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: rgba(255,255,255,0.6);
+  }
+
+  
+  .sdt__section--stats {
+    display: flex;
+    gap: 0;
+  }
+
+  .sdt__stat {
+    flex: 1;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0 1rem;
+  }
+
+  .sdt__stat + .sdt__stat {
+    border-left: 1px solid var(--sdt-divider);
+  }
+
+  .sdt__stat-icon {
+    color: var(--sdt-primary);
+    width: 1.6rem;
+    height: 1.6rem;
+    margin-bottom: 0.2rem;
+  }
+
+  .sdt__stat-icon svg { width: 100%; height: 100%; display: block; }
+
+  .sdt__stat-value {
+    font-size: 2rem;
+    font-weight: 900;
+    color: var(--sdt-primary);
+    line-height: 1;
+  }
+
+  .sdt__stat-unit {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--sdt-muted);
+  }
+
+  .sdt__stat-label {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--sdt-muted);
+    margin-top: 0.15rem;
+  }
+
+  
+  .sdt__section--recs {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+  }
+
+  .sdt__rec {
+    display: flex;
+    gap: 0.875rem;
+    align-items: flex-start;
+  }
+
+  .sdt__rec-icon {
+    color: var(--sdt-primary);
+    width: 1.75rem;
+    height: 1.75rem;
+    flex-shrink: 0;
+    margin-top: 0.1rem;
+  }
+
+  .sdt__rec-icon svg { width: 100%; height: 100%; display: block; }
+
+  .sdt__rec-body { display: flex; flex-direction: column; gap: 0.4rem; }
+
+  .sdt__rec-title {
+    font-size: 0.78rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: var(--sdt-primary);
+  }
+
+  .sdt__rec-text {
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: var(--sdt-muted);
+    margin: 0;
+  }
+
+  
+  .sdt__timeline-bar {
+    height: 40px;
+    border-radius: 0.75rem;
+    overflow: hidden;
+    display: flex;
+    margin-bottom: 0.875rem;
+    background: rgba(0,0,0,0.04);
+  }
+
+  .sdt__tl-work {
+    background: linear-gradient(90deg, var(--sdt-primary) 0%, var(--sdt-secondary) 100%);
+    transition: width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
+    height: 100%;
+  }
+
+  .sdt__tl-rest {
+    background: linear-gradient(90deg, var(--sdt-accent) 0%, #059669 100%);
+    transition: width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
+    height: 100%;
+  }
+
+  .sdt__tl-other { flex: 1; height: 100%; background: rgba(0,0,0,0.04); }
+
+  .sdt__timeline-legend {
+    display: flex;
+    gap: 2rem;
+    flex-wrap: wrap;
+  }
+
+  .sdt__legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+    font-size: 0.78rem;
+    font-weight: 700;
+    color: var(--sdt-muted);
+  }
+
+  .sdt__legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+  }
+
+  .sdt__legend-item--work  .sdt__legend-dot { background: linear-gradient(135deg, var(--sdt-primary), var(--sdt-secondary)); }
+  .sdt__legend-item--rest  .sdt__legend-dot { background: linear-gradient(135deg, var(--sdt-accent), #059669); }
+  .sdt__legend-item--other .sdt__legend-dot { background: rgba(0,0,0,0.1); }
+
+  
+  :global(.theme-dark) .sdt {
+    --sdt-bg: #0a2030;
+    --sdt-border: rgba(6, 182, 212, 0.28);
+    --sdt-divider: rgba(6, 182, 212, 0.1);
+    --sdt-text: #ecfeff;
+    --sdt-muted: #67e8f9;
+    --sdt-preset-bg: rgba(6, 182, 212, 0.1);
+    --sdt-preset-border: rgba(6, 182, 212, 0.25);
+    --sdt-input-bg: rgba(6, 182, 212, 0.1);
+    --sdt-input-border: rgba(6, 182, 212, 0.28);
+  }
+
+  :global(.theme-dark) .sdt__timeline-bar,
+  :global(.theme-dark) .sdt__tl-other {
+    background: rgba(255,255,255,0.04);
+  }
+
+  :global(.theme-dark) .sdt__legend-item--other .sdt__legend-dot { background: rgba(255,255,255,0.08); }
+  :global(.theme-dark) .sdt__number { color: #67e8f9; }
+  :global(.theme-dark) .sdt__stat + .sdt__stat { border-color: rgba(6,182,212,0.12); }
+
+  
+  @media (max-width: 768px) {
+    .sdt__section { padding: 1.75rem 1.25rem; }
+
+    .sdt__result-inner { flex-direction: column; text-align: center; gap: 1.25rem; }
+    .sdt__result-num { font-size: 4rem; }
+
+    .sdt__section--recs { grid-template-columns: 1fr; }
+
+    .sdt__section--stats { flex-direction: column; gap: 1.25rem; }
+    .sdt__stat { flex-direction: row; justify-content: flex-start; gap: 0.75rem; padding: 0; }
+    .sdt__stat + .sdt__stat { border-left: none; border-top: 1px solid var(--sdt-divider); padding-top: 1.25rem; }
+    .sdt__stat-value { font-size: 1.5rem; }
+  }
+
+  @media (max-width: 480px) {
+    .sdt__ring { width: 120px; height: 120px; }
+    .sdt__ring-hole { width: 82px; height: 82px; }
+  }
+</style>
+
+<script>
+  interface SdtUI {
+    labelHours?: string;
+    presetLow?: string; presetNormal?: string; presetHigh?: string;
+    resultUnit?: string; resultPer?: string;
+    statInterval?: string; statBreaks?: string; statDistance?: string;
+    timelineTitle?: string; timelineWork?: string; timelineRest?: string; timelineOther?: string;
+    fatigueLow?: string; fatigueMod?: string; fatigueHigh?: string; fatigueCritical?: string;
+    recBreaksTitle?: string; recBreaksText?: string;
+    recPostureTitle?: string; recPostureLow?: string; recPostureMod?: string; recPostureHigh?: string;
+    recBlinkTitle?: string; recBlinkText?: string;
+    recLightTitle?: string; recLightLow?: string; recLightMod?: string; recLightHigh?: string;
+    unitMin?: string;
+  }
+
+  function applyUI(container: Element, ui: SdtUI): void {
+    container.querySelectorAll<HTMLElement>('[data-key]').forEach((el) => {
+      const key = el.dataset.key as keyof SdtUI;
+      const val = ui[key];
+      if (val) el.textContent = val;
+    });
+  }
+
+  function getFatigueState(hours: number, ui: SdtUI): { pct: number; label: string; color: string } {
+    const states = [
+      { threshold: 0, pct: 0, label: ui.fatigueLow ?? 'Bajo', color: '#10b981' },
+      { threshold: 2, pct: 25, label: ui.fatigueLow ?? 'Bajo', color: '#10b981' },
+      { threshold: 4, pct: 50, label: ui.fatigueLow ?? 'Bajo', color: '#10b981' },
+      { threshold: 8, pct: 75, label: ui.fatigueMod ?? 'Moderado', color: '#f59e0b' },
+      { threshold: 12, pct: 95, label: ui.fatigueHigh ?? 'Alto', color: '#ef9311' },
+    ];
+    const state = states.reverse().find(s => hours >= s.threshold);
+    return state || { pct: 100, label: ui.fatigueCritical ?? 'Crítico', color: '#dc2626' };
+  }
+
+  function getDistance(hours: number): number {
+    if (hours <= 4) return 60;
+    if (hours <= 8) return 75;
+    return 90;
+  }
+
+  function getBlinks(hours: number): number {
+    if (hours <= 4) return 15;
+    if (hours <= 8) return 20;
+    return 25;
+  }
+
+  function getPosture(hours: number, ui: SdtUI): string {
+    if (hours <= 4) return ui.recPostureLow ?? '';
+    if (hours <= 8) return ui.recPostureMod ?? '';
+    return ui.recPostureHigh ?? '';
+  }
+
+  function getLight(hours: number, ui: SdtUI): string {
+    if (hours <= 4) return ui.recLightLow ?? '';
+    if (hours <= 8) return ui.recLightMod ?? '';
+    return ui.recLightHigh ?? '';
+  }
+
+  function calcState(hours: number, ui: SdtUI) {
+    const restMinutes = Math.round(hours * 2);
+    const breaks = Math.ceil((hours * 60) / 20);
+    const interval = hours === 0 ? 20 : Math.max(15, Math.round(120 / Math.max(1, hours / 4)));
+    const distance = getDistance(hours);
+    const blinks = getBlinks(hours);
+    const fatigue = getFatigueState(hours, ui);
+    const posture = getPosture(hours, ui);
+    const light = getLight(hours, ui);
+
+    return {
+      restMinutes, breaks, interval, distance, blinks,
+      fatiguePct: fatigue.pct,
+      fatigueLabel: fatigue.label,
+      fatigueColor: fatigue.color,
+      posture, light
+    };
+  }
+
+  // eslint-disable-next-line complexity, max-lines-per-function
+  function updateDOM(container: Element, hours: number, s: ReturnType<typeof calcState>, ui: SdtUI): void {
+    const get = (id: string) => container.querySelector<HTMLElement>(id);
+
+    const minutesEl   = get('#sdt-minutes');
+    const intervalEl  = get('#sdt-interval');
+    const breaksEl    = get('#sdt-breaks');
+    const distanceEl  = get('#sdt-distance');
+    const ringEl      = get('#sdt-ring');
+    const fatigueEl   = get('#sdt-fatigue');
+    const recBreaksEl = get('#sdt-rec-breaks');
+    const recPostureEl= get('#sdt-rec-posture');
+    const recBlinkEl  = get('#sdt-rec-blink');
+    const recLightEl  = get('#sdt-rec-light');
+    const workEl      = get('#sdt-tl-work');
+    const restEl      = get('#sdt-tl-rest');
+    const sliderEl    = container.querySelector<HTMLInputElement>('#sdt-slider');
+
+    if (minutesEl)  minutesEl.textContent  = String(s.restMinutes);
+    if (intervalEl) intervalEl.textContent = String(s.interval);
+    if (breaksEl)   breaksEl.textContent   = String(s.breaks);
+    if (distanceEl) distanceEl.textContent = String(s.distance);
+    if (fatigueEl)  fatigueEl.textContent  = s.fatigueLabel;
+
+    if (ringEl) ringEl.style.background = `conic-gradient(${s.fatigueColor} ${s.fatiguePct}%, rgba(255,255,255,0.15) 0)`;
+
+    if (recBreaksEl)  recBreaksEl.textContent  = (ui.recBreaksText ?? '').replace('{0}', String(s.interval));
+    if (recPostureEl) recPostureEl.textContent = s.posture;
+    if (recBlinkEl)   recBlinkEl.textContent   = (ui.recBlinkText ?? '').replace('{0}', String(s.blinks));
+    if (recLightEl)   recLightEl.textContent   = s.light;
+
+    const workPct = (hours / 24) * 100;
+    const restPct = (s.restMinutes / 60 / 24) * 100;
+    if (workEl) workEl.style.width = `${Math.min(workPct, 100)}%`;
+    if (restEl) restEl.style.width = `${Math.min(restPct, 100 - workPct)}%`;
+
+    if (sliderEl) {
+      const pct = (hours / 16) * 100;
+      sliderEl.style.background = `linear-gradient(90deg, ${s.fatigueColor} ${pct}%, rgba(6,182,212,0.15) ${pct}%)`;
+    }
+  }
+
+  function syncPresets(container: Element, hours: number): void {
+    container.querySelectorAll<HTMLElement>('.sdt__preset').forEach((btn) => {
+      btn.classList.toggle('sdt__preset--active', parseFloat(btn.dataset.val ?? '0') === hours);
+    });
+  }
+
+  function initSdt(container: Element): void {
+    const ui: SdtUI = JSON.parse((container as HTMLElement).dataset.ui ?? '{}');
+    applyUI(container, ui);
+
+    const slider = container.querySelector<HTMLInputElement>('#sdt-slider');
+    const number = container.querySelector<HTMLInputElement>('#sdt-number');
+    let currentHours = 8;
+
+    function update(hours: number): void {
+      currentHours = Math.max(0, Math.min(24, hours));
+      updateDOM(container, currentHours, calcState(currentHours, ui), ui);
+      syncPresets(container, currentHours);
+      if (slider && parseFloat(slider.value) !== currentHours) slider.value = String(Math.min(currentHours, 16));
+      if (number && parseFloat(number.value) !== currentHours) number.value = String(currentHours);
+    }
+
+    slider?.addEventListener('input', () => update(parseFloat(slider.value)));
+    number?.addEventListener('input', () => { const v = parseFloat(number.value); if (!isNaN(v)) update(v); });
+    container.querySelectorAll<HTMLButtonElement>('.sdt__preset').forEach((btn) => {
+      btn.addEventListener('click', () => update(parseFloat(btn.dataset.val ?? '0')));
+    });
+
+    update(currentHours);
+  }
+
+  document.querySelectorAll<HTMLElement>('.sdt').forEach(initSdt);
+</script>