@jjlmoya/utils-chrono 1.11.0 → 1.16.0

package/src/tool/perpetual-calendar/calendar.ts

@@ -0,0 +1,24 @@
+export function isLeapYear(y: number): boolean {
+  return new Date(y, 1, 29).getDate() === 29;
+}
+
+export function daysInMonth(y: number, m: number): number {
+  return new Date(y, m + 1, 0).getDate();
+}
+
+const PHASES = ['New Moon', 'Waxing Crescent', 'First Quarter', 'Waxing Gibbous', 'Full Moon', 'Waning Gibbous', 'Last Quarter', 'Waning Crescent'];
+const PHASE_THRESHOLDS = [0.03, 0.22, 0.28, 0.47, 0.53, 0.72, 0.78, 0.97];
+
+export function moonPhase(y: number, m: number, d: number, locale = 'en'): { phase: string; illumination: number } {
+  const jd = new Date(y, m, d).getTime() / 86400000 + 2440587.5 - 2451549.5;
+  const cycle = 29.53058867;
+  const progress = (((jd % cycle) + cycle) % cycle) / cycle;
+  const ill = Math.round((progress <= 0.5 ? progress * 2 : (1 - progress) * 2) * 100);
+  const pct = new Intl.NumberFormat(locale, { style: 'percent' }).format(ill / 100);
+  let phase = '';
+  for (let i = 0; i < PHASE_THRESHOLDS.length; i++) {
+    if (progress < PHASE_THRESHOLDS[i]) { phase = PHASES[i]; break; }
+  }
+  if (!phase) phase = PHASES[PHASES.length - 1];
+  return { phase: phase + ' ' + pct, illumination: ill };
+}

package/src/tool/perpetual-calendar/client.ts

@@ -0,0 +1,98 @@
+const canvas = document.getElementById('calendar-canvas') as HTMLCanvasElement;
+const ctx = canvas.getContext('2d')!;
+
+import { setCtx, detectTheme } from './state';
+import { drawScene } from './dial';
+import { isLeapYear, daysInMonth, moonPhase } from './calendar';
+
+setCtx(ctx);
+
+const REF_W = 600;
+const REF_H = 600;
+
+let curY = new Date().getFullYear();
+let curM = new Date().getMonth();
+let curD = new Date().getDate();
+let smoothD = curD;
+let autoPlaying = false;
+
+function resizeCanvas() {
+  const parent = canvas.parentElement!;
+  const dw = parent.clientWidth;
+  const dh = dw * (REF_H / REF_W);
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
+  canvas.style.width = dw + 'px';
+  canvas.style.height = dh + 'px';
+  canvas.width = dw * dpr;
+  canvas.height = dh * dpr;
+  ctx.setTransform(dw / REF_W * dpr, 0, 0, dh / REF_H * dpr, 0, 0);
+}
+
+function updateUI() {
+  const setText = (id: string, v: string) => { const el = document.getElementById(id); if (el) el.textContent = v; };
+  const d = Math.round(smoothD);
+  const dt = new Date(curY, curM, d);
+  const loc = window.location.pathname.match(/^\/([a-z]{2})/)?.[1] || 'en';
+  setText('cal-date', d.toString());
+  setText('cal-weekday', new Intl.DateTimeFormat(loc, { weekday: 'long' }).format(dt));
+  setText('cal-month', new Intl.DateTimeFormat(loc, { month: 'long' }).format(dt));
+  setText('cal-year', curY.toString());
+  setText('cal-leap', isLeapYear(curY) ? 'Yes' : 'No');
+  const mp = moonPhase(curY, curM, d, loc);
+  setText('cal-moon', mp.phase);
+  setText('cal-weekday-header', new Intl.DateTimeFormat(loc, { weekday: 'long' }).format(dt));
+  setText('cal-date-full', new Intl.DateTimeFormat(loc, { month: 'long', day: 'numeric', year: 'numeric' }).format(dt));
+}
+
+function render() {
+  detectTheme();
+  drawScene(curY, curM, curD, smoothD);
+  updateUI();
+}
+
+function tick() {
+  if (autoPlaying) {
+    curD++;
+    if (curD > daysInMonth(curY, curM)) { curD = 1; curM++; }
+    if (curM > 11) { curM = 0; curY++; }
+    smoothD = curD;
+  }
+  render();
+  animationId = requestAnimationFrame(tick);
+}
+
+function advance(fn: () => void) {
+  if (autoPlaying) { autoPlaying = false; document.querySelector('[data-action="play"]')!.textContent = '\u25B6'; }
+  fn();
+  smoothD = curD;
+  render();
+}
+
+function initControls() {
+  document.querySelector('[data-action="day-next"]')?.addEventListener('click', () => advance(() => {
+    curD++; if (curD > daysInMonth(curY, curM)) { curD = 1; curM++; if (curM > 11) { curM = 0; curY++; } }
+  }));
+  document.querySelector('[data-action="day-prev"]')?.addEventListener('click', () => advance(() => {
+    curD--; if (curD < 1) { curM--; if (curM < 0) { curM = 11; curY--; } curD = daysInMonth(curY, curM); }
+  }));
+  document.querySelector('[data-action="month-next"]')?.addEventListener('click', () => advance(() => {
+    curD = 1; curM++; if (curM > 11) { curM = 0; curY++; }
+  }));
+  document.querySelector('[data-action="year-next"]')?.addEventListener('click', () => advance(() => {
+    const d = new Date(curY + 1, curM, curD);
+    curY = d.getFullYear(); curM = d.getMonth(); curD = d.getDate();
+  }));
+  document.querySelector('[data-action="play"]')?.addEventListener('click', (e) => {
+    autoPlaying = !autoPlaying;
+    (e.currentTarget as HTMLElement).textContent = autoPlaying ? '\u23F8' : '\u25B6';
+  });
+  document.querySelector('[data-action="reset"]')?.addEventListener('click', () => advance(() => {
+    const n = new Date();
+    curY = n.getFullYear(); curM = n.getMonth(); curD = n.getDate();
+  }));
+}
+
+new ResizeObserver(resizeCanvas).observe(canvas.parentElement!);
+resizeCanvas();
+initControls();
+tick();

package/src/tool/perpetual-calendar/component.astro

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

package/src/tool/perpetual-calendar/components/CalendarPanel.astro

@@ -0,0 +1,49 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="calendar-layout">
+  <div class="dial-section">
+    <canvas id="calendar-canvas" width="600" height="600"></canvas>
+    <div class="date-overlay" id="cal-date-header">
+      <span class="date-weekday" id="cal-weekday-header">Tuesday</span>
+      <span class="date-full" id="cal-date-full">May 26, 2026</span>
+    </div>
+  </div>
+
+  <div class="sidebar">
+    <div class="sidebar-group">
+      <div class="sidebar-label">{labels.dateLabel || 'Navigate'}</div>
+      <div class="sidebar-buttons">
+        <button data-action="day-prev" title="Day -1">&#9664;D</button>
+        <button data-action="day-next" title="Day +1">D&#9654;</button>
+        <button data-action="month-next" title="Month +1">M&#9654;</button>
+        <button data-action="year-next" title="Year +1">Y&#9654;</button>
+      </div>
+    </div>
+
+    <div class="sidebar-group">
+      <div class="sidebar-label">{labels.autoPlay || 'Auto'}</div>
+      <div class="sidebar-buttons">
+        <button class="play-btn" data-action="play" title="Auto advance">&#9654;</button>
+        <button data-action="reset" title="Reset to today">&#9673;</button>
+      </div>
+    </div>
+
+    <div class="sidebar-group">
+      <div class="sidebar-label">Info</div>
+      <div class="sidebar-info" id="cal-info">
+        <div class="sidebar-row"><span class="slbl">{labels.dateLabel || 'Date'}</span><span class="sval" id="cal-date">1</span></div>
+        <div class="sidebar-row"><span class="slbl">{labels.weekdayLabel || 'Day'}</span><span class="sval" id="cal-weekday">Mon</span></div>
+        <div class="sidebar-row"><span class="slbl">{labels.monthLabel || 'Month'}</span><span class="sval" id="cal-month">Jan</span></div>
+        <div class="sidebar-row"><span class="slbl">{labels.yearLabel || 'Year'}</span><span class="sval" id="cal-year">2024</span></div>
+        <div class="sidebar-row"><span class="slbl">{labels.leapYearLabel || 'Leap'}</span><span class="sval" id="cal-leap">No</span></div>
+        <div class="sidebar-row"><span class="slbl">{labels.moonPhaseLabel || 'Moon'}</span><span class="sval" id="cal-moon">New</span></div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/tool/perpetual-calendar/dial.ts

@@ -0,0 +1,176 @@
+import { getCtx, getFontFam, c, W, H, CX, CY, OUTER_R } from './state';
+
+export function drawBg() {
+  const ctx = getCtx();
+  const grad = ctx.createRadialGradient(CX, CY, 0, CX, CY, 400);
+  grad.addColorStop(0, c('#1e1e3a', '#f5f0e8'));
+  grad.addColorStop(0.5, c('#16162e', '#eae4d8'));
+  grad.addColorStop(1, c('#0c0c18', '#ddd6c8'));
+  ctx.fillStyle = grad;
+  ctx.fillRect(0, 0, W, H);
+}
+
+export function drawOuterRing() {
+  const ctx = getCtx();
+  ctx.beginPath();
+  ctx.arc(CX, CY, OUTER_R, 0, Math.PI * 2);
+  ctx.strokeStyle = c('rgba(212,175,55,0.3)', 'rgba(139,105,20,0.3)');
+  ctx.lineWidth = 2;
+  ctx.stroke();
+}
+
+export function drawDateNumbers(currentDate: number, smoothDate: number) {
+  const ctx = getCtx();
+  const r = 245;
+  const ff = getFontFam();
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  for (let i = 1; i <= 31; i++) {
+    const ang = ((i - 1) / 31) * Math.PI * 2 - Math.PI / 2;
+    const x = CX + Math.cos(ang) * r;
+    const y = CY + Math.sin(ang) * r;
+    const isActive = Math.round(smoothDate) === i;
+    ctx.font = (isActive ? 'bold 13px ' : '10px ') + ff;
+    ctx.fillStyle = isActive ? c('#ffd700', '#8b6914') : c('rgba(180,180,200,0.5)', 'rgba(80,70,50,0.5)');
+    ctx.fillText(i.toString(), x, y);
+  }
+}
+
+export function drawDateHand(smoothDate: number) {
+  const ctx = getCtx();
+  const ang = ((smoothDate - 1) / 31) * Math.PI * 2 - Math.PI / 2;
+  ctx.save();
+  ctx.translate(CX, CY);
+  ctx.rotate(ang);
+  ctx.beginPath();
+  ctx.moveTo(-4, 20);
+  ctx.lineTo(0, -200);
+  ctx.lineTo(4, 20);
+  ctx.closePath();
+  const grad = ctx.createLinearGradient(0, -200, 0, 20);
+  grad.addColorStop(0, c('#ffd700', '#b8860b'));
+  grad.addColorStop(1, c('#b8860b', '#8b6914'));
+  ctx.fillStyle = grad;
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(0, 0, 6, 0, Math.PI * 2);
+  ctx.fillStyle = c('#d4af37', '#8b6914');
+  ctx.fill();
+  ctx.restore();
+}
+
+export function drawMonthWindow(y: number, m: number) {
+  const ctx = getCtx();
+  const ff = getFontFam();
+  const mn = new Intl.DateTimeFormat(window.location.pathname.match(/^\/([a-z]{2})/)?.[1] || 'en', { month: 'long' }).format(new Date(y, m, 1));
+  ctx.save();
+  const x = CX, yPos = CY - 140;
+  ctx.fillStyle = c('rgba(30,30,58,0.9)', 'rgba(245,240,232,0.95)');
+  ctx.beginPath();
+  ctx.roundRect(x - 75, yPos - 12, 150, 28, 6);
+  ctx.fill();
+  ctx.strokeStyle = c('rgba(212,175,55,0.4)', 'rgba(139,105,20,0.4)');
+  ctx.lineWidth = 1;
+  ctx.stroke();
+  ctx.fillStyle = c('#d4af37', '#8b6914');
+  ctx.font = '600 13px ' + ff;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(mn, x, yPos + 2);
+  ctx.restore();
+}
+
+export function drawDaySubdial(y: number, m: number, d: number) {
+  const ctx = getCtx();
+  const ff = getFontFam();
+  const dow = new Date(y, m, d).getDay();
+  const names = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  const sx = CX + 150, sy = CY - 20, sr = 45;
+  ctx.beginPath();
+  ctx.arc(sx, sy, sr, 0, Math.PI * 2);
+  ctx.fillStyle = c('rgba(30,30,58,0.8)', 'rgba(245,240,232,0.9)');
+  ctx.fill();
+  ctx.strokeStyle = c('rgba(212,175,55,0.3)', 'rgba(139,105,20,0.3)');
+  ctx.lineWidth = 1;
+  ctx.stroke();
+  ctx.fillStyle = c('rgba(180,180,200,0.4)', 'rgba(80,70,50,0.4)');
+  ctx.font = '7px ' + ff;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  for (let i = 0; i < 7; i++) {
+    const a = (i / 7) * Math.PI * 2 - Math.PI / 2;
+    const nx = sx + Math.cos(a) * (sr - 10);
+    const ny = sy + Math.sin(a) * (sr - 10);
+    ctx.fillStyle = i === dow ? c('#ffd700', '#8b6914') : c('rgba(180,180,200,0.4)', 'rgba(80,70,50,0.4)');
+    ctx.font = (i === dow ? 'bold 8px ' : '7px ') + ff;
+    ctx.fillText(names[i], nx, ny);
+  }
+  ctx.fillStyle = c('#d4af37', '#8b6914');
+  ctx.font = 'bold 14px ' + ff;
+  ctx.fillText(names[dow], sx, sy + sr + 16);
+}
+
+export function drawMoonSubdial(y: number, m: number, d: number) {
+  const ctx = getCtx();
+  const mx = CX - 150, my = CY + 30, mr = 42;
+  ctx.beginPath();
+  ctx.arc(mx, my, mr, 0, Math.PI * 2);
+  ctx.fillStyle = c('rgba(30,30,58,0.8)', 'rgba(245,240,232,0.9)');
+  ctx.fill();
+  ctx.strokeStyle = c('rgba(212,175,55,0.3)', 'rgba(139,105,20,0.3)');
+  ctx.lineWidth = 1;
+  ctx.stroke();
+  const jd = new Date(y, m, d).getTime() / 86400000 + 2440587.5 - 2451549.5;
+  const progress = (((jd % 29.53058867) + 29.53058867) % 29.53058867) / 29.53058867;
+  const mr2 = mr - 8;
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(mx, my, mr2, 0, Math.PI * 2);
+  ctx.fillStyle = c('#1a1a2e', '#ddd6c8');
+  ctx.fill();
+  ctx.clip();
+  ctx.beginPath();
+  ctx.arc(mx + (progress - 0.5) * mr2 * 2, my, mr2, 0, Math.PI * 2);
+  ctx.fillStyle = c('#e8d8a0', '#c8a850');
+  ctx.fill();
+  ctx.restore();
+  ctx.beginPath();
+  ctx.arc(mx, my, mr2, 0, Math.PI * 2);
+  ctx.strokeStyle = c('rgba(212,175,55,0.2)', 'rgba(139,105,20,0.2)');
+  ctx.lineWidth = 1;
+  ctx.stroke();
+}
+
+export function drawLeapIndicator(y: number) {
+  const ctx = getCtx();
+  const ff = getFontFam();
+  const leap = new Date(y, 1, 29).getDate() === 29;
+  const lx = CX, ly = CY + 130;
+  ctx.fillStyle = c('rgba(30,30,58,0.8)', 'rgba(245,240,232,0.9)');
+  ctx.beginPath();
+  ctx.roundRect(lx - 50, ly - 10, 100, 24, 6);
+  ctx.fill();
+  ctx.strokeStyle = leap ? c('rgba(212,175,55,0.5)', 'rgba(139,105,20,0.5)') : c('rgba(60,60,90,0.3)', 'rgba(80,70,50,0.2)');
+  ctx.lineWidth = 1;
+  ctx.stroke();
+  ctx.fillStyle = leap ? c('#ffd700', '#8b6914') : c('rgba(160,160,184,0.4)', 'rgba(80,70,50,0.4)');
+  ctx.font = '600 10px ' + ff;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(leap ? 'LEAP YEAR' : 'COMMON YEAR', lx, ly + 2);
+}
+
+export function drawScene(y: number, m: number, d: number, smoothDate: number) {
+  const ctx = getCtx();
+  ctx.save();
+  ctx.clearRect(0, 0, W, H);
+  drawBg();
+  drawOuterRing();
+  drawDateNumbers(d, smoothDate);
+  drawDateHand(smoothDate);
+  drawMonthWindow(y, m);
+  drawDaySubdial(y, m, Math.round(smoothDate));
+  drawMoonSubdial(y, m, Math.round(smoothDate));
+  drawLeapIndicator(y);
+  ctx.restore();
+}

package/src/tool/perpetual-calendar/entry.ts

@@ -0,0 +1,48 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type PerpetualCalendarUI = {
+  title: string;
+  dateLabel: string;
+  dayLabel: string;
+  monthLabel: string;
+  yearLabel: string;
+  leapYearLabel: string;
+  moonPhaseLabel: string;
+  weekdayLabel: string;
+  advanceDay: string;
+  advanceMonth: string;
+  advanceYear: string;
+  autoPlay: string;
+  resetBtn: string;
+  dayNames: string;
+  monthNames: string;
+  tipTitle: string;
+  tipContent: string;
+  step1: string;
+  step2: string;
+  step3: string;
+};
+
+export type PerpetualCalendarLocaleContent = ToolLocaleContent<PerpetualCalendarUI>;
+
+export const perpetualCalendar: ChronoToolEntry<PerpetualCalendarUI> = {
+  id: 'perpetual-calendar',
+  icons: { bg: 'mdi:calendar-text', fg: 'mdi:calendar-month' },
+  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),
+  },
+};

package/src/tool/perpetual-calendar/helpers.ts

@@ -0,0 +1,49 @@
+import type { WithContext, Thing } from 'schema-dts';
+import type { FAQItem, HowToStep } from '../../types';
+
+function buildFAQ(faq: FAQItem[]): WithContext<Thing> {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    'mainEntity': faq.map((f) => ({
+      '@type': 'Question',
+      'name': f.question,
+      'acceptedAnswer': {
+        '@type': 'Answer',
+        'text': f.answer,
+      },
+    })),
+  } as unknown as WithContext<Thing>;
+}
+
+function buildApp(title: string): WithContext<Thing> {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    'name': title,
+    'operatingSystem': 'All',
+    'applicationCategory': 'UtilitiesApplication',
+    'browserRequirements': 'Requires HTML5. Requires JavaScript.',
+  } as unknown as WithContext<Thing>;
+}
+
+function buildHowTo(title: string, howTo: HowToStep[]): WithContext<Thing> {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    'name': title,
+    'step': howTo.map((h) => ({
+      '@type': 'HowToStep',
+      'name': h.name,
+      'text': h.text,
+    })),
+  } as unknown as WithContext<Thing>;
+}
+
+export function buildSchemas(
+  title: string,
+  faq: FAQItem[],
+  howTo: HowToStep[]
+): WithContext<Thing>[] {
+  return [buildFAQ(faq), buildApp(title), buildHowTo(title, howTo)];
+}

package/src/tool/perpetual-calendar/i18n/de.ts

@@ -0,0 +1,85 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PerpetualCalendarUI } from '../entry';
+import { bibliography } from '../bibliography';
+import { buildSchemas } from '../helpers';
+
+const faq = [
+  {
+    question: 'Was ist ein ewiger Kalender in einer Uhr?',
+    answer: 'Ein ewiger Kalender ist eine mechanische Uhrenkomplikation, die automatisch das korrekte Datum, den Wochentag, den Monat und die Mondphase anzeigt und dabei unterschiedliche Monatslängen und Schaltjahre berücksichtigt. Er ist bis zum Jahr 2100 programmiert (dem nächsten Jahrhundertjahr, das nicht durch 400 teilbar ist).',
+  },
+  {
+    question: 'Wie erkennt ein ewiger Kalender Schaltjahre?',
+    answer: 'Das mechanische Programm verwendet ein 48-Monats-Getriebe (4 Jahre) mit einer speziell geformten Kurvenscheibe, die den Schalttag am 29. Februar berücksichtigt. Der Mechanismus weiß, dass durch 100 teilbare Jahre keine Schaltjahre sind, es sei denn, sie sind auch durch 400 teilbar. Die meisten ewigen Kalender sind bis 2100 genau und benötigen dann eine Eintageskorrektur.',
+  },
+  {
+    question: 'Was ist der Unterschied zwischen einem ewigen und einem Jahreskalender?',
+    answer: 'Ein Jahreskalender benötigt eine manuelle Korrektur pro Jahr (Ende Februar), während ein ewiger Kalender Schaltjahre automatisch behandelt und jahrzehntelang korrekt läuft. Ewige Kalender sind mechanisch deutlich komplexer.',
+  },
+];
+
+const howTo = [
+  {
+    name: 'Datum vorwärts bewegen',
+    text: 'Verwenden Sie die Tasten D (Tag), M (Monat) und Y (Jahr), um den Kalender vorwärzubewegen. Beobachten Sie, wie sich der Datumszeiger bewegt und sich das Monatsfenster ändert.',
+  },
+  {
+    name: 'Schaltjahresübergänge beobachten',
+    text: 'Bewegen Sie sich durch den Februar eines Schaltjahres (z.B. 2024), um den Sprung vom 29. auf den 1. März zu sehen. Versuchen Sie es mit einem Nicht-Schaltjahr, um den Sprung vom 28. auf den 1. März zu beobachten.',
+  },
+  {
+    name: 'Automatischen Ablauf nutzen',
+    text: 'Drücken Sie auf Play, um den Kalender automatisch vorlaufen zu lassen. So sehen Sie den gesamten Zyklus der Monatslängen und den Fortschritt der Mondphase.',
+  },
+];
+
+const title = 'Ewiger Kalender Simulator: Interaktive Uhrenkomplikation';
+
+export const content: ToolLocaleContent<PerpetualCalendarUI> = {
+  slug: 'ewigerkalender',
+  title,
+  description: 'Entdecken Sie das mechanische Genie einer ewigen Kalender-Uhrenkomplikation. Visualisieren Sie Datum, Wochentag, Monat, Schaltjahrzyklus und Mondphase mit einem animierten Zifferblatt.',
+  ui: {
+    title: 'Ewiger Kalender Simulator',
+    dateLabel: 'Datum',
+    dayLabel: 'Tag',
+    monthLabel: 'Monat',
+    yearLabel: 'Jahr',
+    leapYearLabel: 'Schaltjahr',
+    moonPhaseLabel: 'Mondphase',
+    weekdayLabel: 'Wochentag',
+    advanceDay: 'Tag vor',
+    advanceMonth: 'Monat vor',
+    advanceYear: 'Jahr vor',
+    autoPlay: 'Auto',
+    resetBtn: 'Heute',
+    dayNames: 'Sonntag,Montag,Dienstag,Mittwoch,Donnerstag,Freitag,Samstag',
+    monthNames: 'Januar,Februar,März,April,Mai,Juni,Juli,August,September,Oktober,November,Dezember',
+    tipTitle: 'Tipp',
+    tipContent: 'Die meisten ewigen Kalenderuhren verwenden ein 48-Monats-Programmräderwerk mit Kerben unterschiedlicher Länge. Der Februar hat die kürzeste Kerbe (28 Tage in Normaljahren, 29 in Schaltjahren), während 30- und 31-Tage-Monate progressiv längere Kerben haben.',
+    step1: 'Bewegen Sie sich Tag für Tag durch den Februar, um zu sehen, wie der Mechanismus Monatsübergänge bewältigt.',
+    step2: 'Verfolgen Sie den Fortschritt der Mondphasenanziege durch ihren 29,5-Tage-Zyklus.',
+    step3: 'Vergleichen Sie die Februar-Übergänge von Schaltjahren und Normaljahren, um den 4-Jahres-Zyklus zu verstehen.',
+  },
+  seo: [
+    { type: 'title', text: 'Ewiger Kalender Simulator: Interaktive Uhrenkomplikation', level: 2 },
+    { type: 'paragraph', html: 'Der <strong>ewige Kalender</strong> ist eine der prestigeträchtigsten Komplikationen der Haute Horlogerie. Dieser interaktive Simulator visualisiert, wie ein mechanischer ewiger Kalender Datum, Wochentag, Monat, Schaltjahr und Mondphase verfolgt — jahrzehntelang ohne manuelle Korrektur. Erkunden Sie das 48-Monats-Getriebeprogramm, sehen Sie wie Februar-Übergänge funktionieren und verstehen Sie die in diesen Meisterwerken der Mikromechanik integrierte gregorianische Kalenderlogik.' },
+    { type: 'title', text: 'Wie ein ewiger Kalender funktioniert', level: 3 },
+    { type: 'paragraph', html: 'Ein mechanischer ewiger Kalender verwendet ein <strong>Programmräderwerk</strong> mit Kerben unterschiedlicher Tiefe, die die verschiedenen Monatslängen repräsentieren. Ein Abtasthebel fällt in jede Kerbe; eine tiefere Kerbe signalisiert einen kurzen Monat (28-29 Tage) und löst den Mechanismus aus, nach der korrekten Anzahl von Tagen auf den 1. des nächsten Monats vorzuspringen. Ein <strong>48-Monats-Getriebe</strong> bewältigt den 4-Jahres-Schaltjahrzyklus mit einer zusätzlichen Kerbe für den 29. Februar. Das Programm weiß, dass Jahrhundertjahre (z.B. 2100) das Schaltjahr auslassen, es sei denn, sie sind durch 400 teilbar.' },
+    { type: 'title', text: 'Vergleich: Ewiger vs. Jahreskalender', level: 3 },
+    {
+      type: 'table', headers: ['Merkmal', 'Jahreskalender', 'Ewiger Kalender'], rows: [
+        ['Erfordert Korrektur', 'Einmal pro Jahr (1. März)', 'Einmal pro Jahrhundert (2100)'],
+        ['Schaltjahrhandhabung', 'Manuell', 'Automatisch (4-Jahres-Nocken)'],
+        ['Monatserkennung', '30 vs 31 Tage', 'Vollständig 28/29/30/31'],
+        ['Komplexität', 'Mäßig (~50 Teile)', 'Sehr hoch (~200+ Teile)'],
+        ['Preisspanne', '3.000-15.000 €', '20.000-500.000+ €'],
+      ]
+    },
+    { type: 'diagnostic', variant: 'info', title: 'Interaktiver Kalender Simulator', icon: 'mdi:calendar-month', badge: 'UHRMACHEREI', html: 'Dieses Tool simuliert den Kalendermechanismus einer ewigen Kalenderuhr. Das animierte Zifferblatt zeigt den Datumszeiger, das Monatsfenster, den Wochentag-Subdial, die Mondphase und den Schaltjahresindikator. Nutzen Sie die Steuerung, um durch Tage, Monate oder Jahre zu blättern und die mechanische Logik in Aktion zu beobachten.' },
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: buildSchemas(title, faq, howTo),
+};

package/src/tool/perpetual-calendar/i18n/en.ts

@@ -0,0 +1,102 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { PerpetualCalendarUI } from '../entry';
+import { bibliography } from '../bibliography';
+import { buildSchemas } from '../helpers';
+
+const faq = [
+  {
+    question: 'What is a perpetual calendar watch?',
+    answer: 'A perpetual calendar is a mechanical watch complication that displays the correct date, day, month, and moon phase automatically, accounting for months of different lengths and leap years. It is programmed to be accurate until the year 2100 (the next century year not divisible by 400).',
+  },
+  {
+    question: 'How does a perpetual calendar know leap years?',
+    answer: 'The mechanical program uses a 48-month gear (4 years) with a specially designed cam that accounts for the February 29th leap day. The mechanism knows that years divisible by 100 are not leap years unless also divisible by 400. Most perpetual calendars are accurate until 2100, which will require a one-day correction.',
+  },
+  {
+    question: 'What is the difference between a perpetual and an annual calendar?',
+    answer: 'An annual calendar requires one manual correction per year (at the end of February), while a perpetual calendar automatically handles leap years and continues correctly for decades or centuries. Perpetual calendars are significantly more complex mechanically.',
+  },
+];
+
+const howTo = [
+  {
+    name: 'Advance the date',
+    text: 'Use the D (day), M (month), and Y (year) buttons to advance the calendar forward. Watch the date hand sweep and the month window change.',
+  },
+  {
+    name: 'Observe leap year transitions',
+    text: 'Advance through February of a leap year (e.g., 2024) to see the date jump from 29 to March 1. Try a non-leap year to see it skip from 28 to March 1.',
+  },
+  {
+    name: 'Use auto-play',
+    text: 'Press play to watch the calendar automatically advance. This reveals the full cycle of month lengths and the moon phase progression.',
+  },
+];
+
+const title = 'Perpetual Calendar Simulator: Interactive Watch Complication';
+
+export const content: ToolLocaleContent<PerpetualCalendarUI> = {
+  slug: 'perpetual-calendar',
+  title,
+  description: 'Explore the mechanical genius of a perpetual calendar watch complication. Visualize date, day, month, leap year cycle, and moon phase with an animated dial.',
+  ui: {
+    title: 'Perpetual Calendar Simulator',
+    dateLabel: 'Date',
+    dayLabel: 'Day',
+    monthLabel: 'Month',
+    yearLabel: 'Year',
+    leapYearLabel: 'Leap Year',
+    moonPhaseLabel: 'Moon Phase',
+    weekdayLabel: 'Weekday',
+    advanceDay: 'Advance Day',
+    advanceMonth: 'Advance Month',
+    advanceYear: 'Advance Year',
+    autoPlay: 'Auto Play',
+    resetBtn: 'Today',
+    dayNames: 'Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday',
+    monthNames: 'January,February,March,April,May,June,July,August,September,October,November,December',
+    tipTitle: 'Tip',
+    tipContent: 'Most perpetual calendar watches use a 48-month program wheel with notches of varying lengths. February has the shortest notch (28 days in common years, 29 in leap years), while 30-day and 31-day months have progressively longer notches.',
+    step1: 'Advance day by day past February to see how the mechanism handles month-end transitions.',
+    step2: 'Watch the moon phase indicator progress through its 29.5-day cycle.',
+    step3: 'Compare leap year vs. common year February transitions to understand the 4-year cycle.',
+  },
+  seo: [
+    { type: 'title', text: 'Perpetual Calendar Simulator: Interactive Watch Complication', level: 2 },
+    { type: 'paragraph', html: 'The <strong>perpetual calendar</strong> is one of the most prestigious complications in haute horlogerie. This interactive simulator visualizes how a mechanical perpetual calendar tracks date, day, month, leap year, and moon phase — all without manual correction for decades. Explore the 48-month gear program, see how February transitions work, and understand the gregorian calendar logic built into these masterpieces of micro-mechanics.' },
+    { type: 'title', text: 'How a Perpetual Calendar Works', level: 3 },
+    { type: 'paragraph', html: 'A mechanical perpetual calendar uses a <strong>program wheel</strong> with notches of different depths representing months of different lengths. A sensing lever drops into each notch; a deeper notch signals a short month (28-29 days), triggering the mechanism to advance to the 1st of the next month after the correct number of days. A <strong>48-month gear</strong> handles the 4-year leap year cycle, with an extra notch for February 29th. The program knows that century years (e.g., 2100) skip leap year unless divisible by 400.' },
+    { type: 'title', text: 'Calendar Logic Reference', level: 3 },
+    {
+      type: 'table', headers: ['Month', 'Days', 'Notch Depth', 'Leap Year Action'], rows: [
+        ['January', '31', 'Deep', 'Normal'],
+        ['February', '28 / 29', 'Shallowest', 'Extra day every 4 years'],
+        ['March', '31', 'Deep', 'Normal'],
+        ['April', '30', 'Medium', 'Normal'],
+        ['May', '31', 'Deep', 'Normal'],
+        ['June', '30', 'Medium', 'Normal'],
+        ['July', '31', 'Deep', 'Normal'],
+        ['August', '31', 'Deep', 'Normal'],
+        ['September', '30', 'Medium', 'Normal'],
+        ['October', '31', 'Deep', 'Normal'],
+        ['November', '30', 'Medium', 'Normal'],
+        ['December', '31', 'Deep', 'Normal'],
+      ]
+    },
+    { type: 'title', text: 'Perpetual vs Annual Calendar', level: 3 },
+    {
+      type: 'table', headers: ['Feature', 'Annual Calendar', 'Perpetual Calendar'], rows: [
+        ['Requires adjustment', 'Once per year (Mar 1)', 'Once per century (2100)'],
+        ['Leap year handling', 'Manual', 'Automatic (4-year cam)'],
+        ['Month recognition', '30 vs 31 days', 'Full 28/29/30/31'],
+        ['Complexity', 'Moderate (~50 parts)', 'Very high (~200+ parts)'],
+        ['Price range', '$3,000 - $15,000', '$20,000 - $500,000+'],
+      ]
+    },
+    { type: 'diagnostic', variant: 'info', title: 'Interactive Calendar Simulator', icon: 'mdi:calendar-month', badge: 'HOROLOGY', html: 'This tool simulates the calendar mechanism of a perpetual calendar watch. The animated dial shows the date hand, month window, day subdial, moon phase, and leap year indicator. Use the controls to advance through days, months, or years and observe the mechanical logic in action.' },
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: buildSchemas(title, faq, howTo),
+};