@jjlmoya/utils-tools 1.1.0

package/src/tool/text-pixel-calculator/components/Stats.astro

@@ -0,0 +1,87 @@
+---
+interface Props {
+  widthLabel: string;
+  charsLabel: string;
+}
+
+const { widthLabel, charsLabel } = Astro.props;
+---
+
+<div class="tpc-stats">
+  <div class="tpc-stat-card">
+    <div class="tpc-stat-glow"></div>
+    <div class="tpc-stat-inner">
+      <span class="tpc-stat-value" id="tpc-width">0</span>
+      <span class="tpc-stat-label">{widthLabel} (px)</span>
+    </div>
+  </div>
+  <div class="tpc-stat-card">
+    <div class="tpc-stat-inner">
+      <span class="tpc-stat-value" id="tpc-chars">0</span>
+      <span class="tpc-stat-label">{charsLabel}</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .tpc-stats {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    padding: 1.5rem 0;
+  }
+
+  .tpc-stat-card {
+    position: relative;
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    border-radius: 1.25rem;
+    padding: 1.25rem;
+    overflow: hidden;
+    transition: transform 0.2s;
+  }
+
+  :global(.theme-dark) .tpc-stat-card {
+    background: rgba(15, 23, 42, 0.6);
+    border-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .tpc-stat-card:hover {
+    transform: translateY(-2px);
+  }
+
+  .tpc-stat-inner {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .tpc-stat-value {
+    font-size: 2.5rem;
+    font-weight: 800;
+    color: var(--tpc-cyan);
+    line-height: 1.1;
+    font-family: 'JetBrains Mono', monospace;
+  }
+
+  .tpc-stat-label {
+    font-size: 0.625rem;
+    font-weight: 700;
+    color: var(--tpc-text-label);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .tpc-stat-glow {
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%);
+    pointer-events: none;
+  }
+</style>

package/src/tool/text-pixel-calculator/i18n/en.ts

@@ -0,0 +1,133 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { TextPixelCalculatorUI } from '../ui';
+
+const faqData = [
+  {
+    question: 'How do I calculate the pixel width of text online?',
+    answer: 'Paste your text into the input box, configure the font and size, and the tool will automatically use the browser Canvas API to return the exact width in pixels.',
+  },
+  {
+    question: 'Why does pixel width vary between typefaces?',
+    answer: "Most fonts are proportional, meaning each character has a different width. For example, an uppercase 'M' is always wider than a lowercase 'i' in a standard sans-serif font.",
+  },
+  {
+    question: 'Is measuring characters the same as measuring pixels?',
+    answer: 'No. Measuring characters gives you the string length, while measuring pixels gives you the visual space it occupies. This is crucial to ensure text does not overflow its container in a web design.',
+  },
+  {
+    question: 'Can I use any Google Fonts typeface?',
+    answer: 'Yes, as long as the font is installed on your operating system or loaded on the current page, the tool will measure its dimensions accurately.',
+  },
+  {
+    question: 'Is it safe to process private text or code snippets?',
+    answer: 'Yes. The calculator works entirely locally. No data is sent to external servers, guaranteeing complete privacy for your projects.',
+  },
+];
+
+const howToData = [
+  { name: 'Enter the text', text: 'Type or paste the text you want to measure into the input area.' },
+  { name: 'Configure the font', text: 'Set the font family, size in pixels, weight and whether it is italic.' },
+  { name: 'Read the result', text: 'The pixel width and character count update in real time.' },
+  { name: 'Copy the value', text: 'Click "Copy Width" to save the pixel number to the clipboard.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: 'How to measure text width in pixels',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Text Pixel Width Calculator',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Accurately calculate the pixel width of any text based on font, size and style.',
+};
+
+const ui: TextPixelCalculatorUI = {
+  textLabel: 'Text to measure',
+  textPlaceholder: 'Type or paste here the text you want to measure...',
+  defaultText: 'Hello World',
+  fontLabel: 'Font family',
+  sizeLabel: 'Size (px)',
+  weightLabel: 'Weight',
+  italicLabel: 'Italic',
+  widthLabel: 'Width (pixels)',
+  charsLabel: 'Characters',
+  previewLabel: 'Visual preview',
+  copyBtn: 'Copy Width',
+  resetBtn: 'Reset',
+  copyDone: 'Width copied',
+};
+
+export const content: ToolLocaleContent<TextPixelCalculatorUI> = {
+  slug: 'text-pixel-width-calculator',
+  title: 'Text Pixel Width Calculator',
+  description: 'Accurately calculate how wide any text is in pixels based on font, size and style. Free tool for designers and developers.',
+  ui,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'References',
+  bibliography: [
+    { name: 'W3C: CSS Text Module Level 3', url: 'https://www.w3.org/TR/css-text-3/' },
+    { name: 'Google Fonts: Understanding variable fonts', url: 'https://fonts.google.com/knowledge/glossary/variable_fonts' },
+  ],
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', level: 2, text: 'Measure the exact pixel width of any text' },
+    {
+      type: 'paragraph',
+      html: 'Is your text overflowing its container? Need to know how much space a heading takes up before rendering it? The <strong>browser Canvas API</strong> allows you to measure the exact width of any text string with pixel precision, without rendering it in the DOM.',
+    },
+    { type: 'title', level: 3, text: 'Why character counting is not enough' },
+    {
+      type: 'paragraph',
+      html: 'Modern typefaces are <strong>proportional</strong>: each glyph has a different width. A "W" can take up three times more space than an "i". The number of characters tells you nothing about the actual visual space the text occupies.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Web design:</strong> Prevent overflow in buttons, labels and table cells.',
+        '<strong>SEO:</strong> Search engines truncate titles by pixels, not by characters.',
+        '<strong>Canvas and PDF:</strong> Calculate the exact position before drawing text programmatically.',
+        '<strong>Tooltips and bubbles:</strong> Dynamically size containers based on inner text.',
+      ],
+    },
+    { type: 'title', level: 3, text: 'How measurement works with Canvas' },
+    {
+      type: 'paragraph',
+      html: 'The <code>ctx.measureText()</code> method of the Canvas API returns a <code>TextMetrics</code> object with a <code>width</code> property reflecting the CSS pixel width using the currently active font. This tool configures the context with your font, size, weight and style before measuring.',
+    },
+    {
+      type: 'code',
+      ariaLabel: 'Canvas measureText example',
+      code: "const ctx = document.createElement('canvas').getContext('2d');\nctx.font = '700 16px Inter, system-ui, sans-serif';\nconst width = ctx.measureText('Hello World').width; // e.g. 74.5",
+    },
+    { type: 'title', level: 3, text: 'Privacy and local processing' },
+    {
+      type: 'paragraph',
+      html: 'All calculation happens in your browser. No text, code snippet or private data leaves your device.',
+    },
+    {
+      type: 'tip',
+      title: 'Google Fonts typefaces',
+      html: 'To measure a Google Fonts typeface accurately, first make sure it is loaded on the page or installed on your system. Otherwise the browser will fall back to a substitute font and the result will differ.',
+    },
+  ],
+};

package/src/tool/text-pixel-calculator/i18n/es.ts

@@ -0,0 +1,133 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { TextPixelCalculatorUI } from '../ui';
+
+const faqData = [
+  {
+    question: '¿Cómo calcular el ancho de un texto en píxeles online?',
+    answer: 'Pega tu texto en el cuadro de entrada, configura la fuente y el tamaño, y la herramienta usará automáticamente la API de Canvas del navegador para devolverte el ancho exacto en píxeles.',
+  },
+  {
+    question: '¿Por qué el ancho en píxeles varía entre tipografías?',
+    answer: "La mayoría de las fuentes son proporcionales, lo que significa que cada carácter tiene un ancho distinto. Por ejemplo, una 'M' mayúscula siempre será más ancha que una 'i' minúscula en una fuente sans-serif estándar.",
+  },
+  {
+    question: '¿Es lo mismo medir caracteres que medir píxeles?',
+    answer: 'No. Medir caracteres te da la longitud de la cadena, mientras que medir píxeles te da el espacio visual que ocupa. Esto es crucial para asegurar que el texto no se salga de su contenedor en un diseño web.',
+  },
+  {
+    question: '¿Puedo usar cualquier fuente de Google Fonts?',
+    answer: 'Sí, siempre que la fuente esté instalada en tu sistema operativo o cargada en la página actual, la utilidad podrá medir sus dimensiones con precisión.',
+  },
+  {
+    question: '¿Es seguro procesar textos privados o fragmentos de código?',
+    answer: 'Sí. La calculadora funciona íntegramente de forma local. Ningún dato se envía a servidores externos, garantizando una privacidad absoluta.',
+  },
+];
+
+const howToData = [
+  { name: 'Introducir el texto', text: 'Escribe o pega el texto que quieres medir en el área de entrada.' },
+  { name: 'Configurar la fuente', text: 'Indica la familia tipográfica, el tamaño en píxeles, el peso y si es itálica.' },
+  { name: 'Leer el resultado', text: 'El ancho en píxeles y el número de caracteres se actualizan en tiempo real.' },
+  { name: 'Copiar el valor', text: 'Pulsa "Copiar Ancho" para guardar el número de píxeles en el portapapeles.' },
+];
+
+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 medir el ancho de texto en píxeles',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Calculadora de Ancho de Texto en Píxeles',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Calcula con precisión el ancho en píxeles de cualquier texto según su tipografía, tamaño y estilo.',
+};
+
+const ui: TextPixelCalculatorUI = {
+  textLabel: 'Texto a medir',
+  textPlaceholder: 'Escribe o pega aquí el texto que quieres medir...',
+  defaultText: 'Hola Mundo',
+  fontLabel: 'Tipografía',
+  sizeLabel: 'Tamaño (px)',
+  weightLabel: 'Peso',
+  italicLabel: 'Itálica',
+  widthLabel: 'Ancho (píxeles)',
+  charsLabel: 'Caracteres',
+  previewLabel: 'Vista previa visual',
+  copyBtn: 'Copiar Ancho',
+  resetBtn: 'Reiniciar',
+  copyDone: 'Ancho copiado',
+};
+
+export const content: ToolLocaleContent<TextPixelCalculatorUI> = {
+  slug: 'calculadora-ancho-pixel-texto',
+  title: 'Calculadora de Ancho de Texto en Píxeles',
+  description: 'Calcula con precisión cuánto ancho ocupa cualquier texto en píxeles según su tipografía, tamaño y estilo. Herramienta gratuita para diseñadores y desarrolladores.',
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'Referencias Técnicas',
+  bibliography: [
+    { name: 'W3C: Gestión de la tipografía y el renderizado de texto (CSS Text Level 3)', url: 'https://www.w3.org/TR/css-text-3/' },
+    { name: 'Google Fonts: Entendiendo las fuentes variables', url: 'https://fonts.google.com/knowledge/glossary/variable_fonts' },
+  ],
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', level: 2, text: 'Mide el ancho exacto de cualquier texto en píxeles' },
+    {
+      type: 'paragraph',
+      html: '¿Tu texto se sale del contenedor? ¿Necesitas saber cuánto espacio ocupa un titular antes de renderizarlo? La <strong>API Canvas del navegador</strong> permite medir el ancho exacto de cualquier cadena de texto con la precisión de un píxel, sin necesidad de renderizarlo en el DOM.',
+    },
+    { type: 'title', level: 3, text: 'Por qué contar caracteres no es suficiente' },
+    {
+      type: 'paragraph',
+      html: 'Las fuentes tipográficas modernas son <strong>proporcionales</strong>: cada glifo tiene un ancho diferente. Una "W" puede ocupar tres veces más que una "i". El número de caracteres no te dice nada sobre el espacio visual real que ocupa el texto.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Diseño web:</strong> Evita desbordamientos en botones, etiquetas y celdas de tabla.',
+        '<strong>SEO:</strong> Los motores de búsqueda truncan los títulos por píxeles, no por caracteres.',
+        '<strong>Canvas y PDF:</strong> Calcula la posición exacta antes de dibujar texto programáticamente.',
+        '<strong>Tooltips y globos:</strong> Dimensiona dinámicamente los contenedores según el texto interior.',
+      ],
+    },
+    { type: 'title', level: 3, text: 'Cómo funciona la medición con Canvas' },
+    {
+      type: 'paragraph',
+      html: 'El método <code>ctx.measureText()</code> de la API Canvas devuelve un objeto <code>TextMetrics</code> con la propiedad <code>width</code>, que refleja el ancho en píxeles CSS con la fuente activa en ese momento. Esta herramienta configura el contexto con tu fuente, tamaño, peso y estilo antes de medir.',
+    },
+    {
+      type: 'code',
+      ariaLabel: 'Ejemplo de Canvas measureText',
+      code: "const ctx = document.createElement('canvas').getContext('2d');\nctx.font = '700 16px Inter, system-ui, sans-serif';\nconst width = ctx.measureText('Hola Mundo').width; // ej. 74.5",
+    },
+    { type: 'title', level: 3, text: 'Privacidad y procesamiento local' },
+    {
+      type: 'paragraph',
+      html: 'Todo el cálculo ocurre en tu navegador. Ningún texto, fragmento de código ni dato privado sale de tu dispositivo.',
+    },
+    {
+      type: 'tip',
+      title: 'Fuentes de Google Fonts',
+      html: 'Para medir una fuente de Google Fonts con precisión, primero asegúrate de que esté cargada en la página o instalada en tu sistema. De lo contrario el navegador usará la fuente de respaldo y el resultado variará.',
+    },
+  ],
+};

package/src/tool/text-pixel-calculator/i18n/fr.ts

@@ -0,0 +1,133 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { TextPixelCalculatorUI } from '../ui';
+
+const faqData = [
+  {
+    question: 'Comment calculer la largeur en pixels d\'un texte en ligne ?',
+    answer: 'Collez votre texte dans le champ de saisie, configurez la police et la taille, et l\'outil utilisera automatiquement l\'API Canvas du navigateur pour vous renvoyer la largeur exacte en pixels.',
+  },
+  {
+    question: 'Pourquoi la largeur en pixels varie-t-elle selon les polices ?',
+    answer: "La plupart des polices sont proportionnelles, ce qui signifie que chaque caractère a une largeur différente. Par exemple, un 'M' majuscule est toujours plus large qu'un 'i' minuscule dans une police sans-serif standard.",
+  },
+  {
+    question: 'Mesurer les caractères est-il identique à mesurer les pixels ?',
+    answer: 'Non. Mesurer les caractères donne la longueur de la chaîne, tandis que mesurer les pixels donne l\'espace visuel occupé. C\'est essentiel pour éviter que le texte ne déborde de son conteneur.',
+  },
+  {
+    question: 'Puis-je utiliser n\'importe quelle police Google Fonts ?',
+    answer: 'Oui, à condition que la police soit installée sur votre système ou chargée sur la page actuelle, l\'outil mesurera ses dimensions avec précision.',
+  },
+  {
+    question: 'Est-il sûr de traiter des textes privés ou des extraits de code ?',
+    answer: 'Oui. La calculatrice fonctionne entièrement en local. Aucune donnée n\'est envoyée à des serveurs externes, garantissant une confidentialité totale.',
+  },
+];
+
+const howToData = [
+  { name: 'Saisir le texte', text: 'Tapez ou collez le texte que vous souhaitez mesurer dans la zone de saisie.' },
+  { name: 'Configurer la police', text: 'Indiquez la famille de polices, la taille en pixels, la graisse et si elle est en italique.' },
+  { name: 'Lire le résultat', text: 'La largeur en pixels et le nombre de caractères se mettent à jour en temps réel.' },
+  { name: 'Copier la valeur', text: 'Cliquez sur "Copier la largeur" pour enregistrer le nombre de pixels dans le presse-papiers.' },
+];
+
+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 mesurer la largeur d\'un texte en pixels',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Calculateur de Largeur de Texte en Pixels',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Calculez avec précision la largeur en pixels de n\'importe quel texte selon sa police, sa taille et son style.',
+};
+
+const ui: TextPixelCalculatorUI = {
+  textLabel: 'Texte à mesurer',
+  textPlaceholder: 'Saisissez ou collez ici le texte que vous souhaitez mesurer...',
+  defaultText: 'Bonjour Monde',
+  fontLabel: 'Police',
+  sizeLabel: 'Taille (px)',
+  weightLabel: 'Graisse',
+  italicLabel: 'Italique',
+  widthLabel: 'Largeur (pixels)',
+  charsLabel: 'Caractères',
+  previewLabel: 'Aperçu visuel',
+  copyBtn: 'Copier la largeur',
+  resetBtn: 'Réinitialiser',
+  copyDone: 'Largeur copiée',
+};
+
+export const content: ToolLocaleContent<TextPixelCalculatorUI> = {
+  slug: 'calculateur-largeur-pixel-texte',
+  title: 'Calculateur de Largeur de Texte en Pixels',
+  description: 'Calculez avec précision l\'espace horizontal occupé par votre texte en pixels. Outil gratuit pour designers et développeurs.',
+  ui,
+  faqTitle: 'Questions Fréquentes',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'Références',
+  bibliography: [
+    { name: 'W3C : Module CSS Text niveau 3', url: 'https://www.w3.org/TR/css-text-3/' },
+    { name: 'Google Fonts : Comprendre les polices variables', url: 'https://fonts.google.com/knowledge/glossary/variable_fonts' },
+  ],
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', level: 2, text: 'Mesurez la largeur exacte en pixels de n\'importe quel texte' },
+    {
+      type: 'paragraph',
+      html: 'Votre texte déborde-t-il de son conteneur ? Besoin de connaître l\'espace occupé par un titre avant de le rendre ? L\'<strong>API Canvas du navigateur</strong> permet de mesurer la largeur exacte de n\'importe quelle chaîne de texte avec une précision au pixel près, sans avoir à la rendre dans le DOM.',
+    },
+    { type: 'title', level: 3, text: 'Pourquoi compter les caractères ne suffit pas' },
+    {
+      type: 'paragraph',
+      html: 'Les polices modernes sont <strong>proportionnelles</strong> : chaque glyphe a une largeur différente. Un "W" peut occuper trois fois plus de place qu\'un "i". Le nombre de caractères ne vous dit rien sur l\'espace visuel réel occupé par le texte.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Design web :</strong> Évitez les débordements dans les boutons, étiquettes et cellules de tableau.',
+        '<strong>SEO :</strong> Les moteurs de recherche tronquent les titres en pixels, pas en caractères.',
+        '<strong>Canvas et PDF :</strong> Calculez la position exacte avant de dessiner du texte par programmation.',
+        '<strong>Infobulles et bulles :</strong> Dimensionnez dynamiquement les conteneurs selon le texte intérieur.',
+      ],
+    },
+    { type: 'title', level: 3, text: 'Comment fonctionne la mesure avec Canvas' },
+    {
+      type: 'paragraph',
+      html: 'La méthode <code>ctx.measureText()</code> de l\'API Canvas retourne un objet <code>TextMetrics</code> avec une propriété <code>width</code> reflétant la largeur en pixels CSS avec la police active. Cet outil configure le contexte avec votre police, taille, graisse et style avant de mesurer.',
+    },
+    {
+      type: 'code',
+      ariaLabel: 'Exemple Canvas measureText',
+      code: "const ctx = document.createElement('canvas').getContext('2d');\nctx.font = '700 16px Inter, system-ui, sans-serif';\nconst width = ctx.measureText('Bonjour Monde').width; // ex. 74.5",
+    },
+    { type: 'title', level: 3, text: 'Confidentialité et traitement local' },
+    {
+      type: 'paragraph',
+      html: 'Tout le calcul s\'effectue dans votre navigateur. Aucun texte, extrait de code ni donnée privée ne quitte votre appareil.',
+    },
+    {
+      type: 'tip',
+      title: 'Polices Google Fonts',
+      html: 'Pour mesurer une police Google Fonts avec précision, assurez-vous qu\'elle est chargée sur la page ou installée sur votre système. Sinon le navigateur utilisera une police de substitution et le résultat variera.',
+    },
+  ],
+};

package/src/tool/text-pixel-calculator/index.ts

@@ -0,0 +1,22 @@
+import type { ToolDefinition, ToolsToolEntry } from '../../types';
+import type { TextPixelCalculatorUI } from './ui';
+import TextPixelCalculatorComponent from './component.astro';
+import TextPixelCalculatorSEO from './seo.astro';
+import TextPixelCalculatorBibliography from './bibliography.astro';
+
+export const textPixelCalculator: ToolsToolEntry<TextPixelCalculatorUI> = {
+  id: 'text-pixel-calculator',
+  icons: { bg: 'mdi:format-text', fg: 'mdi:ruler' },
+  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 TEXT_PIXEL_CALCULATOR_TOOL: ToolDefinition = {
+  entry: textPixelCalculator,
+  Component: TextPixelCalculatorComponent,
+  SEOComponent: TextPixelCalculatorSEO,
+  BibliographyComponent: TextPixelCalculatorBibliography,
+};

package/src/tool/text-pixel-calculator/seo.astro

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

package/src/tool/text-pixel-calculator/ui.ts

@@ -0,0 +1,15 @@
+export interface TextPixelCalculatorUI extends Record<string, string> {
+  textLabel: string;
+  textPlaceholder: string;
+  defaultText: string;
+  fontLabel: string;
+  sizeLabel: string;
+  weightLabel: string;
+  italicLabel: string;
+  widthLabel: string;
+  charsLabel: string;
+  previewLabel: string;
+  copyBtn: string;
+  resetBtn: string;
+  copyDone: string;
+}

package/src/tool/whatsapp-link/bibliography.astro

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