@jjlmoya/utils-developer 1.15.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-developer",
-    "version": "1.15.0",
+    "version": "1.17.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -19,10 +19,12 @@ import { readabilityCalculator } from '../tool/readabilityCalculator/index';
 import { svgSanitizer } from '../tool/svgSanitizer/index';
 import { utmGenerator } from '../tool/utmGenerator/index';
 import { urlCleaner } from '../tool/urlCleaner/index';
+import { serpPixelSimulator } from '../tool/serpPixelSimulator/index';
+import { jwtDecoder } from '../tool/jwtDecoder/index';
 
 export const developerCategory: DeveloperCategoryEntry = {
   icon: 'mdi:code-tags',
-  tools: [jsonFormatter, svgToCss, aspectRatio, placeholderGenerator, urlEncoderDecoder, duplicateCssRemover, cssToInlineConverter, cssSpecificityCalculator, cronGenerator, keycode, llmCostCalculator, musicalTypography, mobileMockupGenerator, hashGenerator, promptLibrary, colorConverter, readabilityCalculator, svgSanitizer, utmGenerator, urlCleaner],
+  tools: [jsonFormatter, svgToCss, aspectRatio, placeholderGenerator, urlEncoderDecoder, duplicateCssRemover, cssToInlineConverter, cssSpecificityCalculator, cronGenerator, keycode, llmCostCalculator, musicalTypography, mobileMockupGenerator, hashGenerator, promptLibrary, colorConverter, readabilityCalculator, svgSanitizer, utmGenerator, urlCleaner, serpPixelSimulator, jwtDecoder],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -46,6 +46,10 @@ export { urlEncoderDecoder } from './tool/urlEncoderDecoder/entry';
 export type { UrlEncoderDecoderLocaleContent } from './tool/urlEncoderDecoder/entry';
 export { utmGenerator } from './tool/utmGenerator/entry';
 export type { UtmGeneratorLocaleContent } from './tool/utmGenerator/entry';
+export { serpPixelSimulator } from './tool/serpPixelSimulator/entry';
+export type { SerpPixelSimulatorLocaleContent } from './tool/serpPixelSimulator/entry';
+export { jwtDecoder } from './tool/jwtDecoder/entry';
+export type { JwtDecoderLocaleContent } from './tool/jwtDecoder/entry';
 export { developerCategory } from './category';
 import { aspectRatio } from './tool/aspectRatio/entry';
 import { calculadoraTiempoDatos } from './tool/calculadoraTiempoDatos/entry';
@@ -71,4 +75,6 @@ import { svgToCss } from './tool/svgToCss/entry';
 import { urlCleaner } from './tool/urlCleaner/entry';
 import { urlEncoderDecoder } from './tool/urlEncoderDecoder/entry';
 import { utmGenerator } from './tool/utmGenerator/entry';
-export const ALL_ENTRIES = [aspectRatio, calculadoraTiempoDatos, colorConverter, conversorExcelCsvHtml, cronGenerator, cssSpecificityCalculator, cssToInlineConverter, duplicateCssRemover, generadorSecurityTxt, hashGenerator, inspectorCertificadosSsl, jsonFormatter, keycode, llmCostCalculator, mobileMockupGenerator, musicalTypography, placeholderGenerator, promptLibrary, readabilityCalculator, svgSanitizer, svgToCss, urlCleaner, urlEncoderDecoder, utmGenerator];
+import { serpPixelSimulator } from './tool/serpPixelSimulator/entry';
+import { jwtDecoder } from './tool/jwtDecoder/entry';
+export const ALL_ENTRIES = [aspectRatio, calculadoraTiempoDatos, colorConverter, conversorExcelCsvHtml, cronGenerator, cssSpecificityCalculator, cssToInlineConverter, duplicateCssRemover, generadorSecurityTxt, hashGenerator, inspectorCertificadosSsl, jsonFormatter, keycode, llmCostCalculator, mobileMockupGenerator, musicalTypography, placeholderGenerator, promptLibrary, readabilityCalculator, svgSanitizer, svgToCss, urlCleaner, urlEncoderDecoder, utmGenerator, serpPixelSimulator, jwtDecoder];

package/src/index.ts

@@ -64,3 +64,7 @@ export { CALCULADORA_TIEMPO_DATOS_TOOL } from './tool/calculadoraTiempoDatos/ind
 export { INSPECTOR_CERTIFICADOS_SSL_TOOL } from './tool/inspectorCertificadosSsl/index';
 
 export { CONVERSOR_EXCEL_CSV_HTML_TOOL } from './tool/conversorExcelCsvHtml/index';
+
+export { SERP_PIXEL_SIMULATOR_TOOL } from './tool/serpPixelSimulator/index';
+
+export { JWT_DECODER_TOOL } from './tool/jwtDecoder/index';

package/src/tests/locale_completeness.test.ts

@@ -35,8 +35,7 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 24 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(24);
+  it('all 26 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(26);
   });
 });
-

package/src/tests/pagespeed_best_practices.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, it } from 'vitest';
+import { readdirSync, readFileSync } from 'fs';
+import { join, relative } from 'path';
+import { ALL_TOOLS } from '../tools';
+import type { SEOSection, ToolLocaleContent } from '../types';
+
+const srcDir = join(process.cwd(), 'src');
+const toolDir = join(srcDir, 'tool');
+const geometryReads = [
+  'offsetWidth',
+  'offsetHeight',
+  'offsetTop',
+  'offsetLeft',
+  'clientWidth',
+  'clientHeight',
+  'clientTop',
+  'clientLeft',
+  'scrollWidth',
+  'scrollHeight',
+  'scrollTop',
+  'scrollLeft',
+  'getBoundingClientRect',
+  'getClientRects',
+  'computedStyle',
+  'getComputedStyle',
+];
+const domWrites = [
+  '.style.',
+  '.classList.add',
+  '.classList.remove',
+  '.classList.toggle',
+  '.appendChild',
+  '.insertBefore',
+  '.prepend',
+  '.append',
+  '.remove',
+  '.innerHTML',
+  '.textContent',
+  '.setAttribute',
+];
+
+function findFiles(dir: string, extensions: string[]): string[] {
+  const files: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...findFiles(fullPath, extensions));
+    else if (extensions.some((extension) => entry.name.endsWith(extension))) files.push(fullPath);
+  }
+  return files;
+}
+
+function relativePath(file: string): string {
+  return relative(process.cwd(), file).replace(/\\/g, '/');
+}
+
+function findFormControls(content: string, tagName: 'input' | 'select'): RegExpMatchArray[] {
+  return Array.from(content.matchAll(new RegExp(`<${tagName}\\b[^>]*>`, 'gi')));
+}
+
+function attrValue(tag: string, attr: string): string | null {
+  const match = tag.match(new RegExp(`\\b${attr}\\s*=\\s*(?:"([^"]+)"|'([^']+)'|\\{([^}]+)\\})`, 'i'));
+  return match?.[1] ?? match?.[2] ?? match?.[3] ?? null;
+}
+
+function booleanAttr(tag: string, attr: string): boolean {
+  return new RegExp(`\\b${attr}\\b`, 'i').test(tag);
+}
+
+function controlStartIndex(content: string, tag: RegExpMatchArray): number {
+  return tag.index ?? content.indexOf(tag[0]);
+}
+
+function hasWrappingLabel(content: string, tag: RegExpMatchArray): boolean {
+  const index = controlStartIndex(content, tag);
+  const before = content.slice(0, index);
+  const labelOpen = before.lastIndexOf('<label');
+  const labelClose = before.lastIndexOf('</label>');
+  const nextLabelClose = content.indexOf('</label>', index + tag[0].length);
+  return labelOpen > labelClose && nextLabelClose !== -1;
+}
+
+function hasAccessibleName(content: string, tag: RegExpMatchArray): boolean {
+  const source = tag[0];
+  if (attrValue(source, 'aria-label')) return true;
+  if (attrValue(source, 'aria-labelledby')) return true;
+  const id = attrValue(source, 'id');
+  if (id && hasExplicitLabel(content, id)) return true;
+  return hasWrappingLabel(content, tag);
+}
+
+function isVisuallyHiddenFileInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  const attributes = `${attrValue(tag, 'style') ?? ''} ${attrValue(tag, 'class') ?? ''}`.toLowerCase();
+  const hiddenPatterns = ['display:none', 'display: none', 'file-input'];
+  return type === 'file' && hiddenPatterns.some((pattern) => attributes.includes(pattern));
+}
+
+function isIgnoredInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  return ['hidden', 'button', 'submit', 'reset'].includes(type) || booleanAttr(tag, 'aria-hidden') || isVisuallyHiddenFileInput(tag);
+}
+
+function controlFailures(content: string, tagName: 'input' | 'select'): string[] {
+  return findFormControls(content, tagName)
+    .filter((tag) => tagName !== 'input' || !isIgnoredInput(tag[0]))
+    .filter((tag) => !hasAccessibleName(content, tag))
+    .map((tag) => tag[0]);
+}
+
+function explicitLabelMessage(tagName: string, path: string, failures: string[]): string {
+  return `${tagName} controls without label, wrapping label, aria-label or aria-labelledby in ${path}:\n${failures.join('\n')}`;
+}
+
+function hasExplicitLabel(content: string, id: string): boolean {
+  const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return (
+    new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*["']${escapedId}["'][^>]*>`, 'i').test(content)
+    || new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*\\{${escapedId}\\}[^>]*>`, 'i').test(content)
+  );
+}
+
+function headingLevels(sections: SEOSection[]): number[] {
+  return sections
+    .filter((section) => section.type === 'title')
+    .map((section) => Number('level' in section ? section.level : 0))
+    .filter((level) => Number.isInteger(level) && level > 0);
+}
+
+function findHeadingLevelJumps(levels: number[]): string[] {
+  const failures: string[] = [];
+  levels.forEach((level, index) => {
+    const previous = index === 0 ? 1 : levels[index - 1];
+    if (previous && level > previous + 1) {
+      failures.push(`h${previous} -> h${level}`);
+    }
+  });
+  return failures;
+}
+
+function hasDomWriteBeforeGeometryRead(content: string): boolean {
+  const normalized = content.replace(/\s+/g, ' ');
+  return domWrites.some((write) => {
+    const writeIndex = normalized.indexOf(write);
+    if (writeIndex === -1) return false;
+    return geometryReads.some((read) => normalized.indexOf(read, writeIndex + write.length) !== -1);
+  });
+}
+
+describe('PageSpeed best-practice guards', () => {
+  const astroToolFiles = findFiles(toolDir, ['.astro']);
+  const scriptFiles = findFiles(toolDir, ['.astro', '.ts', '.js']);
+
+  astroToolFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} labels every input with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'input');
+
+      expect(failures, explicitLabelMessage('Input', displayPath, failures)).toEqual([]);
+    });
+
+    it(`${displayPath} labels every select with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'select');
+
+      expect(failures, explicitLabelMessage('Select', displayPath, failures)).toEqual([]);
+    });
+  });
+
+  ALL_TOOLS.forEach((tool) => {
+    Object.entries(tool.entry.i18n).forEach(([locale, loader]) => {
+      it(`${tool.entry.id}/${locale} keeps SEO headings sequential`, async () => {
+        if (!loader) return;
+        const content = (await loader()) as ToolLocaleContent;
+        const levels = headingLevels(content.seo);
+        const failures = findHeadingLevelJumps(levels);
+
+        expect(
+          failures,
+          `SEO headings in ${tool.entry.id}/${locale} skip levels: ${failures.join(', ')}`,
+        ).toEqual([]);
+      });
+    });
+  });
+
+  scriptFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} avoids static forced-reflow patterns`, () => {
+      const content = readFileSync(file, 'utf-8');
+      expect(
+        hasDomWriteBeforeGeometryRead(content),
+        `${displayPath} appears to read layout geometry after DOM/style mutations. Split writes and reads across frames or measure before mutating.`,
+      ).toBe(false);
+    });
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { developerCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 24 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(24);
+    it('should have 26 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(26);
     });
 
     it('developerCategory should be defined', () => {

package/src/tool/aspectRatio/component.astro

@@ -137,12 +137,14 @@ const t = (ui ?? {}) as AspectRatioUI;
     const { rw, rh, cw, ch } = getInputValues();
     const divisor = calculateGcd(Math.round(rw * 100), Math.round(rh * 100)) / 100;
     const ratioText = `${Math.round(rw / divisor)}:${Math.round(rh / divisor)}`;
+    const viewWidth = viewport.clientWidth - 80;
+    const viewHeight = viewport.clientHeight - 80;
+    const { w, h } = computeBoxDimensions(rw, rh, viewWidth, viewHeight);
 
     arcBoxRatio.textContent = ratioText;
     arcBoxRes.innerHTML = `${cw} × ${ch}px`;
     arcBadge.textContent = ratioText;
 
-    const { w, h } = computeBoxDimensions(rw, rh, viewport.clientWidth - 80, viewport.clientHeight - 80);
     arcBox.style.width = w + 'px';
     arcBox.style.height = h + 'px';
   };

package/src/tool/colorConverter/component.astro

@@ -53,21 +53,21 @@ const t = (ui ?? {}) as ColorConverterUI;
             <span>{t.labelR}</span>
             <span id="cc-r-val">255</span>
           </div>
-          <input type="range" id="cc-r-slider" class="cc-range" min="0" max="255" value="255" />
+          <input type="range" id="cc-r-slider" class="cc-range" min="0" max="255" value="255" aria-label={t.labelR} />
         </div>
         <div class="cc-slider-group">
           <div class="cc-slider-header">
             <span>{t.labelG}</span>
             <span id="cc-g-val">255</span>
           </div>
-          <input type="range" id="cc-g-slider" class="cc-range" min="0" max="255" value="255" />
+          <input type="range" id="cc-g-slider" class="cc-range" min="0" max="255" value="255" aria-label={t.labelG} />
         </div>
         <div class="cc-slider-group">
           <div class="cc-slider-header">
             <span>{t.labelB}</span>
             <span id="cc-b-val">255</span>
           </div>
-          <input type="range" id="cc-b-slider" class="cc-range" min="0" max="255" value="255" />
+          <input type="range" id="cc-b-slider" class="cc-range" min="0" max="255" value="255" aria-label={t.labelB} />
         </div>
       </div>
     </div>

package/src/tool/jwtDecoder/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } 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]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/jwtDecoder/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'IETF: JSON Web Token (JWT), RFC 7519',
+    url: 'https://datatracker.ietf.org/doc/html/rfc7519',
+  },
+  {
+    name: 'IETF: JSON Web Signature (JWS), RFC 7515',
+    url: 'https://datatracker.ietf.org/doc/html/rfc7515',
+  }
+];

package/src/tool/jwtDecoder/component.astro

@@ -0,0 +1,209 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { JwtDecoderUI } from './ui';
+import './jwt-decoder-parser-and-claims-inspector.css';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as JwtDecoderUI;
+---
+
+<div id="jwt-root" class="jwt-root" data-i18n={JSON.stringify(t)}>
+  <section class="jwt-card">
+    <div class="jwt-input-panel">
+      <div class="jwt-token-field">
+        <label for="jwt-token" class="jwt-label">
+          <Icon name="mdi:key-variant" class="jwt-label-icon" />
+          {t.tokenLabel}
+        </label>
+        <textarea id="jwt-token" class="jwt-token-input" spellcheck="false" placeholder={t.tokenPlaceholder}>{t.sampleToken}</textarea>
+      </div>
+
+      <div class="jwt-action-row">
+        <button id="jwt-sample" class="jwt-action jwt-action-primary" type="button">
+          <Icon name="mdi:test-tube" class="jwt-button-icon" />
+          {t.sampleButton}
+        </button>
+        <button id="jwt-clear" class="jwt-action" type="button">
+          <Icon name="mdi:eraser" class="jwt-button-icon" />
+          {t.clearButton}
+        </button>
+        <button id="jwt-copy-all" class="jwt-action" type="button">
+          <Icon name="mdi:content-copy" class="jwt-button-icon" />
+          {t.copyAll}
+        </button>
+      </div>
+
+      <p id="jwt-status" class="jwt-status jwt-status-waiting" aria-live="polite">{t.statusWaiting}</p>
+      <p class="jwt-privacy">{t.privacyNote}</p>
+    </div>
+
+    <div class="jwt-output-grid">
+      <article class="jwt-json-panel">
+        <div class="jwt-panel-heading">
+          <h2>{t.headerTitle}</h2>
+          <button class="jwt-copy" type="button" data-copy-target="jwt-header-output" title={t.copyHeader} aria-label={t.copyHeader}>
+            <Icon name="mdi:content-copy" />
+          </button>
+        </div>
+        <pre id="jwt-header-output" class="jwt-code">{t.emptyJson}</pre>
+      </article>
+
+      <article class="jwt-json-panel jwt-json-panel-main">
+        <div class="jwt-panel-heading">
+          <h2>{t.payloadTitle}</h2>
+          <button class="jwt-copy" type="button" data-copy-target="jwt-payload-output" title={t.copyPayload} aria-label={t.copyPayload}>
+            <Icon name="mdi:content-copy" />
+          </button>
+        </div>
+        <pre id="jwt-payload-output" class="jwt-code">{t.emptyJson}</pre>
+      </article>
+
+      <article class="jwt-json-panel">
+        <div class="jwt-panel-heading">
+          <h2>{t.signatureTitle}</h2>
+          <button class="jwt-copy" type="button" data-copy-target="jwt-signature-output" title={t.copySignature} aria-label={t.copySignature}>
+            <Icon name="mdi:content-copy" />
+          </button>
+        </div>
+        <pre id="jwt-signature-output" class="jwt-code jwt-signature-code">{t.signatureMissing}</pre>
+      </article>
+    </div>
+
+    <aside class="jwt-claims-panel" aria-label={t.claimsTitle}>
+      <h2>{t.claimsTitle}</h2>
+      <dl class="jwt-claims">
+        <div><dt>{t.algorithmLabel}</dt><dd id="jwt-claim-alg">{t.claimMissing}</dd></div>
+        <div><dt>{t.typeLabel}</dt><dd id="jwt-claim-typ">{t.claimMissing}</dd></div>
+        <div><dt>{t.issuerLabel}</dt><dd id="jwt-claim-iss">{t.claimMissing}</dd></div>
+        <div><dt>{t.subjectLabel}</dt><dd id="jwt-claim-sub">{t.claimMissing}</dd></div>
+        <div><dt>{t.audienceLabel}</dt><dd id="jwt-claim-aud">{t.claimMissing}</dd></div>
+        <div><dt>{t.issuedAtLabel}</dt><dd id="jwt-claim-iat">{t.claimMissing}</dd></div>
+        <div><dt>{t.notBeforeLabel}</dt><dd id="jwt-claim-nbf">{t.claimMissing}</dd></div>
+        <div><dt>{t.expiresAtLabel}</dt><dd id="jwt-claim-exp">{t.claimMissing}</dd></div>
+      </dl>
+    </aside>
+  </section>
+</div>
+
+<script>
+  import { decodeJwt, formatClaimDate, formatClaimValue, formatJson } from './logic';
+  import type { JwtDecoderUI } from './ui';
+
+  const root = document.getElementById('jwt-root') as HTMLElement;
+  const t = JSON.parse(root.dataset.i18n ?? '{}') as JwtDecoderUI;
+  const tokenInput = document.getElementById('jwt-token') as HTMLTextAreaElement;
+  const headerOutput = document.getElementById('jwt-header-output') as HTMLElement;
+  const payloadOutput = document.getElementById('jwt-payload-output') as HTMLElement;
+  const signatureOutput = document.getElementById('jwt-signature-output') as HTMLElement;
+  const status = document.getElementById('jwt-status') as HTMLElement;
+  const claims = {
+    alg: document.getElementById('jwt-claim-alg'),
+    typ: document.getElementById('jwt-claim-typ'),
+    iss: document.getElementById('jwt-claim-iss'),
+    sub: document.getElementById('jwt-claim-sub'),
+    aud: document.getElementById('jwt-claim-aud'),
+    iat: document.getElementById('jwt-claim-iat'),
+    nbf: document.getElementById('jwt-claim-nbf'),
+    exp: document.getElementById('jwt-claim-exp'),
+  };
+
+  function setStatus(text: string, tone: string) {
+    status.textContent = text;
+    status.className = `jwt-status jwt-status-${tone}`;
+  }
+
+  function setClaim(key: keyof typeof claims, value: string | null) {
+    const element = claims[key];
+    if (element) element.textContent = value ?? t.claimMissing;
+  }
+
+  function resetOutputs() {
+    headerOutput.textContent = t.emptyJson;
+    payloadOutput.textContent = t.emptyJson;
+    signatureOutput.textContent = t.signatureMissing;
+    Object.keys(claims).forEach((key) => setClaim(key as keyof typeof claims, null));
+    setStatus(t.statusWaiting, 'waiting');
+  }
+
+  function renderDecodedClaims(decoded: ReturnType<typeof decodeJwt>) {
+    headerOutput.textContent = formatJson(decoded.header);
+    payloadOutput.textContent = formatJson(decoded.payload);
+    signatureOutput.textContent = decoded.signature ? decoded.signature : t.signatureMissing;
+    setClaim('alg', formatClaimValue(decoded.header['alg']));
+    setClaim('typ', formatClaimValue(decoded.header['typ']));
+    setClaim('iss', formatClaimValue(decoded.payload['iss']));
+    setClaim('sub', formatClaimValue(decoded.payload['sub']));
+    setClaim('aud', formatClaimValue(decoded.payload['aud']));
+    setClaim('iat', formatClaimDate(decoded.payload['iat']) ?? formatClaimValue(decoded.payload['iat']));
+    setClaim('nbf', formatClaimDate(decoded.payload['nbf']) ?? formatClaimValue(decoded.payload['nbf']));
+    setClaim('exp', formatClaimDate(decoded.payload['exp']) ?? formatClaimValue(decoded.payload['exp']));
+  }
+
+  function renderDecodedStatus(decoded: ReturnType<typeof decodeJwt>) {
+    if (decoded.expired) {
+      setStatus(t.statusExpired, 'expired');
+    } else if (decoded.unsigned) {
+      setStatus(t.statusUnsigned, 'unsigned');
+    } else {
+      setStatus(`${t.statusValid} ${t.signaturePresent}`, 'valid');
+    }
+  }
+
+  function renderInvalidToken(error: ReturnType<typeof decodeJwt>['error']) {
+    resetOutputs();
+    headerOutput.textContent = t.invalidTokenTitle;
+    payloadOutput.textContent = error === 'invalid-segments' ? t.invalidSegmentError : t.invalidDecodeError;
+    setStatus(t.statusInvalid, 'invalid');
+  }
+
+  function updateDecoder() {
+    const token = tokenInput.value.trim();
+    if (!token) {
+      resetOutputs();
+      return;
+    }
+
+    const decoded = decodeJwt(token);
+    if (!decoded.valid) {
+      renderInvalidToken(decoded.error);
+      return;
+    }
+
+    renderDecodedClaims(decoded);
+    renderDecodedStatus(decoded);
+  }
+
+  async function copyText(text: string) {
+    if (!text || text === t.emptyJson || text === t.signatureMissing) return;
+    await navigator.clipboard.writeText(text);
+  }
+
+  tokenInput.addEventListener('input', updateDecoder);
+  document.getElementById('jwt-sample')?.addEventListener('click', () => {
+    tokenInput.value = t.sampleToken;
+    updateDecoder();
+  });
+  document.getElementById('jwt-clear')?.addEventListener('click', () => {
+    tokenInput.value = '';
+    resetOutputs();
+  });
+  document.getElementById('jwt-copy-all')?.addEventListener('click', () => {
+    copyText([headerOutput.textContent, payloadOutput.textContent, signatureOutput.textContent].join('\n\n'));
+  });
+  document.querySelectorAll<HTMLButtonElement>('.jwt-copy').forEach((button) => {
+    button.addEventListener('click', () => {
+      const target = document.getElementById(button.dataset.copyTarget ?? '');
+      copyText(target?.textContent ?? '');
+      button.dataset.copied = t.copiedLabel;
+      window.setTimeout(() => {
+        delete button.dataset.copied;
+      }, 1400);
+    });
+  });
+
+  updateDecoder();
+</script>

package/src/tool/jwtDecoder/entry.ts

@@ -0,0 +1,30 @@
+import type { DeveloperToolEntry, ToolLocaleContent } from '../../types';
+
+import type { JwtDecoderUI } from './ui';
+
+export type JwtDecoderLocaleContent = ToolLocaleContent<JwtDecoderUI>;
+
+export const jwtDecoder: DeveloperToolEntry<JwtDecoderUI> = {
+  id: 'jwt-decoder-parser-and-claims-inspector',
+  icons: {
+    bg: 'mdi:key-chain',
+    fg: 'mdi:code-json',
+  },
+  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,
+  },
+};