@jjlmoya/utils-health 1.1.0

package/src/tool/ubeCalculator/component.astro

@@ -0,0 +1,683 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { UbeCalculatorUI } from './ui';
+
+interface Props {
+  ui?: Partial<UbeCalculatorUI>;
+}
+
+const ui = (Astro.props.ui ?? {}) as UbeCalculatorUI;
+
+const PRESETS = [
+  { key: 'drinkCana',    vol: 200, abv: 5,  icon: 'mdi:beer',           id: 'cana'    },
+  { key: 'drinkTercio',  vol: 330, abv: 5,  icon: 'mdi:bottle-soda',    id: 'tercio'  },
+  { key: 'drinkVino',    vol: 120, abv: 12, icon: 'mdi:glass-wine',     id: 'vino'    },
+  { key: 'drinkCopa',    vol: 50,  abv: 40, icon: 'mdi:glass-cocktail', id: 'copa'    },
+  { key: 'drinkChupito', vol: 40,  abv: 40, icon: 'mdi:cup-outline',    id: 'chupito' },
+] as const;
+---
+
+<div class="ube" data-ui={JSON.stringify(ui)}>
+  <div class="ube__card">
+
+    
+    <div class="ube__section">
+      <h2 class="ube__section-title" data-key="sectionAdd">Añadir Bebida</h2>
+
+      <div class="ube__presets">
+        {PRESETS.map((p) => (
+          <button class="ube__preset" data-vol={p.vol} data-abv={p.abv} data-icon-id={p.id}>
+            <span class="ube__preset-icon"><Icon name={p.icon} /></span>
+            <span class="ube__preset-label" data-key={p.key}></span>
+            <span class="ube__preset-meta">{p.vol}ml · {p.abv}%</span>
+          </button>
+        ))}
+      </div>
+
+      <div class="ube__custom">
+        <div class="ube__field">
+          <label class="ube__label" for="ube-vol" data-key="labelVolume">Volumen (ml)</label>
+          <input class="ube__input" id="ube-vol" type="number" min="1" max="2000" placeholder="250" />
+        </div>
+        <div class="ube__field">
+          <label class="ube__label" for="ube-abv" data-key="labelAbv">Graduación (% ABV)</label>
+          <input class="ube__input" id="ube-abv" type="number" min="0.1" max="100" step="0.1" placeholder="5.0" />
+        </div>
+        <button class="ube__btn-add" id="ube-add-custom" data-key="btnAddCustom">
+          Añadir Bebida Manual
+        </button>
+      </div>
+    </div>
+
+    
+    <div class="ube__section ube__section--bordered">
+      <h2 class="ube__section-title" data-key="sectionConsumed">Consumo Acumulado</h2>
+
+      <div class="ube__list" id="ube-list"></div>
+
+      <div class="ube__empty" id="ube-empty">
+        <span class="ube__empty-icon"><Icon name="mdi:cup-off-outline" /></span>
+        <p class="ube__empty-title" data-key="emptyTitle">Tu lista de consumo está vacía</p>
+        <p class="ube__empty-hint" data-key="emptyHint">Selecciona bebidas arriba o añade manualmente</p>
+      </div>
+    </div>
+
+    
+    <div class="ube__section ube__section--bordered ube__section--results">
+      <div class="ube__totals">
+        <div class="ube__stat">
+          <span class="ube__stat-value" id="ube-grams">0.0</span>
+          <span class="ube__stat-label" data-key="resultLabel">Carga Tóxica Absoluta</span>
+        </div>
+        <div class="ube__stat ube__stat--accent">
+          <span class="ube__stat-value" id="ube-ubes">0.0</span>
+          <span class="ube__stat-label" data-key="ubesLabel">UBEs</span>
+        </div>
+      </div>
+
+      <h3 class="ube__risk-header" data-key="riskHeader">Riesgo Epidemiológico</h3>
+      <div class="ube__risk-bar">
+        <div class="ube__risk-fill" id="ube-risk-fill"></div>
+      </div>
+      <div class="ube__risk-markers">
+        <span data-key="riskMarkerZero">0 UBEs</span>
+        <span data-key="riskMarkerHigh">Riesgo Alto &gt; 4 UBEs</span>
+      </div>
+      <div class="ube__risk-badge" id="ube-risk-badge"></div>
+    </div>
+
+  </div>
+
+  
+  <div class="ube__icon-cache" aria-hidden="true">
+    {PRESETS.map((p) => (
+      <span id={`ube-icon-${p.id}`}><Icon name={p.icon} /></span>
+    ))}
+    <span id="ube-icon-custom"><Icon name="mdi:beaker-outline" /></span>
+    <span id="ube-icon-remove"><Icon name="mdi:close-circle-outline" /></span>
+  </div>
+</div>
+
+<style>
+  .ube {
+    --ube-primary: #8b5cf6;
+    --ube-accent: #ec4899;
+    --ube-success: #10b981;
+    --ube-warning: #f59e0b;
+    --ube-danger: #ef4444;
+    --ube-bg: #fff;
+    --ube-border: rgba(139, 92, 246, 0.18);
+    --ube-divider: rgba(139, 92, 246, 0.1);
+    --ube-text: #1e1b4b;
+    --ube-muted: #6b7280;
+    --ube-input-bg: #f5f3ff;
+    --ube-input-border: rgba(139, 92, 246, 0.25);
+    --ube-preset-bg: #f5f3ff;
+    --ube-preset-border: rgba(139, 92, 246, 0.2);
+    --ube-results-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
+
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 1rem;
+  }
+
+  
+  .ube__card {
+    background: var(--ube-bg);
+    border: 2px solid var(--ube-border);
+    border-radius: 2.5rem;
+    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.1);
+    overflow: hidden;
+  }
+
+  
+  .ube__icon-cache {
+    display: none;
+  }
+
+  
+  .ube__section {
+    padding: 2.5rem;
+  }
+
+  .ube__section--bordered {
+    border-top: 1px solid var(--ube-divider);
+  }
+
+  .ube__section--results {
+    background: var(--ube-results-bg);
+  }
+
+  .ube__section-title {
+    font-size: 0.8rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    color: var(--ube-primary);
+    margin: 0 0 1.5rem;
+  }
+
+  
+  .ube__presets {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .ube__preset {
+    background: var(--ube-preset-bg);
+    border: 1px solid var(--ube-preset-border);
+    border-radius: 1.25rem;
+    padding: 1.1rem 0.5rem;
+    cursor: pointer;
+    transition: all 0.22s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.35rem;
+    text-align: center;
+  }
+
+  .ube__preset:hover {
+    background: var(--ube-primary);
+    border-color: var(--ube-primary);
+    transform: translateY(-3px);
+    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.28);
+  }
+
+  .ube__preset:hover .ube__preset-label,
+  .ube__preset:hover .ube__preset-meta,
+  .ube__preset:hover .ube__preset-icon {
+    color: #fff;
+  }
+
+  .ube__preset-icon {
+    color: var(--ube-primary);
+    width: 1.75rem;
+    height: 1.75rem;
+    transition: color 0.22s ease;
+  }
+
+  .ube__preset-icon svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .ube__preset-label {
+    font-size: 0.78rem;
+    font-weight: 700;
+    color: var(--ube-text);
+    transition: color 0.22s ease;
+  }
+
+  .ube__preset-meta {
+    font-size: 0.68rem;
+    color: var(--ube-muted);
+    transition: color 0.22s ease;
+  }
+
+  
+  .ube__custom {
+    display: grid;
+    grid-template-columns: 1fr 1fr auto;
+    gap: 1rem;
+    align-items: end;
+  }
+
+  .ube__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .ube__label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--ube-muted);
+  }
+
+  .ube__input {
+    background: var(--ube-input-bg);
+    border: 1px solid var(--ube-input-border);
+    border-radius: 0.875rem;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--ube-text);
+    outline: none;
+    transition: all 0.2s ease;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .ube__input:focus {
+    border-color: var(--ube-primary);
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
+  }
+
+  .ube__btn-add {
+    background: linear-gradient(135deg, var(--ube-primary) 0%, var(--ube-accent) 100%);
+    color: #fff;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.875rem;
+    font-weight: 800;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    white-space: nowrap;
+    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.25);
+  }
+
+  .ube__btn-add:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.38);
+    filter: brightness(1.08);
+  }
+
+  
+  .ube__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+  }
+
+  :global(.ube__drink) {
+    background: var(--ube-preset-bg);
+    border: 1px solid var(--ube-preset-border);
+    border-radius: 1rem;
+    padding: 0.875rem 1.1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    animation: ube-slide-in 0.28s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  :global(.ube__drink-icon) {
+    width: 1.6rem;
+    height: 1.6rem;
+    flex-shrink: 0;
+    color: var(--ube-primary);
+  }
+
+  :global(.ube__drink-icon) svg { width: 100%; height: 100%; display: block; }
+
+  :global(.ube__drink-info) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+  }
+
+  :global(.ube__drink-name) {
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: var(--ube-text);
+  }
+
+  :global(.ube__drink-detail) {
+    font-size: 0.75rem;
+    color: var(--ube-muted);
+  }
+
+  :global(.ube__drink-grams) {
+    font-size: 0.82rem;
+    font-weight: 700;
+    color: var(--ube-primary);
+    flex-shrink: 0;
+  }
+
+  :global(.ube__drink-remove) {
+    background: none;
+    border: none;
+    width: 1.3rem;
+    height: 1.3rem;
+    cursor: pointer;
+    opacity: 0.38;
+    transition: opacity 0.15s ease, color 0.15s ease;
+    padding: 0;
+    flex-shrink: 0;
+    color: var(--ube-muted);
+  }
+
+  :global(.ube__drink-remove) svg { width: 100%; height: 100%; display: block; }
+
+  :global(.ube__drink-remove):hover {
+    opacity: 1;
+    color: var(--ube-danger);
+  }
+
+  @keyframes ube-slide-in {
+    from { opacity: 0; transform: translateY(-6px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  
+  .ube__empty {
+    text-align: center;
+    padding: 2.5rem 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+  }
+
+  .ube__empty-icon {
+    width: 2.75rem;
+    height: 2.75rem;
+    opacity: 0.25;
+    margin-bottom: 0.4rem;
+    color: var(--ube-muted);
+  }
+
+  .ube__empty-icon svg { width: 100%; height: 100%; display: block; }
+
+  .ube__empty-title {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--ube-text);
+    margin: 0;
+  }
+
+  .ube__empty-hint {
+    font-size: 0.82rem;
+    color: var(--ube-muted);
+    margin: 0;
+  }
+
+  
+  .ube__totals {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.25rem;
+    margin-bottom: 1.75rem;
+  }
+
+  .ube__stat {
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid var(--ube-border);
+    border-radius: 1.25rem;
+    padding: 1.5rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .ube__stat--accent {
+    border-color: rgba(236, 72, 153, 0.25);
+  }
+
+  .ube__stat-value {
+    font-size: 2.75rem;
+    font-weight: 950;
+    line-height: 1;
+    background: linear-gradient(135deg, var(--ube-primary) 0%, var(--ube-accent) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .ube__stat-label {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: var(--ube-muted);
+  }
+
+  .ube__risk-header {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: var(--ube-muted);
+    margin: 0 0 0.875rem;
+  }
+
+  .ube__risk-bar {
+    height: 10px;
+    background: rgba(0, 0, 0, 0.06);
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 0.4rem;
+  }
+
+  .ube__risk-fill {
+    height: 100%;
+    width: 0%;
+    border-radius: 8px;
+    transition: width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease;
+    background: linear-gradient(90deg, var(--ube-success), var(--ube-warning));
+  }
+
+  .ube__risk-markers {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.7rem;
+    color: var(--ube-muted);
+    font-weight: 600;
+    margin-bottom: 1.1rem;
+  }
+
+  .ube__risk-badge {
+    display: inline-block;
+    padding: 0.45rem 1.75rem;
+    border-radius: 2rem;
+    font-weight: 800;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    min-height: 2rem;
+    transition: all 0.3s ease;
+  }
+
+  :global(.ube__risk-badge--none) { background: rgba(107,114,128,0.1); color: #6b7280; border: 2px solid #6b7280; }
+  :global(.ube__risk-badge--low)  { background: rgba(16,185,129,0.1);  color: #10b981; border: 2px solid #10b981; }
+  :global(.ube__risk-badge--mid)  { background: rgba(245,158,11,0.1);  color: #f59e0b; border: 2px solid #f59e0b; }
+  :global(.ube__risk-badge--high) { background: rgba(239,68,68,0.1);   color: #ef4444; border: 2px solid #ef4444; }
+
+  
+  :global(.theme-dark) .ube {
+    --ube-bg: #1a1033;
+    --ube-border: rgba(139, 92, 246, 0.28);
+    --ube-divider: rgba(139, 92, 246, 0.12);
+    --ube-text: #f5f3ff;
+    --ube-muted: #a78bfa;
+    --ube-input-bg: rgba(139, 92, 246, 0.1);
+    --ube-input-border: rgba(139, 92, 246, 0.28);
+    --ube-preset-bg: rgba(139, 92, 246, 0.08);
+    --ube-preset-border: rgba(139, 92, 246, 0.2);
+    --ube-results-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(236, 72, 153, 0.08) 100%);
+  }
+
+  :global(.theme-dark) .ube__stat {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  :global(.theme-dark) .ube__risk-bar {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  :global(.theme-dark) .ube__input {
+    color: var(--ube-text);
+  }
+
+  
+  @media (max-width: 768px) {
+    .ube__section { padding: 1.75rem 1.25rem; }
+    .ube__presets { grid-template-columns: repeat(3, 1fr); }
+    .ube__custom  { grid-template-columns: 1fr 1fr; }
+    .ube__btn-add { grid-column: 1 / -1; }
+    .ube__totals  { grid-template-columns: 1fr; }
+  }
+
+  @media (max-width: 480px) {
+    .ube__presets { grid-template-columns: repeat(2, 1fr); }
+    .ube__custom  { grid-template-columns: 1fr; }
+  }
+</style>
+
+<script>
+  interface UbeUI {
+    sectionAdd?: string; drinkCana?: string; drinkTercio?: string; drinkVino?: string;
+    drinkCopa?: string; drinkChupito?: string; labelVolume?: string; labelAbv?: string;
+    btnAddCustom?: string; customDrinkName?: string; sectionConsumed?: string;
+    drinkSingular?: string; drinkPlural?: string; emptyTitle?: string; emptyHint?: string;
+    resultLabel?: string; ubesLabel?: string; riskHeader?: string;
+    riskNone?: string; riskLow?: string; riskMid?: string; riskHigh?: string;
+    riskMarkerZero?: string; riskMarkerHigh?: string;
+  }
+
+  interface ConsumedDrink {
+    id: number; name: string; iconId: string;
+    vol: number; abv: number; grams: number; ubes: number;
+  }
+
+  interface RiskTier { label: string; cls: string; gradient: string; }
+
+  function applyUI(container: Element, ui: UbeUI): void {
+    container.querySelectorAll<HTMLElement>('[data-key]').forEach((el) => {
+      const key = el.dataset.key as keyof UbeUI;
+      const val = ui[key];
+      if (val) el.textContent = val;
+    });
+  }
+
+  function getRiskTier(ubes: number, ui: UbeUI): RiskTier {
+    if (ubes <= 0) return { label: ui.riskNone ?? 'Sin Consumo', cls: 'ube__risk-badge--none', gradient: 'linear-gradient(90deg,#6b7280,#9ca3af)' };
+    if (ubes <= 2) return { label: ui.riskLow  ?? 'Bajo',        cls: 'ube__risk-badge--low',  gradient: 'linear-gradient(90deg,#10b981,#34d399)' };
+    if (ubes <= 4) return { label: ui.riskMid  ?? 'Moderado',    cls: 'ube__risk-badge--mid',  gradient: 'linear-gradient(90deg,#f59e0b,#fbbf24)' };
+    return               { label: ui.riskHigh ?? 'Alto',         cls: 'ube__risk-badge--high', gradient: 'linear-gradient(90deg,#ef4444,#f87171)' };
+  }
+
+  // eslint-disable-next-line max-lines-per-function
+  function initUbe(container: Element): void {
+    const ui: UbeUI = JSON.parse((container as HTMLElement).dataset.ui ?? '{}');
+    applyUI(container, ui);
+
+    const listEl       = container.querySelector<HTMLElement>('#ube-list');
+    const emptyEl      = container.querySelector<HTMLElement>('#ube-empty');
+    const gramsEl      = container.querySelector<HTMLElement>('#ube-grams');
+    const ubesEl       = container.querySelector<HTMLElement>('#ube-ubes');
+    const riskFillEl   = container.querySelector<HTMLElement>('#ube-risk-fill');
+    const riskBadgeEl  = container.querySelector<HTMLElement>('#ube-risk-badge');
+    const volInput     = container.querySelector<HTMLInputElement>('#ube-vol');
+    const abvInput     = container.querySelector<HTMLInputElement>('#ube-abv');
+    const addBtn       = container.querySelector<HTMLButtonElement>('#ube-add-custom');
+    const removeIconHtml = container.querySelector('#ube-icon-remove')?.innerHTML ?? '';
+
+    let drinks: ConsumedDrink[] = [];
+    let nextId = 1;
+
+    function getIconHtml(iconId: string): string {
+      return container.querySelector(`#ube-icon-${iconId}`)?.innerHTML ?? '';
+    }
+
+    function addDrink(name: string, iconId: string, vol: number, abv: number): void {
+      const grams = vol * (abv / 100) * 0.8;
+      const ubes  = grams / 10;
+      drinks.push({ id: nextId++, name, iconId, vol, abv, grams, ubes });
+      renderList();
+    }
+
+    function removeDrink(id: number): void {
+      drinks = drinks.filter((d) => d.id !== id);
+      renderList();
+    }
+
+    function createDrinkCard(drink: ConsumedDrink): HTMLDivElement {
+      const card = document.createElement('div');
+      card.className = 'ube__drink';
+
+      const iconSpan = document.createElement('span');
+      iconSpan.className = 'ube__drink-icon';
+      iconSpan.innerHTML = getIconHtml(drink.iconId);
+      card.appendChild(iconSpan);
+
+      const infoDiv = document.createElement('div');
+      infoDiv.className = 'ube__drink-info';
+      const nameSpan = document.createElement('span');
+      nameSpan.className = 'ube__drink-name';
+      nameSpan.textContent = drink.name;
+      const detailSpan = document.createElement('span');
+      detailSpan.className = 'ube__drink-detail';
+      detailSpan.textContent = `${drink.vol} ml · ${drink.abv}% ABV`;
+      infoDiv.appendChild(nameSpan);
+      infoDiv.appendChild(detailSpan);
+      card.appendChild(infoDiv);
+
+      const gramsSpan = document.createElement('span');
+      gramsSpan.className = 'ube__drink-grams';
+      gramsSpan.textContent = `${drink.grams.toFixed(1)} g`;
+      card.appendChild(gramsSpan);
+
+      const removeBtn = document.createElement('button');
+      removeBtn.className = 'ube__drink-remove';
+      removeBtn.innerHTML = removeIconHtml;
+      removeBtn.setAttribute('aria-label', 'Remove');
+      removeBtn.addEventListener('click', () => removeDrink(drink.id));
+      card.appendChild(removeBtn);
+
+      return card;
+    }
+
+    function renderList(): void {
+      if (!listEl) return;
+      listEl.innerHTML = '';
+
+      if (drinks.length === 0) {
+        if (emptyEl) emptyEl.style.display = 'flex';
+        updateResults(0);
+        return;
+      }
+      if (emptyEl) emptyEl.style.display = 'none';
+
+      drinks.forEach(drink => listEl.appendChild(createDrinkCard(drink)));
+      const totalGrams = drinks.reduce((sum, d) => sum + d.grams, 0);
+      updateResults(totalGrams);
+    }
+
+    function updateResults(totalGrams: number): void {
+      const totalUbes = totalGrams / 10;
+      if (gramsEl)    gramsEl.textContent  = totalGrams.toFixed(1);
+      if (ubesEl)     ubesEl.textContent   = totalUbes.toFixed(2);
+      const pct = Math.min((totalUbes / 6) * 100, 100);
+      const tier = getRiskTier(totalUbes, ui);
+      if (riskFillEl)  { riskFillEl.style.width = `${pct}%`; riskFillEl.style.background = tier.gradient; }
+      if (riskBadgeEl) { riskBadgeEl.textContent = tier.label; riskBadgeEl.className = `ube__risk-badge ${tier.cls}`; }
+    }
+
+    function handlePresetClick(btn: HTMLButtonElement) {
+      const vol    = parseFloat(btn.dataset.vol ?? '0');
+      const abv    = parseFloat(btn.dataset.abv ?? '0');
+      const iconId = btn.dataset.iconId ?? 'custom';
+      const name   = btn.querySelector<HTMLElement>('.ube__preset-label')?.textContent ?? (ui.customDrinkName ?? 'Bebida');
+      addDrink(name, iconId, vol, abv);
+    }
+
+    // eslint-disable-next-line complexity
+    function handleCustomClick() {
+      const vol = parseFloat(volInput?.value ?? '0');
+      const abv = parseFloat(abvInput?.value ?? '0');
+      if (vol <= 0 || abv <= 0) return;
+      addDrink(ui.customDrinkName ?? 'Personalizada', 'custom', vol, abv);
+      if (volInput) volInput.value = '';
+      if (abvInput) abvInput.value = '';
+    }
+
+    container.querySelectorAll<HTMLButtonElement>('.ube__preset').forEach((btn) => {
+      btn.addEventListener('click', () => handlePresetClick(btn));
+    });
+
+    addBtn?.addEventListener('click', handleCustomClick);
+
+    renderList();
+  }
+
+  document.querySelectorAll<HTMLElement>('.ube').forEach(initUbe);
+</script>