@jjlmoya/utils-developer 1.15.0 → 1.17.0

package/src/tool/jwtDecoder/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { jwtDecoder } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await jwtDecoder.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/jwtDecoder/ui.ts

@@ -0,0 +1,38 @@
+export interface JwtDecoderUI extends Record<string, string> {
+  tokenLabel: string;
+  tokenPlaceholder: string;
+  sampleButton: string;
+  clearButton: string;
+  statusWaiting: string;
+  statusValid: string;
+  statusInvalid: string;
+  statusExpired: string;
+  statusUnsigned: string;
+  headerTitle: string;
+  payloadTitle: string;
+  signatureTitle: string;
+  claimsTitle: string;
+  copyHeader: string;
+  copyPayload: string;
+  copySignature: string;
+  copyAll: string;
+  copiedLabel: string;
+  invalidTokenTitle: string;
+  invalidTokenBody: string;
+  invalidSegmentError: string;
+  invalidDecodeError: string;
+  emptyJson: string;
+  signaturePresent: string;
+  signatureMissing: string;
+  algorithmLabel: string;
+  typeLabel: string;
+  issuerLabel: string;
+  subjectLabel: string;
+  audienceLabel: string;
+  issuedAtLabel: string;
+  notBeforeLabel: string;
+  expiresAtLabel: string;
+  claimMissing: string;
+  privacyNote: string;
+  sampleToken: string;
+}

package/src/tool/llmCostCalculator/component.astro

@@ -59,7 +59,7 @@ const t = (ui ?? {}) as LlmCostCalculatorUI;
                 step="100"
                 value="1000"
               />
-              <input class="llm-req-num" type="number" id="llm-requests-num" value="1000" min="1" />
+              <input class="llm-req-num" type="number" id="llm-requests-num" value="1000" min="1" aria-label={t.labelRequests} />
             </div>
           </div>
         </div>
@@ -232,4 +232,3 @@ const t = (ui ?? {}) as LlmCostCalculatorUI;
 
   init();
 </script>
-

package/src/tool/mobileMockupGenerator/component.astro

@@ -90,16 +90,16 @@ const t = (ui ?? {}) as MobileMockupGeneratorUI;
           </div>
           <div id="mmg-presets" class="mmg-presets-row"></div>
           <div class="mmg-gradient-inputs">
-            <input type="color" id="mmg-grad-start" value="#6366f1" class="mmg-color-picker" />
+            <input type="color" id="mmg-grad-start" value="#6366f1" class="mmg-color-picker" aria-label={t.labelBackground} />
             <Icon name="mdi:arrow-right" class="mmg-arrow-icon" />
-            <input type="color" id="mmg-grad-end" value="#a855f7" class="mmg-color-picker" />
+            <input type="color" id="mmg-grad-end" value="#a855f7" class="mmg-color-picker" aria-label={t.labelBackground} />
           </div>
           <div class="mmg-angle-section">
             <div class="mmg-angle-row">
               <span>{t.labelAngle}</span>
               <span id="mmg-angle-val">135&deg;</span>
             </div>
-            <input type="range" id="mmg-grad-angle" min="0" max="360" value="135" class="mmg-range" />
+            <input type="range" id="mmg-grad-angle" min="0" max="360" value="135" class="mmg-range" aria-label={t.labelAngle} />
           </div>
         </div>
 
@@ -111,7 +111,7 @@ const t = (ui ?? {}) as MobileMockupGeneratorUI;
             </button>
           </div>
           <div class="mmg-safe-color-row">
-            <input type="color" id="mmg-safe-color" value="#000000" class="mmg-color-picker-sm" />
+            <input type="color" id="mmg-safe-color" value="#000000" class="mmg-color-picker-sm" aria-label={t.labelSafeAreaColor} />
             <span class="mmg-safe-color-label">{t.labelSafeAreaColor}</span>
           </div>
         </div>
@@ -135,4 +135,3 @@ const t = (ui ?? {}) as MobileMockupGeneratorUI;
   import { App } from './app';
   new App();
 </script>
-

package/src/tool/placeholderGenerator/component.astro

@@ -43,14 +43,14 @@ const t = (ui ?? {}) as PlaceholderGeneratorUI;
             <label class="pg-label" for="p-bg-color">{t.labelBgColor}</label>
             <div class="pg-color-wrapper">
               <input type="color" id="p-bg-color" value="#e2e8f0" />
-              <input class="pg-color-text" type="text" id="p-bg-text" value="#e2e8f0" maxlength="7" />
+              <input class="pg-color-text" type="text" id="p-bg-text" value="#e2e8f0" maxlength="7" aria-label={t.labelBgColor} />
             </div>
           </div>
           <div class="pg-control-group">
             <label class="pg-label" for="p-text-color">{t.labelTextColor}</label>
             <div class="pg-color-wrapper">
               <input type="color" id="p-text-color" value="#64748b" />
-              <input class="pg-color-text" type="text" id="p-text-text" value="#64748b" maxlength="7" />
+              <input class="pg-color-text" type="text" id="p-text-text" value="#64748b" maxlength="7" aria-label={t.labelTextColor} />
             </div>
           </div>
         </div>

package/src/tool/readabilityCalculator/component.astro

@@ -18,14 +18,14 @@ const t = (ui ?? {}) as ReadabilityCalculatorUI;
           <div class="rc-input-wrapper">
             <label class="rc-label-mini">{t.labelText}</label>
             <div class="rc-color-input-container">
-              <input type="color" id="rc-text-color" class="rc-color-picker" value="#1e293b" />
+              <input type="color" id="rc-text-color" class="rc-color-picker" value="#1e293b" aria-label={t.labelText} />
               <span id="rc-text-hex" class="rc-hex-text">#1E293B</span>
             </div>
           </div>
           <div class="rc-input-wrapper">
             <label class="rc-label-mini">{t.labelBg}</label>
             <div class="rc-color-input-container">
-              <input type="color" id="rc-bg-color" class="rc-color-picker" value="#ffffff" />
+              <input type="color" id="rc-bg-color" class="rc-color-picker" value="#ffffff" aria-label={t.labelBg} />
               <span id="rc-bg-hex" class="rc-hex-text">#FFFFFF</span>
             </div>
           </div>
@@ -38,14 +38,14 @@ const t = (ui ?? {}) as ReadabilityCalculatorUI;
               <label class="rc-label-mini">{t.labelFontSize}</label>
               <span id="rc-size-val" class="rc-slider-value">16px</span>
             </div>
-            <input type="range" id="rc-size-slider" class="rc-range" min="12" max="72" value="16" />
+            <input type="range" id="rc-size-slider" class="rc-range" min="12" max="72" value="16" aria-label={t.labelFontSize} />
           </div>
           <div class="rc-slider-group">
             <div class="rc-slider-header">
               <label class="rc-label-mini">{t.labelFontWeight}</label>
               <span id="rc-weight-val" class="rc-slider-value">400</span>
             </div>
-            <input type="range" id="rc-weight-slider" class="rc-range" min="100" max="900" step="100" value="400" />
+            <input type="range" id="rc-weight-slider" class="rc-range" min="100" max="900" step="100" value="400" aria-label={t.labelFontWeight} />
           </div>
         </div>
 

package/src/tool/serpPixelSimulator/bibliography.astro

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

package/src/tool/serpPixelSimulator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Google Search Central: Control your snippets in search results',
+    url: 'https://developers.google.com/search/docs/appearance/snippet',
+  },
+  {
+    name: 'Google Search Central: Influencing title links in search results',
+    url: 'https://developers.google.com/search/docs/appearance/title-link',
+  },
+  {
+    name: 'Google Search Central: Create good titles and snippets in search results',
+    url: 'https://developers.google.com/search/docs/appearance/title-link#best-practices',
+  },
+];

package/src/tool/serpPixelSimulator/component.astro

@@ -0,0 +1,84 @@
+---
+import type { SerpPixelSimulatorUI } from './ui';
+import './serp-pixel-simulator.css';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as SerpPixelSimulatorUI;
+---
+
+<div id="sps-root" class="sps-root" data-i18n={JSON.stringify(t)}>
+  <section class="sps-card">
+    <div class="sps-shell">
+      <div class="sps-panel" aria-label={t.titleLabel}>
+        <div class="sps-field">
+          <label class="sps-label" for="sps-title">{t.titleLabel}</label>
+          <input id="sps-title" class="sps-input" type="text" maxlength="180" placeholder={t.titlePlaceholder} value={t.defaultTitle} />
+        </div>
+
+        <div class="sps-field">
+          <label class="sps-label" for="sps-url">{t.urlLabel}</label>
+          <div class="sps-url-control">
+            <input id="sps-url" class="sps-input sps-url-input" type="url" placeholder={t.urlPlaceholder} value={t.defaultUrl} />
+            <button id="sps-fetch" class="sps-fetch-button" type="button">{t.fetchButtonLabel}</button>
+          </div>
+          <p id="sps-fetch-message" class="sps-fetch-message" aria-live="polite"></p>
+        </div>
+
+        <div class="sps-field">
+          <label class="sps-label" for="sps-description">{t.descriptionLabel}</label>
+          <textarea id="sps-description" class="sps-textarea" maxlength="360" placeholder={t.descriptionPlaceholder}>{t.defaultDescription}</textarea>
+        </div>
+
+        <div class="sps-device">
+          <span class="sps-device-label">{t.deviceLabel}</span>
+          <div class="sps-segment" role="group" aria-label={t.deviceLabel}>
+            <button id="sps-desktop" type="button" aria-pressed="true">{t.desktopLabel}</button>
+            <button id="sps-mobile" type="button" aria-pressed="false">{t.mobileLabel}</button>
+          </div>
+        </div>
+
+        <div id="sps-title-meter" class="sps-meter">
+          <div class="sps-meter-top">
+            <span>{t.titlePixelsLabel}</span>
+            <span id="sps-title-count">0 {t.pixelUnit} / 580 {t.pixelUnit}</span>
+          </div>
+          <div class="sps-track"><span id="sps-title-fill" class="sps-fill"></span></div>
+          <span id="sps-title-status" class="sps-meter-status">{t.goodLabel}</span>
+        </div>
+
+        <div id="sps-description-meter" class="sps-meter">
+          <div class="sps-meter-top">
+            <span>{t.descriptionPixelsLabel}</span>
+            <span id="sps-description-count">0 {t.pixelUnit} / 920 {t.pixelUnit}</span>
+          </div>
+          <div class="sps-track"><span id="sps-description-fill" class="sps-fill"></span></div>
+          <span id="sps-description-status" class="sps-meter-status">{t.goodLabel}</span>
+        </div>
+      </div>
+
+      <div class="sps-preview-wrap" aria-label={t.previewLabel}>
+        <h2 class="sps-preview-title">{t.previewLabel}</h2>
+        <article id="sps-serp" class="sps-serp">
+          <div class="sps-url-line">
+            <span id="sps-favicon-fallback" class="sps-favicon" aria-hidden="true">{t.fallbackFaviconText}</span>
+            <img id="sps-favicon-image" class="sps-favicon-image sps-hidden" alt="" />
+            <div id="sps-preview-url" class="sps-url-text">{t.fallbackUrl}</div>
+          </div>
+          <h3 id="sps-preview-title" class="sps-serp-title">{t.emptyTitle}</h3>
+          <p id="sps-preview-description" class="sps-description">{t.emptyDescription}</p>
+        </article>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script>
+  import { initSerpPixelSimulator } from './controller';
+
+  const root = document.getElementById('sps-root') as HTMLElement;
+  initSerpPixelSimulator(root);
+</script>

package/src/tool/serpPixelSimulator/controller.ts

@@ -0,0 +1,323 @@
+import { DESCRIPTION_LIMIT, getTitleLimit, ratioToPercent, type SerpDevice } from './logic';
+import type { SerpPixelSimulatorUI } from './ui';
+
+interface StoredState {
+  title?: string;
+  url?: string;
+  description?: string;
+  device?: SerpDevice;
+  favicon?: string;
+}
+
+interface Elements {
+  titleInput: HTMLInputElement;
+  urlInput: HTMLInputElement;
+  fetchButton: HTMLButtonElement;
+  fetchMessage: HTMLElement;
+  descriptionInput: HTMLTextAreaElement;
+  desktopButton: HTMLButtonElement;
+  mobileButton: HTMLButtonElement;
+  serpCard: HTMLElement;
+  faviconFallback: HTMLElement;
+  faviconImage: HTMLImageElement;
+  previewTitle: HTMLElement;
+  previewUrl: HTMLElement;
+  previewDescription: HTMLElement;
+  titleMeter: HTMLElement;
+  descriptionMeter: HTMLElement;
+  titleFill: HTMLElement;
+  descriptionFill: HTMLElement;
+  titleCount: HTMLElement;
+  descriptionCount: HTMLElement;
+  titleStatus: HTMLElement;
+  descriptionStatus: HTMLElement;
+}
+
+interface MeterParts {
+  meter: HTMLElement;
+  fill: HTMLElement;
+  count: HTMLElement;
+  status: HTMLElement;
+}
+
+interface FetchResult {
+  response: Response;
+  url: string;
+}
+
+const storageKey = 'serpPixelSimulator:lastState';
+const titleFont = '20px Arial, Helvetica, sans-serif';
+const descriptionFont = '14px Arial, Helvetica, sans-serif';
+
+function getElement<T extends HTMLElement>(id: string): T {
+  return document.getElementById(id) as T;
+}
+
+function collectElements(): Elements {
+  return {
+    titleInput: getElement<HTMLInputElement>('sps-title'),
+    urlInput: getElement<HTMLInputElement>('sps-url'),
+    fetchButton: getElement<HTMLButtonElement>('sps-fetch'),
+    fetchMessage: getElement('sps-fetch-message'),
+    descriptionInput: getElement<HTMLTextAreaElement>('sps-description'),
+    desktopButton: getElement<HTMLButtonElement>('sps-desktop'),
+    mobileButton: getElement<HTMLButtonElement>('sps-mobile'),
+    serpCard: getElement('sps-serp'),
+    faviconFallback: getElement('sps-favicon-fallback'),
+    faviconImage: getElement<HTMLImageElement>('sps-favicon-image'),
+    previewTitle: getElement('sps-preview-title'),
+    previewUrl: getElement('sps-preview-url'),
+    previewDescription: getElement('sps-preview-description'),
+    titleMeter: getElement('sps-title-meter'),
+    descriptionMeter: getElement('sps-description-meter'),
+    titleFill: getElement('sps-title-fill'),
+    descriptionFill: getElement('sps-description-fill'),
+    titleCount: getElement('sps-title-count'),
+    descriptionCount: getElement('sps-description-count'),
+    titleStatus: getElement('sps-title-status'),
+    descriptionStatus: getElement('sps-description-status'),
+  };
+}
+
+function measure(context: CanvasRenderingContext2D, text: string, font: string): number {
+  context.font = font;
+  return context.measureText(text).width;
+}
+
+function trimToPixels(context: CanvasRenderingContext2D, text: string, limit: number, font: string, suffix: string): string {
+  if (measure(context, text, font) <= limit) return text;
+  let low = 0;
+  let high = text.length;
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    const candidate = `${text.slice(0, middle).trimEnd()}${suffix}`;
+    if (measure(context, candidate, font) <= limit) low = middle;
+    else high = middle - 1;
+  }
+  return `${text.slice(0, low).trimEnd()}${suffix}`;
+}
+
+function displayUrl(rawUrl: string, fallbackUrl: string): string {
+  if (!rawUrl.trim()) return fallbackUrl;
+  try {
+    const url = new URL(rawUrl);
+    return `${url.hostname}${url.pathname === '/' ? '' : url.pathname}`;
+  } catch {
+    return rawUrl.replace(/^https?:\/\//, '').replace(/\/$/, '') || fallbackUrl;
+  }
+}
+
+function setMessage(el: HTMLElement, message: string, tone: string): void {
+  el.textContent = message;
+  el.dataset.tone = tone;
+}
+
+function normalizedUrl(rawUrl: string): string | null {
+  const trimmed = rawUrl.trim();
+  if (!trimmed) return null;
+  const value = /^[a-z][a-z\d+.-]*:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+  try {
+    return new URL(value).toString();
+  } catch {
+    return null;
+  }
+}
+
+function candidateUrls(rawUrl: string): string[] {
+  const trimmed = rawUrl.trim();
+  if (!trimmed) return [];
+  if (/^[a-z][a-z\d+.-]*:\/\//i.test(trimmed)) {
+    const url = normalizedUrl(trimmed);
+    return url ? [url] : [];
+  }
+  return ['https://', 'http://'].flatMap((protocol) => {
+    try {
+      return [new URL(`${protocol}${trimmed}`).toString()];
+    } catch {
+      return [];
+    }
+  });
+}
+
+function extractMetaDescription(doc: Document): string {
+  const selectors = ['meta[name="description"]', 'meta[property="og:description"]', 'meta[name="twitter:description"]'];
+  for (const selector of selectors) {
+    const value = doc.querySelector(selector)?.getAttribute('content')?.trim();
+    if (value) return value;
+  }
+  return '';
+}
+
+function extractFavicon(doc: Document, pageUrl: string): string {
+  const selectors = ['link[rel~="icon"][href]', 'link[rel="shortcut icon"][href]', 'link[rel="apple-touch-icon"][href]', 'link[rel="apple-touch-icon-precomposed"][href]'];
+  for (const selector of selectors) {
+    const href = doc.querySelector(selector)?.getAttribute('href')?.trim();
+    if (!href) continue;
+    try {
+      return new URL(href, pageUrl).toString();
+    } catch {
+      return '';
+    }
+  }
+  return new URL('/favicon.ico', pageUrl).toString();
+}
+
+function stateFromElements(elements: Elements, device: SerpDevice): StoredState {
+  return {
+    title: elements.titleInput.value,
+    url: elements.urlInput.value,
+    description: elements.descriptionInput.value,
+    device,
+    favicon: elements.faviconImage.classList.contains('sps-hidden') ? '' : elements.faviconImage.src,
+  };
+}
+
+function saveState(elements: Elements, device: SerpDevice): void {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(stateFromElements(elements, device)));
+  } catch {
+    return;
+  }
+}
+
+function readState(): StoredState | null {
+  try {
+    const rawState = localStorage.getItem(storageKey);
+    return rawState ? (JSON.parse(rawState) as StoredState) : null;
+  } catch {
+    localStorage.removeItem(storageKey);
+    return null;
+  }
+}
+
+function setDevice(elements: Elements, device: SerpDevice): void {
+  elements.desktopButton.setAttribute('aria-pressed', String(device === 'desktop'));
+  elements.mobileButton.setAttribute('aria-pressed', String(device === 'mobile'));
+  elements.serpCard.classList.toggle('sps-mobile', device === 'mobile');
+}
+
+function setFavicon(elements: Elements, src: string): void {
+  elements.faviconImage.src = src;
+  elements.faviconImage.hidden = false;
+  elements.faviconImage.removeAttribute('hidden');
+  elements.faviconImage.classList.remove('sps-hidden');
+  elements.faviconFallback.hidden = false;
+  elements.faviconFallback.removeAttribute('hidden');
+  elements.faviconFallback.classList.add('sps-hidden');
+}
+
+function restoreState(elements: Elements): SerpDevice {
+  const state = readState();
+  if (!state) return 'desktop';
+  if (typeof state.title === 'string') elements.titleInput.value = state.title;
+  if (typeof state.url === 'string') elements.urlInput.value = state.url;
+  if (typeof state.description === 'string') elements.descriptionInput.value = state.description;
+  if (typeof state.favicon === 'string' && state.favicon) setFavicon(elements, state.favicon);
+  return state.device === 'mobile' ? 'mobile' : 'desktop';
+}
+
+function updateMeter(parts: MeterParts, width: number, limit: number, unit: string, okText: string, tooLongText: string): void {
+  const isOver = width > limit;
+  parts.meter.classList.toggle('sps-over', isOver);
+  parts.fill.style.width = `${ratioToPercent(width, limit)}%`;
+  parts.count.textContent = `${Math.round(width)} ${unit} / ${Math.round(limit)} ${unit}`;
+  parts.status.textContent = isOver ? tooLongText : okText;
+}
+
+function updatePreview(elements: Elements, context: CanvasRenderingContext2D, ui: SerpPixelSimulatorUI, device: SerpDevice): void {
+  const title = elements.titleInput.value.trim() || ui.emptyTitle;
+  const description = elements.descriptionInput.value.trim() || ui.emptyDescription;
+  const titleLimit = getTitleLimit(device);
+  elements.previewTitle.textContent = trimToPixels(context, title, titleLimit, titleFont, ui.ellipsis);
+  elements.previewDescription.textContent = trimToPixels(context, description, DESCRIPTION_LIMIT, descriptionFont, ui.ellipsis);
+  elements.previewUrl.textContent = displayUrl(elements.urlInput.value, ui.fallbackUrl);
+  updateMeter({ meter: elements.titleMeter, fill: elements.titleFill, count: elements.titleCount, status: elements.titleStatus }, measure(context, title, titleFont), titleLimit, ui.pixelUnit, ui.goodLabel, ui.tooLongLabel);
+  updateMeter({ meter: elements.descriptionMeter, fill: elements.descriptionFill, count: elements.descriptionCount, status: elements.descriptionStatus }, measure(context, description, descriptionFont), DESCRIPTION_LIMIT, ui.pixelUnit, ui.goodLabel, ui.tooLongLabel);
+}
+
+async function fetchFirst(urls: string[]): Promise<FetchResult> {
+  let lastError: unknown = null;
+  for (const url of urls) {
+    try {
+      return { response: await fetch(url, { method: 'GET', mode: 'cors', credentials: 'omit' }), url };
+    } catch (error) {
+      lastError = error;
+    }
+  }
+  throw lastError instanceof Error ? lastError : new TypeError('Fetch failed');
+}
+
+function applyFetched(elements: Elements, doc: Document, url: string): boolean {
+  const title = doc.querySelector('title')?.textContent?.trim() ?? '';
+  const description = extractMetaDescription(doc);
+  if (!title && !description) return false;
+  if (title) elements.titleInput.value = title;
+  if (description) elements.descriptionInput.value = description;
+  setFavicon(elements, extractFavicon(doc, url));
+  elements.urlInput.value = url;
+  return true;
+}
+
+export function initSerpPixelSimulator(root: HTMLElement): void {
+  const ui = JSON.parse(root.dataset.i18n ?? '{}') as SerpPixelSimulatorUI;
+  const elements = collectElements();
+  const context = document.createElement('canvas').getContext('2d') as CanvasRenderingContext2D;
+  let device = restoreState(elements);
+  const render = () => updatePreview(elements, context, ui, device);
+  const persistAndRender = () => {
+    setMessage(elements.fetchMessage, '', 'neutral');
+    saveState(elements, device);
+    render();
+  };
+
+  setDevice(elements, device);
+  elements.titleInput.addEventListener('input', persistAndRender);
+  elements.urlInput.addEventListener('input', persistAndRender);
+  elements.descriptionInput.addEventListener('input', persistAndRender);
+  elements.desktopButton.addEventListener('click', () => {
+    device = 'desktop';
+    setDevice(elements, device);
+    persistAndRender();
+  });
+  elements.mobileButton.addEventListener('click', () => {
+    device = 'mobile';
+    setDevice(elements, device);
+    persistAndRender();
+  });
+  elements.faviconImage.addEventListener('error', () => {
+    elements.faviconImage.removeAttribute('src');
+    elements.faviconImage.classList.add('sps-hidden');
+    elements.faviconFallback.classList.remove('sps-hidden');
+    saveState(elements, device);
+  });
+  elements.fetchButton.addEventListener('click', () => {
+    void fetchMetadata(elements, ui, device, context);
+  });
+  render();
+}
+
+async function fetchMetadata(elements: Elements, ui: SerpPixelSimulatorUI, device: SerpDevice, context: CanvasRenderingContext2D): Promise<void> {
+  const urls = candidateUrls(elements.urlInput.value);
+  if (urls.length === 0) {
+    setMessage(elements.fetchMessage, ui.fetchInvalidUrlError, 'error');
+    saveState(elements, device);
+    return;
+  }
+  elements.fetchButton.disabled = true;
+  elements.fetchButton.textContent = ui.fetchLoadingLabel;
+  setMessage(elements.fetchMessage, '', 'neutral');
+  try {
+    const result = await fetchFirst(urls);
+    if (!result.response.ok) throw new Error(`HTTP ${result.response.status}`);
+    const doc = new DOMParser().parseFromString(await result.response.text(), 'text/html');
+    if (!applyFetched(elements, doc, result.url)) setMessage(elements.fetchMessage, ui.fetchNoMetadataError, 'error');
+    else setMessage(elements.fetchMessage, ui.fetchSuccessLabel, 'success');
+  } catch (error) {
+    setMessage(elements.fetchMessage, error instanceof TypeError ? ui.fetchCorsError : ui.fetchGenericError, 'error');
+  } finally {
+    elements.fetchButton.disabled = false;
+    elements.fetchButton.textContent = ui.fetchButtonLabel;
+    saveState(elements, device);
+    updatePreview(elements, context, ui, device);
+  }
+}

package/src/tool/serpPixelSimulator/entry.ts

@@ -0,0 +1,30 @@
+import type { DeveloperToolEntry, ToolLocaleContent } from '../../types';
+
+import type { SerpPixelSimulatorUI } from './ui';
+
+export type SerpPixelSimulatorLocaleContent = ToolLocaleContent<SerpPixelSimulatorUI>;
+
+export const serpPixelSimulator: DeveloperToolEntry<SerpPixelSimulatorUI> = {
+  id: 'serp-pixel-simulator',
+  icons: {
+    bg: 'mdi:google',
+    fg: 'mdi:ruler-square',
+  },
+  i18n: {
+    de: async () => (await import('./i18n/de')).content,
+    en: async () => (await import('./i18n/en')).content,
+    es: async () => (await import('./i18n/es')).content,
+    fr: async () => (await import('./i18n/fr')).content,
+    id: async () => (await import('./i18n/id')).content,
+    it: async () => (await import('./i18n/it')).content,
+    ja: async () => (await import('./i18n/ja')).content,
+    ko: async () => (await import('./i18n/ko')).content,
+    nl: async () => (await import('./i18n/nl')).content,
+    pl: async () => (await import('./i18n/pl')).content,
+    pt: async () => (await import('./i18n/pt')).content,
+    ru: async () => (await import('./i18n/ru')).content,
+    sv: async () => (await import('./i18n/sv')).content,
+    tr: async () => (await import('./i18n/tr')).content,
+    zh: async () => (await import('./i18n/zh')).content,
+  },
+};