@jjlmoya/utils-chrono 1.11.0 → 1.17.0

package/package.json

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

package/src/category/index.ts

@@ -16,6 +16,9 @@ import { strapLengthCalculator } from '../tool/strap-length-calculator/entry';
 import { telemeterCalculator } from '../tool/telemeter-calculator/entry';
 import { siderealTimeTracker } from '../tool/sidereal-time-tracker/entry';
 import { gearTrainExplorer } from '../tool/gear-train-explorer/entry';
+import { perpetualCalendar } from '../tool/perpetual-calendar/entry';
+import { tourbillonVisualizer } from '../tool/tourbillon-visualizer/entry';
+import { gmtWorldTimer } from '../tool/gmt-world-timer/entry';
 
 export const chronoCategory: ChronoCategoryEntry = {
   icon: 'mdi:clock-outline',
@@ -37,6 +40,9 @@ export const chronoCategory: ChronoCategoryEntry = {
     telemeterCalculator,
     siderealTimeTracker,
     gearTrainExplorer,
+    perpetualCalendar,
+    tourbillonVisualizer,
+    gmtWorldTimer,
   ],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),

package/src/entries.ts

@@ -34,6 +34,12 @@ export { siderealTimeTracker } from './tool/sidereal-time-tracker/entry';
 export type { SiderealTimeTrackerUI, SiderealTimeTrackerLocaleContent } from './tool/sidereal-time-tracker/entry';
 export { gearTrainExplorer } from './tool/gear-train-explorer/entry';
 export type { GearTrainExplorerUI, GearTrainExplorerLocaleContent } from './tool/gear-train-explorer/entry';
+export { perpetualCalendar } from './tool/perpetual-calendar/entry';
+export type { PerpetualCalendarUI, PerpetualCalendarLocaleContent } from './tool/perpetual-calendar/entry';
+export { tourbillonVisualizer } from './tool/tourbillon-visualizer/entry';
+export type { TourbillonUI, TourbillonLocaleContent } from './tool/tourbillon-visualizer/entry';
+export { gmtWorldTimer } from './tool/gmt-world-timer/entry';
+export type { GMTWorldTimerUI, GMTWorldTimerLocaleContent } from './tool/gmt-world-timer/entry';
 export { chronoCategory } from './category';
 
 import { watchAccuracyTracker } from './tool/watch-accuracy-tracker/entry';
@@ -54,6 +60,9 @@ import { strapLengthCalculator } from './tool/strap-length-calculator/entry';
 import { telemeterCalculator } from './tool/telemeter-calculator/entry';
 import { siderealTimeTracker } from './tool/sidereal-time-tracker/entry';
 import { gearTrainExplorer } from './tool/gear-train-explorer/entry';
+import { perpetualCalendar } from './tool/perpetual-calendar/entry';
+import { tourbillonVisualizer } from './tool/tourbillon-visualizer/entry';
+import { gmtWorldTimer } from './tool/gmt-world-timer/entry';
 
-export const ALL_ENTRIES = [watchAccuracyTracker, wristPresenceCalculator, demagnetizingTimer, watchSavingsPlanner, crownReferenceGuide, powerReserveEstimator, beatRateConverter, waterResistanceConverter, strapTaperCalculator, watchSizeComparator, lumeColorSimulator, moonPhaseVisualizer, tachymeterCalculator, serviceIntervalTracker, strapLengthCalculator, telemeterCalculator, siderealTimeTracker, gearTrainExplorer];
+export const ALL_ENTRIES = [watchAccuracyTracker, wristPresenceCalculator, demagnetizingTimer, watchSavingsPlanner, crownReferenceGuide, powerReserveEstimator, beatRateConverter, waterResistanceConverter, strapTaperCalculator, watchSizeComparator, lumeColorSimulator, moonPhaseVisualizer, tachymeterCalculator, serviceIntervalTracker, strapLengthCalculator, telemeterCalculator, siderealTimeTracker, gearTrainExplorer, perpetualCalendar, tourbillonVisualizer, gmtWorldTimer];
 

package/src/tests/locale_completeness.test.ts

@@ -22,7 +22,7 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(18);
+    expect(ALL_TOOLS.length).toBe(21);
   });
 
 });

package/src/tests/tool_validation.test.ts

@@ -5,7 +5,7 @@ import { chronoCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(18);
+      expect(ALL_TOOLS.length).toBe(21);
     });
 
 

package/src/tool/gear-train-explorer/i18n/de.ts

@@ -36,7 +36,7 @@ const howTo = [
 const title = 'Räderwerk Erkunder: Interaktives Uhrmacherei Diagramm';
 
 export const content: ToolLocaleContent<GearTrainExplorerUI> = {
-  slug: 'getriebeerkunder',
+  slug: 'getriebe-erkunder',
   title,
   description: 'Erkunden Sie das mechanische Herz einer Uhr mit einer animierten Räderwerk-Visualisierung. Sehen Sie Federhauswalze, Minutenrad, Kleinbodenrad, Sekundenrad, Hemmungsrad, Anker und Unruh in Bewegung.',
   ui: {

package/src/tool/gear-train-explorer/i18n/es.ts

@@ -36,7 +36,7 @@ const howTo = [
 const title = 'Explorador de Tren de Engranajes: Diagrama Interactivo de Relojería';
 
 export const content: ToolLocaleContent<GearTrainExplorerUI> = {
-  slug: 'exploradortrenengranajes',
+  slug: 'explorador-tren-engranajes',
   title,
   description: 'Explore el corazón mecánico de un reloj con una visualización animada del tren de engranajes. Vea el barril del muelle real, la rueda central, la tercera rueda, la cuarta rueda, la rueda de escape, la horquilla del áncora y el volante en movimiento.',
   ui: {

package/src/tool/gear-train-explorer/i18n/fr.ts

@@ -36,7 +36,7 @@ const howTo = [
 const title = 'Explorateur de Train d\'Engrenages: Diagramme Horloger Interactif';
 
 export const content: ToolLocaleContent<GearTrainExplorerUI> = {
-  slug: 'explorateurtrengrenages',
+  slug: 'explorateur-train-engrenages',
   title,
   description: 'Explorez le cœur mécanique d\'une montre avec une visualisation animée du train d\'engrenages. Voyez le barillet, la roue des minutes, la roue des heures, la roue des secondes, la roue d\'échappement, l\'ancre et le balancier en mouvement.',
   ui: {

package/src/tool/gear-train-explorer/i18n/id.ts

@@ -36,7 +36,7 @@ const howTo = [
 const title = 'Penjelajah Roda Gigi: Diagram Horologi Interaktif';
 
 export const content: ToolLocaleContent<GearTrainExplorerUI> = {
-  slug: 'penjelajahrodagigi',
+  slug: 'penjelajah-roda-gigi',
   title,
   description: 'Jelajahi jantung mekanis jam tangan dengan visualisasi roda gigi animasi. Lihat barre l mainspring, roda tengah, roda ketiga, roda keempat, roda escapement, garpu palet, dan roda keseimbangan bergerak.',
   ui: {

package/src/tool/gear-train-explorer/i18n/it.ts

@@ -36,7 +36,7 @@ const howTo = [
 const title = 'Esploratore del Treno di Ingranaggi: Diagramma Interattivo di Orologeria';
 
 export const content: ToolLocaleContent<GearTrainExplorerUI> = {
-  slug: 'esploratoretreningranaggi',
+  slug: 'esploratore-treni-ingranaggi',
   title,
   description: 'Esplora il cuore meccanico di un orologio con una visualizzazione animata del treno di ingranaggi. Vedi il bariletto, la ruota centrale, la terza ruota, la quarta ruota, la ruota di scappamento, l\'ancora e il bilanciere in movimento.',
   ui: {

package/src/tool/gear-train-explorer/i18n/nl.ts

@@ -36,7 +36,7 @@ const howTo = [
 const title = 'Tandwieltrein Verkenner: Interactief Horlogerie Diagram';
 
 export const content: ToolLocaleContent<GearTrainExplorerUI> = {
-  slug: 'tandwieltreinverkenner',
+  slug: 'tandwiel-trein-verkenner',
   title,
   description: 'Verken het mechanische hart van een horloge met een geanimeerde tandwieltreinvisualisatie. Zie het veerhuis, het centrale wiel, het derde wiel, het vierde wiel, het echappement, de anker en het balanswiel in beweging.',
   ui: {

package/src/tool/gear-train-explorer/i18n/pl.ts

@@ -36,7 +36,7 @@ const howTo = [
 const title = 'Odkrywca Kół Zębatych: Interaktywny Diagram Zegarmistrzowski';
 
 export const content: ToolLocaleContent<GearTrainExplorerUI> = {
-  slug: 'odkrywcakolebate',
+  slug: 'odkrywca-kola-zebate',
   title,
   description: 'Poznaj mechaniczne serce zegarka dzięki animowanej wizualizacji mechanizmu zębatego. Zobacz bęben sprężyny, koło środkowe, trzecie koło, czwarte koło, koło wychwytowe, widełki kotwicowe i balans w ruchu.',
   ui: {

package/src/tool/gear-train-explorer/i18n/pt.ts

@@ -36,7 +36,7 @@ const howTo = [
 const title = 'Explorador do Trem de Engrenagens: Diagrama Interativo de Relojoaria';
 
 export const content: ToolLocaleContent<GearTrainExplorerUI> = {
-  slug: 'exploradortremengrenagens',
+  slug: 'explorador-trem-engrenagens',
   title,
   description: 'Explore o coração mecânico de um relógio com uma visualização animada do trem de engrenagens. Veja a barrica, a roda central, a terceira roda, a quarta roda, a roda de escape, a âncora e o volante em movimento.',
   ui: {

package/src/tool/gear-train-explorer/i18n/ru.ts

@@ -36,7 +36,7 @@ const howTo = [
 const title = 'Исследователь зубчатой передачи: интерактивная схема часового механизма';
 
 export const content: ToolLocaleContent<GearTrainExplorerUI> = {
-  slug: 'issledovatelyzubchatoyperedachi',
+  slug: 'issledovatel-zubchatoy-peredachi',
   title,
   description: 'Исследуйте механическое сердце часов с помощью анимированной визуализации зубчатой передачи. Увидьте барабан, центральное колесо, третье колесо, четвертое колесо, спусковое колесо, анкерную вилку и баланс в движении.',
   ui: {

package/src/tool/gear-train-explorer/i18n/sv.ts

@@ -36,7 +36,7 @@ const howTo = [
 const title = 'Växeltrain Utforskare: Interaktivt Urmakeridiagram';
 
 export const content: ToolLocaleContent<GearTrainExplorerUI> = {
-  slug: 'vaxeltrainutforskare',
+  slug: 'vaxeltrain-utforskare',
   title,
   description: 'Utforska det mekaniska hjärtat av en klocka med en animerad visualisering av kugghjulsväxeln. Se fjäderhuset, centrumhjulet, tredje hjulet, fjärde hjulet, gånghjulet, ankaret och balanshjulet i rörelse.',
   ui: {

package/src/tool/gear-train-explorer/i18n/tr.ts

@@ -36,7 +36,7 @@ const howTo = [
 const title = 'Dişli Takımı Kaşifi: Etkileşimli Saatçilik Diyagramı';
 
 export const content: ToolLocaleContent<GearTrainExplorerUI> = {
-  slug: 'dislitrenikesfi',
+  slug: 'disli-treni-kesfi',
   title,
   description: 'Animasyonlu bir dişli takımı görselleştirmesiyle bir saatin mekanik kalbini keşfedin. Ana yay kutusu, merkez tekerlek, üçüncü tekerlek, dördüncü tekerlek, eşapman tekerleği, palet çatalı ve balans tekerleğini hareket halinde görün.',
   ui: {

package/src/tool/gmt-world-timer/bibliography.astro

@@ -0,0 +1,11 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { gmtWorldTimer } from './index';
+import type { KnownLocale } from '../../types';
+interface Props { locale?: KnownLocale; }
+const { locale = 'en' } = Astro.props as Props;
+const loader = gmtWorldTimer.i18n[locale] || gmtWorldTimer.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/gmt-world-timer/bibliography.ts

@@ -0,0 +1,7 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'Time Zone Map - TimeAndDate', url: 'https://www.timeanddate.com/time/map/' },
+  { name: 'IANA Time Zone Database', url: 'https://www.iana.org/time-zones' },
+  { name: 'UTC - Coordinated Universal Time', url: 'https://www.timeanddate.com/time/utc.html' },
+];

package/src/tool/gmt-world-timer/client.ts

@@ -0,0 +1,250 @@
+const STORAGE_KEY = 'gmt-world-timer-zones';
+
+interface ZoneItem {
+  id: string;
+  label: string;
+}
+
+const DEFAULT_ZONES: ZoneItem[] = [
+  { id: 'America/New_York', label: 'New York' },
+  { id: 'Europe/London', label: 'London' },
+  { id: 'Europe/Paris', label: 'Paris' },
+  { id: 'Asia/Tokyo', label: 'Tokyo' },
+];
+
+const ALL_ZONES: ZoneItem[] = [
+  { id: 'Pacific/Midway', label: 'Midway' },
+  { id: 'Pacific/Honolulu', label: 'Honolulu' },
+  { id: 'America/Anchorage', label: 'Anchorage' },
+  { id: 'America/Los_Angeles', label: 'Los Angeles' },
+  { id: 'America/Denver', label: 'Denver' },
+  { id: 'America/Chicago', label: 'Chicago' },
+  { id: 'America/New_York', label: 'New York' },
+  { id: 'America/Halifax', label: 'Halifax' },
+  { id: 'America/Argentina/Buenos_Aires', label: 'Buenos Aires' },
+  { id: 'Atlantic/Azores', label: 'Azores' },
+  { id: 'Europe/London', label: 'London' },
+  { id: 'Europe/Paris', label: 'Paris' },
+  { id: 'Europe/Berlin', label: 'Berlin' },
+  { id: 'Europe/Madrid', label: 'Madrid' },
+  { id: 'Europe/Rome', label: 'Rome' },
+  { id: 'Europe/Athens', label: 'Athens' },
+  { id: 'Europe/Moscow', label: 'Moscow' },
+  { id: 'Asia/Dubai', label: 'Dubai' },
+  { id: 'Asia/Karachi', label: 'Karachi' },
+  { id: 'Asia/Kolkata', label: 'Kolkata' },
+  { id: 'Asia/Dhaka', label: 'Dhaka' },
+  { id: 'Asia/Bangkok', label: 'Bangkok' },
+  { id: 'Asia/Shanghai', label: 'Shanghai' },
+  { id: 'Asia/Singapore', label: 'Singapore' },
+  { id: 'Asia/Tokyo', label: 'Tokyo' },
+  { id: 'Asia/Seoul', label: 'Seoul' },
+  { id: 'Australia/Sydney', label: 'Sydney' },
+  { id: 'Pacific/Noumea', label: 'Noumea' },
+  { id: 'Pacific/Auckland', label: 'Auckland' },
+];
+
+let zones: ZoneItem[] = [];
+
+function loadZones(): void {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed: ZoneItem[] = JSON.parse(raw);
+      zones = parsed.filter((z) => ALL_ZONES.some((a) => a.id === z.id));
+    }
+  } catch {
+    zones = [];
+  }
+  if (zones.length === 0) zones = [...DEFAULT_ZONES];
+}
+
+function saveZones(): void {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(zones));
+}
+
+function getOffsetLabel(tz: string): string {
+  try {
+    const parts = new Intl.DateTimeFormat('en', { timeZone: tz, timeZoneName: 'shortOffset' }).formatToParts();
+    const off = parts.find((p) => p.type === 'timeZoneName');
+    return off ? off.value : '';
+  } catch {
+    return '';
+  }
+}
+
+function getZoneDate(tz: string): Date {
+  const now = new Date();
+  const localMs = now.getMilliseconds();
+  const localOff = now.getTimezoneOffset();
+  const parts = new Intl.DateTimeFormat('en', { timeZone: tz, timeZoneName: 'longOffset' }).formatToParts(now);
+  const offPart = parts.find((p) => p.type === 'timeZoneName');
+  if (!offPart || !offPart.value) return now;
+  const m = offPart.value.match(/GMT([+-]\d+)(?::(\d+))?/);
+  if (!m) return now;
+  const sign = m[1].startsWith('+') ? 1 : -1;
+  const h = parseInt(m[1].slice(1));
+  const min = m[2] ? parseInt(m[2]) : 0;
+  const tzOff = sign * (h * 60 + min);
+  const utcMs = now.getTime() + localOff * 60000;
+  return new Date(utcMs + tzOff * 60000 + localMs * 0);
+}
+
+function makeClockSVG(tz: string): string {
+  const d = getZoneDate(tz);
+  const h = d.getHours() % 12;
+  const m = d.getMinutes();
+  const s = d.getSeconds();
+  const ms = d.getMilliseconds();
+  const hA = (h / 12) * 360 + (m / 60) * 30;
+  const mA = (m / 60) * 360 + (s / 60) * 6;
+  const sA = (s / 60) * 360 + (ms / 1000) * 6;
+  const tick = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((a) => {
+    const rad = (a - 90) * (Math.PI / 180);
+    const r1 = a % 90 === 0 ? 34 : 37;
+    const x1 = 50 + r1 * Math.cos(rad);
+    const y1 = 50 + r1 * Math.sin(rad);
+    const x2 = 50 + 43 * Math.cos(rad);
+    const y2 = 50 + 43 * Math.sin(rad);
+    const w = a % 90 === 0 ? '1.8' : '1';
+    return `<line x1="${x1.toFixed(1)}" y1="${y1.toFixed(1)}" x2="${x2.toFixed(1)}" y2="${y2.toFixed(1)}" stroke="var(--clock-marks)" stroke-width="${w}" stroke-linecap="round"/>`;
+  }).join('');
+  return `<svg class="gmt-card-clock" viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="46" fill="var(--clock-face)" stroke="var(--clock-bezel)" stroke-width="1.6"/>
+    ${tick}
+    <line x1="50" y1="50" x2="50" y2="27" stroke="var(--clock-hour)" stroke-width="3" stroke-linecap="round" transform="rotate(${hA.toFixed(1)},50,50)"/>
+    <line x1="50" y1="50" x2="50" y2="14" stroke="var(--clock-min)" stroke-width="1.8" stroke-linecap="round" transform="rotate(${mA.toFixed(1)},50,50)"/>
+    <line x1="50" y1="55" x2="50" y2="8" stroke="var(--clock-sec)" stroke-width="1" stroke-linecap="round" transform="rotate(${sA.toFixed(1)},50,50)"/>
+    <circle cx="50" cy="50" r="3" fill="var(--clock-hour)"/>
+  </svg>`;
+}
+
+function getTimeStr(tz: string): string {
+  try {
+    return new Intl.DateTimeFormat('en', {
+      timeZone: tz, hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
+    }).format(new Date());
+  } catch {
+    return '--:--:--';
+  }
+}
+
+function renderCard(z: ZoneItem): string {
+  const id = z.id.replace(/\//g, '-');
+  return `<div class="gmt-card" data-zone="${z.id}" id="card-${id}">
+    <button class="gmt-card-remove" data-remove="${z.id}" aria-label="Remove">&#x2715;</button>
+    <div class="gmt-card-clock-w" id="clock-${id}">${makeClockSVG(z.id)}</div>
+    <div class="gmt-card-info">
+      <div class="gmt-card-city">${z.label}</div>
+      <div class="gmt-card-time" id="time-${id}">${getTimeStr(z.id)}</div>
+      <div class="gmt-card-offset" id="off-${id}">${getOffsetLabel(z.id)}</div>
+    </div>
+  </div>`;
+}
+
+function renderGrid(): void {
+  const grid = document.getElementById('gmt-grid')!;
+  grid.innerHTML = zones.map(renderCard).join('');
+  grid.querySelectorAll('[data-remove]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const id = (btn as HTMLElement).dataset.remove!;
+      removeZone(id);
+    });
+  });
+}
+
+function updateCards(): void {
+  for (const z of zones) {
+    const id = z.id.replace(/\//g, '-');
+    const clockEl = document.getElementById(`clock-${id}`);
+    const timeEl = document.getElementById(`time-${id}`);
+    if (clockEl) clockEl.innerHTML = makeClockSVG(z.id);
+    if (timeEl) timeEl.textContent = getTimeStr(z.id);
+  }
+  requestAnimationFrame(updateCards);
+}
+
+function addZone(z: ZoneItem): void {
+  if (zones.some((existing) => existing.id === z.id)) return;
+  zones.push(z);
+  saveZones();
+  renderGrid();
+}
+
+function removeZone(id: string): void {
+  zones = zones.filter((z) => z.id !== id);
+  saveZones();
+  renderGrid();
+  if (zones.length === 0) {
+    zones = [...DEFAULT_ZONES];
+    saveZones();
+    renderGrid();
+  }
+}
+
+function filterZones(q: string): ZoneItem[] {
+  return ALL_ZONES.filter((z) => {
+    const l = z.label.toLowerCase();
+    const i = z.id.toLowerCase();
+    return l.includes(q) || i.includes(q);
+  }).slice(0, 10);
+}
+
+function renderDropdownItems(dd: HTMLElement, matches: ZoneItem[]): void {
+  dd.innerHTML = matches
+    .map((z) => {
+      const taken = zones.some((existing) => existing.id === z.id);
+      return `<div class="gmt-dd-item ${taken ? 'taken' : ''}" data-add="${z.id}">
+        <span>${z.label}</span>
+        <span class="gmt-dd-offset">${getOffsetLabel(z.id)}</span>
+      </div>`;
+    })
+    .join('');
+  dd.querySelectorAll('[data-add]').forEach((el) => {
+    el.addEventListener('click', () => {
+      const zid = (el as HTMLElement).dataset.add!;
+      const zone = ALL_ZONES.find((z) => z.id === zid);
+      if (zone) addZone(zone);
+      (document.getElementById('gmt-search') as HTMLInputElement).value = '';
+      dd.classList.remove('open');
+    });
+  });
+  dd.classList.add('open');
+}
+
+function renderDropdown(query: string): void {
+  const dd = document.getElementById('gmt-dropdown')!;
+  const q = query.toLowerCase().trim();
+  if (!q) { dd.classList.remove('open'); return; }
+  const matches = filterZones(q);
+  if (matches.length === 0) {
+    dd.innerHTML = '<div class="gmt-dd-empty">No cities found</div>';
+    dd.classList.add('open');
+    return;
+  }
+  renderDropdownItems(dd, matches);
+}
+
+function init(): void {
+  loadZones();
+  renderGrid();
+  requestAnimationFrame(updateCards);
+
+  const search = document.getElementById('gmt-search') as HTMLInputElement;
+  const dd = document.getElementById('gmt-dropdown')!;
+
+  search.addEventListener('input', () => renderDropdown(search.value));
+  search.addEventListener('focus', () => {
+    if (search.value.trim()) renderDropdown(search.value);
+  });
+  document.addEventListener('click', (e) => {
+    if (!(e.target as HTMLElement).closest('.gmt-search-w')) {
+      dd.classList.remove('open');
+    }
+  });
+  search.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') dd.classList.remove('open');
+  });
+}
+
+init();

package/src/tool/gmt-world-timer/component.astro

@@ -0,0 +1,13 @@
+---
+import GmtPanel from './components/GmtPanel.astro';
+interface Props { ui: Record<string, string>; }
+const { ui } = Astro.props;
+---
+
+<link href="./gmt-world-timer.css" rel="stylesheet" />
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <GmtPanel labels={ui} />
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/gmt-world-timer/components/GmtPanel.astro

@@ -0,0 +1,18 @@
+---
+interface Props { labels: Record<string, string>; }
+const { labels } = Astro.props;
+---
+
+<div class="gmt-tool">
+  <div class="gmt-search-w">
+    <input
+      type="text"
+      class="gmt-search"
+      id="gmt-search"
+      placeholder={labels.searchPlaceholder || 'Search city or time zone...'}
+      autocomplete="off"
+    />
+    <div class="gmt-dropdown" id="gmt-dropdown"></div>
+  </div>
+  <div class="gmt-grid" id="gmt-grid"></div>
+</div>

package/src/tool/gmt-world-timer/entry.ts

@@ -0,0 +1,34 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type GMTWorldTimerUI = {
+  title: string;
+  searchPlaceholder: string;
+  addLabel: string;
+  removeLabel: string;
+  noResults: string;
+  yourZones: string;
+};
+
+export type GMTWorldTimerLocaleContent = ToolLocaleContent<GMTWorldTimerUI>;
+
+export const gmtWorldTimer: ChronoToolEntry<GMTWorldTimerUI> = {
+  id: 'gmt-world-timer',
+  icons: { bg: 'mdi:web', fg: 'mdi:clock-time-eight' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};