@jjlmoya/utils-tools 1.1.0

package/src/tool/drive-direct-link/i18n/es.ts

@@ -0,0 +1,118 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { DriveDirectLinkUI } from '../ui';
+
+const faqData = [
+  {
+    question: '¿Cómo uso el conversor de descargas de Google Drive?',
+    answer: 'Copia el enlace completo de "Compartir" de cualquier archivo subido a Google Drive (con permisos públicos). Pégalo en el cuadro y pulsa "Generar Enlace Directo". Aparecerá una nueva URL que iniciará la descarga sin abrir el visor de Google.',
+  },
+  {
+    question: '¿Puedo hacer la descarga directa de un archivo privado?',
+    answer: 'Si el archivo es privado o con acceso restringido, Google solicitará que inicies sesión con una cuenta autorizada. Para descargas sin registro, los permisos del archivo deben estar en "Cualquier persona con el enlace puede ver".',
+  },
+  {
+    question: '¿Es seguro convertir mis links de Drive?',
+    answer: 'Sí. La conversión ocurre 100% en tu navegador de forma anónima. La herramienta no almacena tu enlace ni hace llamadas a servidores; únicamente analiza la estructura de la URL en el lado del cliente para generar la versión de descarga.',
+  },
+  {
+    question: '¿Qué pasa si mi archivo de Drive pesa mucho?',
+    answer: 'Para archivos superiores a aproximadamente 100 MB, Google Drive no permite la descarga instantánea directa. En su lugar mostrará una página de advertencia sobre el tamaño y el escaneo de antivirus. Es una política del servidor de Google que ninguna herramienta externa puede eludir.',
+  },
+];
+
+const howToData = [
+  { name: 'Copia el enlace de compartir', text: 'En Google Drive, haz clic derecho sobre el archivo y selecciona "Obtener enlace". Asegúrate de que los permisos permiten el acceso a cualquier persona.' },
+  { name: 'Pega el enlace en el generador', text: 'Introduce la URL completa de Drive en el campo de texto de la herramienta y pulsa el botón "Generar Enlace Directo".' },
+  { name: 'Copia y usa el enlace generado', text: 'Copia el nuevo enlace de descarga directa y úsalo en tus correos, sitio web, newsletters o donde necesites que el archivo se descargue de inmediato.' },
+];
+
+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: 'Cómo generar un enlace de descarga directa para Google Drive',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Generador de Enlace de Descarga Directa para Google Drive',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Convierte cualquier enlace de compartir de Google Drive en un enlace de descarga directa en un solo clic, sin pasar por la vista previa del archivo.',
+};
+
+const ui: DriveDirectLinkUI = {
+  inputLabel: 'Pega tu enlace de Google Drive aquí:',
+  inputPlaceholder: 'https://drive.google.com/file/d/...',
+  generateBtn: 'Generar Enlace Directo',
+  resultLabel: 'Enlace de Descarga Directa:',
+  copyTitle: 'Copiar al portapapeles',
+  copyDone: 'Copiado',
+  testBtn: 'Testear Descarga',
+  errorMsg: 'El enlace introducido no parece ser un enlace válido de Google Drive.',
+};
+
+export const content: ToolLocaleContent<DriveDirectLinkUI> = {
+  slug: 'enlace-descarga-directa-google-drive',
+  title: 'Generador de Enlace de Descarga Directa para Google Drive',
+  description: 'Convierte fácilmente cualquier enlace de compartir de Google Drive en un enlace de descarga directa en un solo clic, sin pasar por la vista previa del archivo, gratis.',
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'Referencias',
+  bibliography: [
+    { name: 'Descargar archivos de Google Drive (Google Workspace)', url: 'https://support.google.com/drive/answer/2423534' },
+    { name: 'Google Drive API: Download Files', url: 'https://developers.google.com/drive/api/guides/manage-downloads' },
+  ],
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', level: 2, text: 'Conversor de enlaces de Google Drive a descarga directa' },
+    {
+      type: 'paragraph',
+      html: 'Si compartes archivos frecuentemente mediante Google Drive, sabes lo molesto que puede ser el visor de vista previa. Cuando tus usuarios hacen clic en tu enlace, primero van a una pantalla intermedia que les obliga a buscar el botón de descarga. Nuestro <strong>generador de enlaces de descarga directa para Google Drive</strong> soluciona este problema convirtiendo cualquier enlace de compartir en uno que inicia la descarga automáticamente.',
+    },
+    { type: 'title', level: 3, text: '¿Por qué utilizar un enlace de descarga directa?' },
+    {
+      type: 'paragraph',
+      html: 'El principal beneficio es mejorar enormemente la experiencia del usuario. Al enviar un PDF, una imagen o un instalador de software, el comportamiento esperado es que al hacer clic la descarga empiece de inmediato:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Ahorro de tiempo:</strong> Descarga con un solo clic sin pasos adicionales.',
+        '<strong>Profesionalidad:</strong> Ideal para botones de descarga en sitios web, newsletters o correos a clientes.',
+        '<strong>Reducción de abandonos:</strong> Usuarios menos técnicos pueden confundirse en la vista previa de Drive sin saber dónde descargar.',
+        '<strong>Uso en HTML:</strong> Perfecto para atributos <code>href</code> o <code>src</code> en tus páginas.',
+      ],
+    },
+    { type: 'title', level: 3, text: '¿Cómo funciona nuestro creador de links directos?' },
+    {
+      type: 'paragraph',
+      html: 'El proceso ocurre 100% en tu navegador. Google Drive estructura sus enlaces de compartir de dos formas principales, ambas con un identificador único de archivo. La herramienta extrae ese ID y construye una nueva URL con el parámetro de exportación nativo de Google: <code>https://drive.google.com/uc?export=download&amp;id=TU_ID</code>.',
+    },
+    {
+      type: 'tip',
+      title: 'Aviso sobre archivos de gran tamaño',
+      html: 'Para archivos superiores a aproximadamente 100 MB, Google Drive mostrará una página de advertencia de escaneo de antivirus antes de la descarga. Es una política inamovible de los servidores de Google que ninguna herramienta externa puede eludir.',
+    },
+    { type: 'title', level: 3, text: 'Privacidad y seguridad garantizadas' },
+    {
+      type: 'paragraph',
+      html: 'Esta herramienta respeta por completo tu privacidad. Todo el proceso de transformación se realiza mediante JavaScript en el lado del cliente, en tu propio dispositivo. Ningún enlace, ID de archivo o información personal se envía a ningún servidor externo.',
+    },
+  ],
+};

package/src/tool/drive-direct-link/i18n/fr.ts

@@ -0,0 +1,118 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { DriveDirectLinkUI } from '../ui';
+
+const faqData = [
+  {
+    question: 'Comment utiliser le convertisseur de téléchargement Google Drive ?',
+    answer: 'Copiez le lien de partage complet de n\'importe quel fichier stocké sur Google Drive (il doit avoir des permissions publiques). Collez-le dans le champ de l\'outil et cliquez sur "Générer le lien direct". Une nouvelle URL apparaîtra qui lancera le téléchargement sans ouvrir le visionneur de Google.',
+  },
+  {
+    question: 'Puis-je générer un lien de téléchargement direct pour un fichier privé ?',
+    answer: 'Si le fichier est privé ou à accès restreint, Google vous demandera de vous connecter avec un compte autorisé. Pour des téléchargements sans inscription, les permissions du fichier doivent être réglées sur "Toute personne disposant du lien peut afficher".',
+  },
+  {
+    question: 'Est-il sécurisé de convertir mes liens Drive ici ?',
+    answer: 'Oui. La conversion se fait à 100 % dans votre navigateur de manière anonyme. L\'outil ne stocke pas votre lien et n\'effectue aucun appel serveur ; il analyse uniquement la structure de l\'URL côté client pour générer la version de téléchargement.',
+  },
+  {
+    question: 'Que se passe-t-il si mon fichier Drive est très volumineux ?',
+    answer: 'Pour les fichiers de plus d\'environ 100 Mo, Google Drive ne permet pas le téléchargement direct instantané. Il affichera à la place une page d\'avertissement concernant le scan antivirus. Il s\'agit d\'une politique fixe des serveurs Google qu\'aucun outil externe ne peut contourner.',
+  },
+];
+
+const howToData = [
+  { name: 'Copiez le lien de partage', text: 'Dans Google Drive, faites un clic droit sur le fichier et sélectionnez "Obtenir le lien". Assurez-vous que les permissions permettent l\'accès à toute personne disposant du lien.' },
+  { name: 'Collez le lien dans le générateur', text: 'Saisissez l\'URL complète de Drive dans le champ texte de l\'outil et cliquez sur le bouton "Générer le lien direct".' },
+  { name: 'Copiez et utilisez le lien généré', text: 'Copiez le nouveau lien de téléchargement direct et utilisez-le dans vos e-mails, sites web, newsletters ou partout où vous souhaitez que le fichier se télécharge immédiatement au clic.' },
+];
+
+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: 'Comment générer un lien de téléchargement direct pour Google Drive',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Générateur de Lien de Téléchargement Direct Google Drive',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Convertissez n\'importe quel lien de partage Google Drive en un lien de téléchargement direct en un clic, sans passer par la page de prévisualisation du fichier.',
+};
+
+const ui: DriveDirectLinkUI = {
+  inputLabel: 'Collez votre lien Google Drive ici :',
+  inputPlaceholder: 'https://drive.google.com/file/d/...',
+  generateBtn: 'Générer le lien direct',
+  resultLabel: 'Lien de téléchargement direct :',
+  copyTitle: 'Copier dans le presse-papiers',
+  copyDone: 'Copié',
+  testBtn: 'Tester le téléchargement',
+  errorMsg: 'Le lien saisi ne semble pas être un lien Google Drive valide.',
+};
+
+export const content: ToolLocaleContent<DriveDirectLinkUI> = {
+  slug: 'lien-telechargement-direct-google-drive',
+  title: 'Générateur de Lien de Téléchargement Direct Google Drive',
+  description: 'Convertissez facilement n\'importe quel lien de partage Google Drive en un lien de téléchargement direct en un seul clic, sans passer par la prévisualisation du fichier.',
+  ui,
+  faqTitle: 'Questions Fréquentes',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'Références',
+  bibliography: [
+    { name: 'Télécharger des fichiers depuis Google Drive (Google Workspace)', url: 'https://support.google.com/drive/answer/2423534' },
+    { name: 'Google Drive API : téléchargement de fichiers', url: 'https://developers.google.com/drive/api/guides/manage-downloads' },
+  ],
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', level: 2, text: 'Convertir des liens Google Drive en liens de téléchargement direct' },
+    {
+      type: 'paragraph',
+      html: 'Si vous partagez fréquemment des fichiers via Google Drive, vous savez combien la page de prévisualisation peut être gênante. Vos utilisateurs atterrissent sur un écran intermédiaire qui les oblige à chercher le bouton de téléchargement. Notre <strong>générateur de liens de téléchargement direct Google Drive</strong> résout ce problème en convertissant n\'importe quel lien de partage en un lien qui lance le téléchargement automatiquement.',
+    },
+    { type: 'title', level: 3, text: 'Pourquoi utiliser un lien de téléchargement direct ?' },
+    {
+      type: 'paragraph',
+      html: 'Le principal avantage est une bien meilleure expérience utilisateur. Lorsque vous partagez un PDF, une image ou un logiciel, l\'utilisateur s\'attend à ce que le fichier commence à se télécharger immédiatement :',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Gain de temps :</strong> Téléchargement en un clic sans étapes supplémentaires.',
+        '<strong>Image professionnelle :</strong> Idéal pour les boutons de téléchargement sur les sites web, newsletters ou e-mails clients.',
+        '<strong>Moins d\'abandons :</strong> Les utilisateurs moins techniques peuvent être désorientés par la prévisualisation Drive.',
+        '<strong>Compatible HTML :</strong> Parfait pour les attributs <code>href</code> ou <code>src</code> de vos pages web.',
+      ],
+    },
+    { type: 'title', level: 3, text: 'Comment fonctionne le générateur de lien direct ?' },
+    {
+      type: 'paragraph',
+      html: 'Tout se passe à 100 % dans votre navigateur. Les liens de partage Google Drive contiennent un identifiant unique de fichier. L\'outil extrait cet identifiant et construit une nouvelle URL avec le paramètre d\'export natif de Google : <code>https://drive.google.com/uc?export=download&amp;id=VOTRE_ID</code>.',
+    },
+    {
+      type: 'tip',
+      title: 'Avertissement pour les fichiers volumineux',
+      html: 'Pour les fichiers de plus d\'environ 100 Mo, Google Drive affiche une page d\'avertissement de scan antivirus avant le téléchargement. Il s\'agit d\'une politique fixe des serveurs Google qu\'aucun outil externe ne peut contourner.',
+    },
+    { type: 'title', level: 3, text: 'Confidentialité et sécurité garanties' },
+    {
+      type: 'paragraph',
+      html: 'Cet outil respecte totalement votre vie privée. Toute la transformation du lien est effectuée via JavaScript côté client, sur votre propre appareil. Aucun lien, identifiant de fichier ou information personnelle n\'est jamais envoyé à un serveur externe.',
+    },
+  ],
+};

package/src/tool/drive-direct-link/index.ts

@@ -0,0 +1,22 @@
+import type { ToolDefinition, ToolsToolEntry } from '../../types';
+import type { DriveDirectLinkUI } from './ui';
+import DriveDirectLinkComponent from './component.astro';
+import DriveDirectLinkSEO from './seo.astro';
+import DriveDirectLinkBibliography from './bibliography.astro';
+
+export const driveDirectLink: ToolsToolEntry<DriveDirectLinkUI> = {
+  id: 'drive-direct-link',
+  icons: { bg: 'mdi:google-drive', fg: 'mdi:download' },
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+  },
+};
+
+export const DRIVE_DIRECT_LINK_TOOL: ToolDefinition = {
+  entry: driveDirectLink,
+  Component: DriveDirectLinkComponent,
+  SEOComponent: DriveDirectLinkSEO,
+  BibliographyComponent: DriveDirectLinkBibliography,
+};

package/src/tool/drive-direct-link/seo.astro

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

package/src/tool/drive-direct-link/ui.ts

@@ -0,0 +1,10 @@
+export interface DriveDirectLinkUI extends Record<string, string> {
+  inputLabel: string;
+  inputPlaceholder: string;
+  generateBtn: string;
+  resultLabel: string;
+  copyTitle: string;
+  copyDone: string;
+  testBtn: string;
+  errorMsg: string;
+}

package/src/tool/email-list-cleaner/bibliography.astro

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

package/src/tool/email-list-cleaner/component.astro

@@ -0,0 +1,375 @@
+---
+import type { EmailListCleanerUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as EmailListCleanerUI;
+---
+
+<div class="elc-root" data-ui={JSON.stringify(t)}>
+  <div class="elc-card">
+    <div class="elc-field">
+      <div class="elc-label-row">
+        <label class="elc-label" for="elc-input">{t.inputLabel}</label>
+        <span class="elc-badge" id="elc-counter">0 {t.registered}</span>
+      </div>
+      <textarea
+        class="elc-textarea"
+        id="elc-input"
+        placeholder={t.inputPlaceholder}
+        spellcheck="false"
+      ></textarea>
+      <div class="elc-actions">
+        <button class="elc-btn elc-btn-primary" id="elc-clean" type="button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 11V7a5 5 0 0 1 10 0v4"></path><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M12 15v3"></path></svg>
+          {t.cleanBtn}
+        </button>
+        <button class="elc-btn elc-btn-secondary" id="elc-clear" type="button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>
+          {t.clearBtn}
+        </button>
+      </div>
+    </div>
+
+    <div class="elc-results" id="elc-results" style="display: none">
+      <div class="elc-stats">
+        <div class="elc-stat">
+          <span class="elc-stat-value" id="elc-stat-original">0</span>
+          <span class="elc-stat-label">{t.statsOriginal}</span>
+        </div>
+        <div class="elc-stat">
+          <span class="elc-stat-value elc-stat-removed" id="elc-stat-removed">0</span>
+          <span class="elc-stat-label">{t.statsRemoved}</span>
+        </div>
+        <div class="elc-stat">
+          <span class="elc-stat-value elc-stat-clean" id="elc-stat-final">0</span>
+          <span class="elc-stat-label">{t.statsFinal}</span>
+        </div>
+      </div>
+
+      <div class="elc-field">
+        <div class="elc-label-row">
+          <label class="elc-label" for="elc-output">{t.resultLabel}</label>
+          <span class="elc-badge" id="elc-result-counter">0</span>
+        </div>
+        <textarea
+          class="elc-textarea elc-textarea-result"
+          id="elc-output"
+          readonly
+          spellcheck="false"
+        ></textarea>
+      </div>
+
+      <div class="elc-actions">
+        <button class="elc-btn elc-btn-primary" id="elc-copy" type="button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+          <span id="elc-copy-text">{t.copyBtn}</span>
+        </button>
+        <button class="elc-btn elc-btn-secondary" id="elc-download" type="button">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+          {t.downloadBtn}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .elc-root {
+    --elc-indigo: #6366f1;
+    --elc-indigo-dark: #4f46e5;
+    --elc-purple: #a855f7;
+    --elc-green: #10b981;
+    --elc-rose: #f43f5e;
+    --elc-card-bg: rgba(255, 255, 255, 0.7);
+    --elc-card-border: rgba(255, 255, 255, 0.4);
+    --elc-field-bg: #fff;
+    --elc-field-border: #e2e8f0;
+    --elc-text-main: #1e293b;
+    --elc-text-label: #64748b;
+    --elc-result-bg: rgba(99, 102, 241, 0.05);
+    --elc-divider: #e2e8f0;
+    --elc-stat-bg: rgba(255, 255, 255, 0.5);
+    --elc-stat-border: rgba(255, 255, 255, 0.4);
+
+    width: 100%;
+    max-width: 860px;
+    margin: 0 auto;
+  }
+
+  :global(.theme-dark) .elc-root {
+    --elc-card-bg: rgba(15, 23, 42, 0.6);
+    --elc-card-border: rgba(255, 255, 255, 0.1);
+    --elc-field-bg: #1e293b;
+    --elc-field-border: #334155;
+    --elc-text-main: #f1f5f9;
+    --elc-text-label: #94a3b8;
+    --elc-result-bg: rgba(99, 102, 241, 0.08);
+    --elc-divider: #334155;
+    --elc-stat-bg: rgba(30, 41, 59, 0.4);
+    --elc-stat-border: rgba(255, 255, 255, 0.1);
+  }
+
+  .elc-card {
+    background: var(--elc-card-bg);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--elc-card-border);
+    border-radius: 1.5rem;
+    padding: 2.5rem;
+    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .elc-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .elc-label-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .elc-label {
+    font-size: 0.8125rem;
+    font-weight: 700;
+    color: var(--elc-text-label);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .elc-badge {
+    font-size: 0.75rem;
+    font-weight: 600;
+    background: rgba(99, 102, 241, 0.1);
+    color: var(--elc-indigo);
+    padding: 0.2rem 0.65rem;
+    border-radius: 99px;
+  }
+
+  .elc-textarea {
+    width: 100%;
+    min-height: 220px;
+    padding: 1rem 1.25rem;
+    border-radius: 1rem;
+    border: 2px solid var(--elc-field-border);
+    background: var(--elc-field-bg);
+    color: var(--elc-text-main);
+    font-size: 0.9375rem;
+    resize: vertical;
+    outline: none;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+  }
+
+  .elc-textarea:focus {
+    border-color: var(--elc-indigo);
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+  }
+
+  .elc-textarea-result {
+    min-height: 180px;
+    background: var(--elc-result-bg);
+  }
+
+  .elc-actions {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .elc-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.375rem;
+    border-radius: 0.75rem;
+    font-size: 0.9375rem;
+    font-weight: 700;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .elc-btn-primary {
+    background: linear-gradient(135deg, var(--elc-indigo), var(--elc-purple));
+    color: #fff;
+  }
+
+  .elc-btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
+  }
+
+  .elc-btn-secondary {
+    background: rgba(99, 102, 241, 0.1);
+    color: var(--elc-indigo);
+  }
+
+  .elc-btn-secondary:hover {
+    background: rgba(99, 102, 241, 0.2);
+  }
+
+  .elc-results {
+    flex-direction: column;
+    gap: 1.5rem;
+    border-top: 2px dashed var(--elc-divider);
+    padding-top: 2rem;
+  }
+
+  .elc-stats {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+  }
+
+  .elc-stat {
+    background: var(--elc-stat-bg);
+    border: 1px solid var(--elc-stat-border);
+    border-radius: 1rem;
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .elc-stat-value {
+    font-size: 1.75rem;
+    font-weight: 800;
+    color: var(--elc-indigo);
+  }
+
+  .elc-stat-removed {
+    color: var(--elc-rose);
+  }
+
+  .elc-stat-clean {
+    color: var(--elc-green);
+  }
+
+  .elc-stat-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--elc-text-label);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  @media (max-width: 640px) {
+    .elc-card {
+      padding: 1.5rem;
+    }
+
+    .elc-stats {
+      grid-template-columns: 1fr;
+    }
+
+    .elc-actions {
+      flex-direction: column;
+    }
+
+    .elc-btn {
+      justify-content: center;
+    }
+  }
+</style>
+
+<script>
+  import type { EmailListCleanerUI } from './ui';
+
+  const root = document.querySelector('.elc-root') as HTMLElement;
+  const t = JSON.parse(root?.dataset.ui ?? '{}') as EmailListCleanerUI;
+
+  const input = document.getElementById('elc-input') as HTMLTextAreaElement;
+  const output = document.getElementById('elc-output') as HTMLTextAreaElement;
+  const results = document.getElementById('elc-results') as HTMLDivElement;
+  const counter = document.getElementById('elc-counter') as HTMLSpanElement;
+  const resultCounter = document.getElementById('elc-result-counter') as HTMLSpanElement;
+  const statOriginal = document.getElementById('elc-stat-original') as HTMLSpanElement;
+  const statRemoved = document.getElementById('elc-stat-removed') as HTMLSpanElement;
+  const statFinal = document.getElementById('elc-stat-final') as HTMLSpanElement;
+  const cleanBtn = document.getElementById('elc-clean') as HTMLButtonElement;
+  const clearBtn = document.getElementById('elc-clear') as HTMLButtonElement;
+  const copyBtn = document.getElementById('elc-copy') as HTMLButtonElement;
+  const copyText = document.getElementById('elc-copy-text') as HTMLSpanElement;
+  const downloadBtn = document.getElementById('elc-download') as HTMLButtonElement;
+
+  const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+  function updateCounter(): void {
+    const text = input.value.trim();
+    if (!text) {
+      counter.textContent = `0 ${t.registered}`;
+      return;
+    }
+    const raw = text.split(/[\s,]+/).filter((e) => e !== '');
+    counter.textContent = `${raw.length.toLocaleString()} ${t.registered}`;
+  }
+
+  function clean(): void {
+    const rawText = input.value.trim();
+    if (!rawText) return;
+
+    const raw = rawText.split(/[\s,]+/).filter((e) => e !== '');
+    const originalCount = raw.length;
+    const valid = raw.filter((email) => EMAIL_REGEX.test(email));
+    const unique = Array.from(new Set(valid.map((email) => email.toLowerCase())));
+    const finalCount = unique.length;
+    const removedCount = originalCount - finalCount;
+
+    output.value = unique.join('\n');
+    statOriginal.textContent = originalCount.toLocaleString();
+    statRemoved.textContent = removedCount.toLocaleString();
+    statFinal.textContent = finalCount.toLocaleString();
+    resultCounter.textContent = finalCount.toLocaleString();
+
+    results.style.display = 'flex';
+    results.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+
+  function clearAll(): void {
+    input.value = '';
+    output.value = '';
+    results.style.display = 'none';
+    updateCounter();
+  }
+
+  async function copy(): Promise<void> {
+    try {
+      await navigator.clipboard.writeText(output.value);
+      copyText.textContent = t.copyDone;
+      copyBtn.style.background = '#10b981';
+      setTimeout(() => {
+        copyText.textContent = t.copyBtn;
+        copyBtn.style.background = '';
+      }, 2000);
+    } catch {
+    }
+  }
+
+  function download(): void {
+    const blob = new Blob([output.value], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${t.downloadFilename}-${new Date().toISOString().split('T')[0]}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  input.addEventListener('input', updateCounter);
+  cleanBtn.addEventListener('click', clean);
+  clearBtn.addEventListener('click', clearAll);
+  copyBtn.addEventListener('click', copy);
+  downloadBtn.addEventListener('click', download);
+</script>