@jjlmoya/utils-audiovisual 1.2.0

package/src/tool/exifCleaner/style.css

@@ -0,0 +1,289 @@
+.ec-root {
+  --ec-bg: #fff;
+  --ec-bg-elevated: #f8fafc;
+  --ec-border: #e2e8f0;
+  --ec-text: #0f172a;
+  --ec-text-muted: #64748b;
+  --ec-accent: #6366f1;
+  --ec-accent-alpha: rgba(99, 102, 241, 0.08);
+  --ec-accent-alpha-hover: rgba(99, 102, 241, 0.02);
+  --ec-shadow: rgba(0, 0, 0, 0.15);
+
+  padding: 2.5rem 1.5rem;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.theme-dark .ec-root {
+  --ec-bg: #18181b;
+  --ec-bg-elevated: #27272a;
+  --ec-border: #3f3f46;
+  --ec-text: #f4f4f5;
+  --ec-text-muted: #71717a;
+  --ec-accent: #818cf8;
+  --ec-accent-alpha: rgba(129, 140, 248, 0.12);
+  --ec-accent-alpha-hover: rgba(129, 140, 248, 0.02);
+  --ec-shadow: rgba(0, 0, 0, 0.3);
+}
+
+.ec-card {
+  background: var(--ec-bg);
+  border: 1px solid var(--ec-border);
+  border-radius: 3rem;
+  padding: 1.5rem;
+  box-shadow: 0 45px 120px -30px var(--ec-shadow);
+  position: relative;
+  overflow: hidden;
+}
+
+.ec-drop {
+  padding: 4rem 2rem;
+  border: 3px dashed var(--ec-border);
+  border-radius: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+  gap: 1.5rem;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ec-drop:hover,
+.ec-drop-active {
+  border-color: var(--ec-accent);
+  background: var(--ec-accent-alpha-hover);
+}
+
+.ec-drop-icon {
+  width: 6rem;
+  height: 6rem;
+  background: var(--ec-accent-alpha);
+  border-radius: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ec-accent);
+}
+
+.ec-drop-icon svg {
+  width: 3rem;
+  height: 3rem;
+}
+
+.ec-title {
+  font-size: 2.5rem;
+  font-weight: 950;
+  color: var(--ec-text);
+  margin: 0;
+}
+
+.ec-subtitle {
+  font-size: 1.15rem;
+  color: var(--ec-text-muted);
+  max-width: 500px;
+  margin: 0;
+  font-weight: 700;
+}
+
+.ec-badges {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.ec-badge {
+  padding: 0.6rem 1.25rem;
+  background: var(--ec-bg-elevated);
+  border-radius: 2rem;
+  font-size: 0.8rem;
+  font-weight: 800;
+  color: var(--ec-text-muted);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.ec-badge svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.ec-processing {
+  padding: 5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.ec-spinner {
+  width: 4rem;
+  height: 4rem;
+  border: 4px solid var(--ec-accent-alpha);
+  border-top-color: var(--ec-accent);
+  border-radius: 50%;
+  animation: ec-spin 0.8s linear infinite;
+}
+
+.ec-processing-text {
+  font-weight: 800;
+  color: var(--ec-text);
+  margin: 0;
+}
+
+.ec-result {
+  padding: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  animation: ec-slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.ec-result-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+}
+
+@media (max-width: 800px) {
+  .ec-result-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+.ec-preview-col {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.ec-preview-img {
+  width: 100%;
+  border-radius: 1.5rem;
+  box-shadow: 0 20px 50px var(--ec-shadow);
+  display: block;
+}
+
+.ec-metadata {
+  background: var(--ec-bg-elevated);
+  border: 1px solid var(--ec-border);
+  border-radius: 1.25rem;
+  padding: 1.5rem;
+  min-height: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.ec-no-metadata {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--ec-text-muted);
+  text-align: center;
+}
+
+.ec-metadata-title {
+  color: var(--ec-accent);
+  font-weight: 700;
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+}
+
+.ec-metadata-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.ec-metadata-list li {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--ec-text);
+}
+
+.ec-metadata-list li span:first-child {
+  font-weight: 700;
+}
+
+.ec-metadata-list li span:last-child {
+  color: var(--ec-text-muted);
+}
+
+.ec-actions-col {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.ec-btn {
+  padding: 1.25rem;
+  border-radius: 1.5rem;
+  font-weight: 950;
+  font-size: 1.1rem;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  transition: all 0.2s;
+}
+
+.ec-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.ec-btn-primary {
+  background: var(--ec-accent);
+  color: #fff;
+  box-shadow: 0 15px 35px -10px var(--ec-accent);
+}
+
+.ec-btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 45px -10px var(--ec-accent);
+}
+
+.ec-btn-secondary {
+  background: var(--ec-bg-elevated);
+  border: 1px solid var(--ec-border);
+  color: var(--ec-text);
+}
+
+.ec-btn-secondary:hover {
+  border-color: var(--ec-accent);
+  color: var(--ec-accent);
+}
+
+.ec-hidden {
+  display: none;
+}
+
+@keyframes ec-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ec-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/tool/exifCleaner/ui.ts

@@ -0,0 +1,117 @@
+import { extractExif, createCleanImage } from './logic';
+import type { ExifCleanerUI } from './index';
+
+export interface ExifEls {
+    initial: HTMLElement;
+    processing: HTMLElement;
+    result: HTMLElement;
+    preview: HTMLImageElement;
+    download: HTMLElement;
+    reset: HTMLElement;
+    list: HTMLElement;
+    input: HTMLInputElement;
+}
+
+function renderLog(tags: Record<string, string | number | boolean | undefined>, list: HTMLElement, riskTitle: string) {
+    if (!list) return;
+    const keys = Object.keys(tags);
+    if (keys.length === 0) {
+        list.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8"><p>No se encontraron metadatos.</p></div>`;
+        return;
+    }
+
+    let html = `<div style="color: var(--accent); font-weight: 700; margin-bottom: 0.5rem">${riskTitle}</div><ul style="list-style: none; padding: 0; margin-bottom: 1rem">`;
+    if (tags.GPSLocation) html += `<li style="color: var(--primary-base); font-weight: 700; display: flex; justify-content: space-between"><span>GPS:</span> <span style="font-size: 0.6rem; text-align: right">${tags.GPSLocation}</span></li>`;
+    if (tags.Model) html += `<li style="color: var(--accent); display: flex; justify-content: space-between"><span>CAMARA:</span> <span>${tags.Model}</span></li>`;
+    if (tags.DateTimeOriginal) html += `<li style="color: var(--cyan); display: flex; justify-content: space-between"><span>FECHA:</span> <span>${tags.DateTimeOriginal}</span></li>`;
+    list.innerHTML = html + "</ul>";
+}
+
+function handleDownload(file: File, blob: Blob | null) {
+    if (blob) {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `CLEAN_${file.name.split(".")[0]}.webp`;
+        a.click();
+        setTimeout(() => URL.revokeObjectURL(url), 100);
+    }
+}
+
+async function processAndClean(file: File, els: ExifEls, labels: ExifCleanerUI) {
+    els.processing.classList.remove("hidden");
+    els.initial.classList.add("hidden");
+
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+        const metadata = await extractExif(file);
+        const img = new Image();
+        img.onload = async () => {
+            if (els.preview) els.preview.src = img.src;
+            renderLog(metadata, els.list, labels.privacyRiskTitle);
+            const blob = await createCleanImage(img);
+            
+            els.download.onclick = () => handleDownload(file, blob);
+            
+            els.processing.classList.add("hidden");
+            els.result.classList.remove("hidden");
+            setTimeout(() => els.result.classList.remove("opacity-0"), 50);
+        };
+        img.src = e.target?.result as string;
+    };
+    reader.readAsDataURL(file);
+}
+
+function setupEvents(root: HTMLElement, els: ExifEls, labels: ExifCleanerUI) {
+    root.onclick = (e) => {
+        const isButton = (e.target as HTMLElement).closest('button') || (e.target as HTMLElement).closest('label');
+        if (!isButton && els.result.classList.contains('hidden')) {
+            els.input.click();
+        }
+    };
+
+    root.ondragover = (e) => {
+        e.preventDefault();
+        root.classList.add("drop-zone-active");
+    };
+
+    root.ondragleave = () => root.classList.remove("drop-zone-active");
+    root.ondrop = (e: DragEvent) => {
+        e.preventDefault();
+        root.classList.remove("drop-zone-active");
+        if (e.dataTransfer?.files[0]) processAndClean(e.dataTransfer.files[0], els, labels);
+    };
+
+    els.input.onchange = () => {
+        if (els.input.files?.[0]) processAndClean(els.input.files[0], els, labels);
+    };
+
+    els.reset.onclick = () => {
+        els.result.classList.add("opacity-0");
+        setTimeout(() => {
+            els.result.classList.add("hidden");
+            els.initial.classList.remove("hidden");
+            els.input.value = "";
+        }, 300);
+    };
+}
+
+export const initExifCleaner = () => {
+    const root = document.getElementById('exif-cleaner-root');
+    if (!root) return;
+
+    const labels = JSON.parse(root.dataset.ui || '{}') as ExifCleanerUI;
+
+    const els: ExifEls = {
+        initial: root.querySelector("#initial-state")!,
+        processing: root.querySelector("#processing-state")!,
+        result: root.querySelector("#result-state")!,
+        preview: root.querySelector("#result-preview") as HTMLImageElement,
+        download: root.querySelector("#download-btn")!,
+        reset: root.querySelector("#reset-button")!,
+        list: root.querySelector("#metadata-list")!,
+        input: root.querySelector("#file-upload") as HTMLInputElement
+    };
+
+    setupEvents(root, els, labels);
+};

package/src/tool/imageCompressor/bibliography.astro

@@ -0,0 +1,17 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { imageCompressor } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await imageCompressor.i18n[locale]?.();
+if (!content || !content.bibliography || content.bibliography.length === 0) return null;
+
+const { bibliography, bibliographyTitle = 'Bibliografía' } = content;
+---
+
+<SharedBibliography title={bibliographyTitle} links={bibliography} />

package/src/tool/imageCompressor/component.astro

@@ -0,0 +1,262 @@
+---
+import './style.css';
+---
+
+<div class="ic-dashboard" id="image-compressor-root">
+
+  <div class="ic-global-settings">
+    <div class="ic-toggle-group">
+      <label class="ic-webp-switch">
+        <input type="checkbox" id="global-webp-toggle" checked />
+        <span class="ic-webp-slider"></span>
+      </label>
+      <span class="ic-toggle-label">Convertir a WebP</span>
+    </div>
+    <div class="ic-settings-group">
+      <label for="global-quality">Compresión: <span id="global-q-val">80</span>%</label>
+      <input type="range" id="global-quality" min="10" max="100" value="80" class="ic-mini-slider" />
+    </div>
+  </div>
+
+  <div id="drop-zone" class="ic-drop-zone">
+    <label for="image-input" class="ic-file-label">
+      <span class="ic-upload-icon">
+        <svg viewBox="0 0 24 24" fill="none" width="48" height="48" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M16 8l-4-4-4 4M12 4v12" />
+        </svg>
+      </span>
+      <span class="ic-upload-text">Suelta tus imágenes aquí</span>
+      <span class="ic-upload-subtext">Soporta múltiples archivos a la vez</span>
+      <span class="ic-upload-btn">Explorar archivos</span>
+    </label>
+    <input type="file" id="image-input" accept="image/jpeg,image/png,image/webp" multiple />
+  </div>
+
+  <div id="file-list-container" class="ic-file-list-container" style="display:none">
+    <div class="ic-list-header">
+      <h3>Archivos Procesados</h3>
+      <span id="total-savings" class="ic-total-savings"></span>
+    </div>
+    <ul id="file-list" class="ic-file-list"></ul>
+    <div class="ic-global-actions">
+      <button id="download-all" class="ic-primary-btn">Descargar Todas</button>
+    </div>
+  </div>
+
+</div>
+
+<template id="file-item-template">
+  <li class="ic-file-item">
+    <div class="ic-preview-col">
+      <div class="ic-preview-wrapper">
+        <img class="ic-preview-img" alt="Preview" />
+      </div>
+      <div class="ic-file-info">
+        <span class="ic-filename"></span>
+        <span class="ic-orig-size"></span>
+      </div>
+    </div>
+
+    <div class="ic-arrow-col">
+      <div class="ic-arrow-circle">
+        <svg viewBox="0 0 24 24" fill="none" width="20" height="20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M14 5l7 7-7 7M3 12h18" />
+        </svg>
+      </div>
+    </div>
+
+    <div class="ic-result-col">
+      <div class="ic-savings-pill">
+        <span class="ic-new-size"></span>
+        <span class="ic-savings-pct"></span>
+      </div>
+      <div class="ic-item-actions">
+        <button class="ic-icon-btn ic-edit-btn" title="Ajustar esta imagen">
+          <svg viewBox="0 0 24 24" fill="none" width="18" height="18" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.6 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+        </button>
+        <a class="ic-icon-btn ic-download-btn" title="Descargar" download>
+          <svg viewBox="0 0 24 24" fill="none" width="18" height="18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 4v12M8 12l4 4 4-4"/></svg>
+        </a>
+      </div>
+    </div>
+
+    <div class="ic-inline-editor" style="display:none">
+      <div class="ic-editor-controls">
+        <div class="ic-editor-group">
+          <label>Calidad: <span class="ic-local-q-val">80</span>%</label>
+          <input type="range" class="ic-local-quality" min="10" max="100" value="80" />
+        </div>
+        <div class="ic-editor-group">
+          <label>Ancho máx. (px):</label>
+          <input type="number" class="ic-local-width" placeholder="Original" />
+        </div>
+      </div>
+      <button class="ic-editor-close">Cerrar</button>
+    </div>
+  </li>
+</template>
+
+<script>
+  import { compressImage, formatBytes, generateId, type CompressorSettings } from './logic';
+
+  interface QueueItem {
+    id: string;
+    file: File;
+    originalSize: number;
+    settings: CompressorSettings;
+    dataUrl: string;
+    newSize: number;
+    ext: string;
+  }
+
+  const queue = new Map<string, QueueItem>();
+  let totalOriginalSize = 0;
+  let totalCompressedSize = 0;
+
+  const dropZone       = document.getElementById('drop-zone') as HTMLElement;
+  const fileInput      = document.getElementById('image-input') as HTMLInputElement;
+  const container      = document.getElementById('file-list-container') as HTMLElement;
+  const fileList       = document.getElementById('file-list') as HTMLUListElement;
+  const totalSavingsTxt= document.getElementById('total-savings') as HTMLElement;
+  const downloadAllBtn = document.getElementById('download-all') as HTMLButtonElement;
+  const template       = document.getElementById('file-item-template') as HTMLTemplateElement;
+  const globalQuality  = document.getElementById('global-quality') as HTMLInputElement;
+  const globalQVal     = document.getElementById('global-q-val') as HTMLElement;
+  const globalWebp     = document.getElementById('global-webp-toggle') as HTMLInputElement;
+
+  globalQuality?.addEventListener('input', () => {
+    globalQVal.textContent = globalQuality.value;
+  });
+
+  async function handleFiles(files: FileList | File[]) {
+    if (!files.length) return;
+    container.style.display = '';
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      if (!file || !file.type.startsWith('image/')) continue;
+
+      const id = generateId();
+      const settings: CompressorSettings = {
+        quality: parseInt(globalQuality.value),
+        width: null,
+        convertToWebp: globalWebp?.checked ?? true,
+      };
+      const item: QueueItem = { id, file, originalSize: file.size, settings, dataUrl: '', newSize: 0, ext: 'webp' };
+      queue.set(id, item);
+      totalOriginalSize += file.size;
+
+      appendItem(item);
+      await processItem(item);
+      updateTotals();
+    }
+  }
+
+  function appendItem(item: QueueItem) {
+    const clone = template.content.cloneNode(true) as DocumentFragment;
+    const li = clone.querySelector('li') as HTMLLIElement;
+    li.dataset.id = item.id;
+
+    (li.querySelector('.ic-filename') as HTMLElement).textContent = item.file.name;
+    (li.querySelector('.ic-orig-size') as HTMLElement).textContent = formatBytes(item.originalSize);
+
+    const localQ    = li.querySelector('.ic-local-quality') as HTMLInputElement;
+    const localQVal = li.querySelector('.ic-local-q-val') as HTMLElement;
+    const localW    = li.querySelector('.ic-local-width') as HTMLInputElement;
+    const editor    = li.querySelector('.ic-inline-editor') as HTMLElement;
+    const editBtn   = li.querySelector('.ic-edit-btn') as HTMLButtonElement;
+    const closeBtn  = li.querySelector('.ic-editor-close') as HTMLButtonElement;
+
+    localQ.value = item.settings.quality.toString();
+    localQVal.textContent = item.settings.quality.toString();
+
+    editBtn.addEventListener('click', () => {
+      editor.style.display = editor.style.display === 'none' ? '' : 'none';
+    });
+    closeBtn.addEventListener('click', () => { editor.style.display = 'none'; });
+
+    localQ.addEventListener('input', () => { localQVal.textContent = localQ.value; });
+    localQ.addEventListener('change', () => {
+      item.settings.quality = parseInt(localQ.value);
+      processItem(item).then(() => updateTotals());
+    });
+    localW.addEventListener('change', () => {
+      item.settings.width = localW.value ? parseInt(localW.value) : null;
+      processItem(item).then(() => updateTotals());
+    });
+
+    fileList.appendChild(li);
+  }
+
+  async function processItem(item: QueueItem): Promise<void> {
+    const li = fileList.querySelector(`li[data-id="${item.id}"]`) as HTMLLIElement;
+    const result = await compressImage(item.file, item.settings);
+
+    item.dataUrl = result.dataUrl;
+    item.newSize = result.newSize;
+
+    const format = item.settings.convertToWebp ? 'image/webp' : item.file.type;
+    item.ext = format.split('/')[1] ?? 'jpeg';
+
+    if (!li) return;
+
+    const previewImg  = li.querySelector('.ic-preview-img') as HTMLImageElement;
+    const newSizeTxt  = li.querySelector('.ic-new-size') as HTMLElement;
+    const savingsPct  = li.querySelector('.ic-savings-pct') as HTMLElement;
+    const pill        = li.querySelector('.ic-savings-pill') as HTMLElement;
+    const downloadBtn = li.querySelector('.ic-download-btn') as HTMLAnchorElement;
+
+    previewImg.src = result.dataUrl;
+
+    newSizeTxt.textContent = formatBytes(result.newSize);
+    const savings = ((item.originalSize - result.newSize) / item.originalSize) * 100;
+
+    if (savings < 0) {
+      savingsPct.textContent = `+${Math.abs(savings).toFixed(1)}%`;
+      pill.classList.add('ic-savings-pill-negative');
+    } else {
+      savingsPct.textContent = `-${savings.toFixed(1)}%`;
+      pill.classList.remove('ic-savings-pill-negative');
+    }
+
+    const baseName = item.file.name.replace(/\.[^/.]+$/, '');
+    downloadBtn.href = result.dataUrl;
+    downloadBtn.download = `${baseName}.${item.ext}`;
+  }
+
+  function updateTotals() {
+    totalCompressedSize = Array.from(queue.values()).reduce((sum, i) => sum + i.newSize, 0);
+    const saved = totalOriginalSize - totalCompressedSize;
+    if (saved > 0) {
+      totalSavingsTxt.textContent = `Ahorro total: ${formatBytes(saved)}`;
+      totalSavingsTxt.style.color = '#10b981';
+    } else {
+      totalSavingsTxt.textContent = 'Sin ahorro neto';
+      totalSavingsTxt.style.color = '#ef4444';
+    }
+  }
+
+  dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('ic-dragover'); });
+  dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('ic-dragover'); });
+  dropZone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropZone.classList.remove('ic-dragover');
+    if (e.dataTransfer?.files.length) handleFiles(e.dataTransfer.files);
+  });
+  fileInput.addEventListener('change', () => {
+    if (fileInput.files?.length) handleFiles(fileInput.files);
+  });
+
+  downloadAllBtn.addEventListener('click', () => {
+    queue.forEach((item) => {
+      if (!item.dataUrl) return;
+      const a = document.createElement('a');
+      a.href = item.dataUrl;
+      const baseName = item.file.name.replace(/\.[^/.]+$/, '');
+      a.download = `${baseName}.${item.ext}`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    });
+  });
+</script>