@jjlmoya/utils-chrono 1.2.0

package/src/tool/demagnetizing-timer/i18n/tr.ts

@@ -0,0 +1,143 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { DemagnetizingTimerUI } from '../entry';
+import { bibliography } from '../bibliography';
+
+export const content: ToolLocaleContent<DemagnetizingTimerUI> = {
+  slug: 'demanyetizasyon-sureci',
+  title: 'Saat Demanyetizasyon Zamanlayıcısı',
+  description: 'DIY saat demanyetizasyonu için sesli uyarılı hassas geri sayım zamanlayıcısı. Demanyetizasyon bobininiz için gereken tam basma süresini alın.',
+  ui: {
+    title: 'Zamanlayıcı Ayarları',
+    durationLabel: 'Darbe Süresi',
+    duration1s: '1 Saniye',
+    duration2s: '2 Saniye',
+    duration3s: '3 Saniye',
+    customLabel: 'Özel',
+    startButton: 'Başlat',
+    stopButton: 'Durdur',
+    resetButton: 'Sıfırla',
+    pressPhase: 'Demanyetizatör düğmesine şimdi basın!',
+    holdPhase: 'Düğmeyi basılı tutun...',
+    releasePhase: 'Şimdi bırakın!',
+    completePhase: 'Tamam! Saati uzaklaştırın.',
+    ready: 'Hazır',
+    seconds: 'sn',
+    instructions: 'Nasıl Demanyetize Edilir',
+    step1: 'Saati demanyetizatör platformuna yerleştirin.',
+    step2: 'Başlat\'a basın ve demanyetizatör düğmesini ayarlanan süre boyunca basılı tutun.',
+    step3: 'Düğmeyi bırakın ve saati yavaşça uzaklaştırın.',
+    step4: 'Gerekirse 2–3 kez tekrarlayın, her seferinde saati döndürün.',
+    tipTitle: 'İpucu',
+    tipContent: 'Yeniden mıknatıslanmayı önlemek için saati, güç açıkken demanyetizatörden en az 1 metre uzakta tutun.',
+  },
+  seo: [
+    { type: 'title', text: 'Saat Demanyetizasyon Zamanlayıcısı — DIY için Hassas Darbe Zamanlaması', level: 2 },
+    { type: 'paragraph', html: 'Bir saati demanyetize etmek, hassas düğme basma zamanlaması gerektirir. Çoğu DIY demanyetizatör, azalan bir alternatif manyetik alan oluşturarak çalışır ve ideal darbe <strong>1 ila 3 saniye</strong> arasında sürer. Çok kısa basarsanız alan manyetizasyonu nötralize edemez; çok uzun basarsanız mekanizmayı doyurma riskiniz vardır.' },
+    { type: 'title', text: 'Saat Demanyetizasyonunda Zamanlamanın Önemi', level: 3 },
+    { type: 'paragraph', html: 'Demanyetizatördeki düğmeye bastığınızda, bobinin içinde alternatif bir manyetik alan oluşur. Alan şebeke frekansında (50/60 Hz) salınır ve bıraktığınızda söner. Amaç, saati bu sönen alana <strong>tam yeterli süre</strong> maruz bırakarak yay ve diğer çelik bileşenlerdeki manyetik alanları rastgele hale getirmektir. 1 ila 3 saniyelik bir darbe çoğu mekanizma için ideal noktadır.' },
+    { type: 'title', text: 'Bir Demanyetizatör Nasıl Çalışır', level: 3 },
+    { type: 'paragraph', html: 'Bir demanyetizatör, esasen enerji verildiğinde güçlü bir alternatif manyetik alan üreten bir tel bobindir. Mıknatıslanmış bir saati bu alana yerleştirmek, iç manyetik alanlarının hızla tersine dönmesine neden olur. Alan aniden kaldırıldığında (düğmeyi bırakarak), alanlar rastgele bir desende stabilize olur ve net mıknatıslanmayı etkili bir şekilde iptal eder.' },
+    { type: 'title', text: 'Saatinizin Demanyetizasyona İhtiyacı Olduğunu Gösteren İşaretler', level: 3 },
+    { type: 'paragraph', html: 'Mıknatıslanmış bir saatin yaygın belirtileri şunlardır: günde birkaç dakika ileri gitme, pozisyonlara göre tutarsız zaman işleyişi, duyulabilir şekilde daha hızlı tik sesi ve aşırı durumlarda saatin tamamen durması. Otomatik saatiniz aniden hızlanmaya başlarsa, genellikle mıknatıslanma suçludur ve demanyetizasyon basit bir çözümdür.' },
+  ],
+  faq: [
+    {
+      question: 'Demanyetizatör düğmesine ne kadar süre basmalıyım?',
+      answer: '1 ila 3 saniye önerilen darbe süresidir. 1 saniye ile başlayın ve gerekirse artırın. Çok uzun darbeler bobini aşırı ısıtabilir ve sonuçları iyileştirmez.',
+    },
+    {
+      question: 'Bir saati birden fazla kez demanyetize edebilir miyim?',
+      answer: 'Evet. İşlemi 2 ila 3 kez tekrarlayın ve her seferinde saati 90 derece döndürün. Bu, tüm eksenlerin alternatif alana maruz kalmasını sağlar. Aşırı demanyetizasyon riski yoktur.',
+    },
+    {
+      question: 'Demanyetizasyon kuvars saatlerde işe yarar mı?',
+      answer: 'Kuvars saatler, az sayıda ferromanyetik bileşen içerdiklerinden nadiren mıknatıslanmadan etkilenir. Ancak, bazı kuvars mekanizmalarındaki step motor mıknatıslanarak ibrelerin düzensiz hareket etmesine neden olabilir. Demanyetizasyon kuvars saatler için güvenlidir.',
+    },
+  ],
+  bibliography,
+  howTo: [
+    {
+      name: 'Süreyi Ayarla',
+      text: 'Mıknatıslanmanın şiddetine bağlı olarak 1, 2 veya 3 saniye seçin.',
+    },
+    {
+      name: 'Saati Konumlandır',
+      text: 'Saati demanyetizatör platformuna düz bir şekilde, bobinin üzerine ortalanmış olarak yerleştirin.',
+    },
+    {
+      name: 'Bas ve Tut',
+      text: 'Başlat düğmesine ve demanyetizatör düğmesine aynı anda basın ve ayarlanan süre boyunca basılı tutun.',
+    },
+    {
+      name: 'Bırak ve Uzaklaştır',
+      text: 'Düğmeyi bırakın ve demanyetizatörü kapatmadan önce saati en az 1 metre yavaşça uzaklaştırın.',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      'mainEntity': [
+        {
+          '@type': 'Question',
+          'name': 'Demanyetizatör düğmesine ne kadar süre basmalıyım?',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': '1 ila 3 saniye önerilen darbe süresidir. 1 saniye ile başlayın ve gerekirse artırın. Çok uzun darbeler bobini aşırı ısıtabilir ve sonuçları iyileştirmez.',
+          },
+        },
+        {
+          '@type': 'Question',
+          'name': 'Bir saati birden fazla kez demanyetize edebilir miyim?',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': 'Evet. İşlemi 2 ila 3 kez tekrarlayın ve her seferinde saati 90 derece döndürün. Bu, tüm eksenlerin alternatif alana maruz kalmasını sağlar. Aşırı demanyetizasyon riski yoktur.',
+          },
+        },
+        {
+          '@type': 'Question',
+          'name': 'Demanyetizasyon kuvars saatlerde işe yarar mı?',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': 'Kuvars saatler, az sayıda ferromanyetik bileşen içerdiklerinden nadiren mıknatıslanmadan etkilenir. Ancak, bazı kuvars mekanizmalarındaki step motor mıknatıslanarak ibrelerin düzensiz hareket etmesine neden olabilir. Demanyetizasyon kuvars saatler için güvenlidir.',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      'name': 'Saat Demanyetizasyon Zamanlayıcısı',
+      'operatingSystem': 'All',
+      'applicationCategory': 'UtilitiesApplication',
+      'browserRequirements': 'Requires HTML5. Requires JavaScript.',
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      'name': 'Bir saat nasıl demanyetize edilir',
+      'step': [
+        {
+          '@type': 'HowToStep',
+          'name': 'Süreyi Ayarla',
+          'text': 'Mıknatıslanmanın şiddetine bağlı olarak 1, 2 veya 3 saniye seçin.',
+        },
+        {
+          '@type': 'HowToStep',
+          'name': 'Saati Konumlandır',
+          'text': 'Saati demanyetizatör platformuna düz bir şekilde, bobinin üzerine ortalanmış olarak yerleştirin.',
+        },
+        {
+          '@type': 'HowToStep',
+          'name': 'Bas ve Tut',
+          'text': 'Başlat düğmesine ve demanyetizatör düğmesine aynı anda basın ve ayarlanan süre boyunca basılı tutun.',
+        },
+        {
+          '@type': 'HowToStep',
+          'name': 'Bırak ve Uzaklaştır',
+          'text': 'Düğmeyi bırakın ve demanyetizatörü kapatmadan önce saati en az 1 metre yavaşça uzaklaştırın.',
+        },
+      ],
+    },
+  ],
+};

package/src/tool/demagnetizing-timer/i18n/zh.ts

@@ -0,0 +1,143 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { DemagnetizingTimerUI } from '../entry';
+import { bibliography } from '../bibliography';
+
+export const content: ToolLocaleContent<DemagnetizingTimerUI> = {
+  slug: 'demagnetizing-timer',
+  title: '手表消磁定时器与指南',
+  description: '一款带有声音提示的精确倒计时器，用于DIY手表消磁。为您的消磁线圈获取精确的按压时长。',
+  ui: {
+    title: '定时器设置',
+    durationLabel: '脉冲时长',
+    duration1s: '1秒',
+    duration2s: '2秒',
+    duration3s: '3秒',
+    customLabel: '自定义',
+    startButton: '开始',
+    stopButton: '停止',
+    resetButton: '重置',
+    pressPhase: '请按下消磁器按钮！',
+    holdPhase: '请按住按钮...',
+    releasePhase: '立即松开！',
+    completePhase: '完成！移开手表。',
+    ready: '就绪',
+    seconds: '秒',
+    instructions: '如何消磁',
+    step1: '将手表放在消磁器平台上。',
+    step2: '按下开始键，同时按住消磁器按钮持续设定的时长。',
+    step3: '松开按钮，缓慢移开手表。',
+    step4: '如有需要重复2-3次，每次旋转手表。',
+    tipTitle: '提示',
+    tipContent: '消磁器通电时，请将手表保持至少1米距离，避免再次磁化。',
+  },
+  seo: [
+    { type: 'title', text: '手表消磁定时器 — DIY消磁的精确脉冲计时', level: 2 },
+    { type: 'paragraph', html: '消磁手表需要精确的按键时机。大多数DIY消磁器通过产生衰减的交流磁场来工作，理想的脉冲持续时间为<strong>1到3秒</strong>。时间太短，磁场无法中和磁化；时间太长，则有可能使机芯饱和。' },
+    { type: 'title', text: '为什么消磁时的时机很重要', level: 3 },
+    { type: 'paragraph', html: '按下消磁器按钮时，线圈内部会产生一个交流磁场。磁场以电源频率（50/60赫兹）振荡，松开按钮时逐渐衰减。目标是让手表<strong>恰好足够长时间</strong>暴露于这个衰减磁场中，以使游丝和其他钢制部件中的磁畴随机化。1到3秒的脉冲对大多数机芯来说是最佳选择。' },
+    { type: 'title', text: '消磁器的工作原理', level: 3 },
+    { type: 'paragraph', html: '消磁器本质上是一个导线线圈，通电时会产生强大的交流磁场。将磁化的手表置于该磁场中，其内部的磁畴会快速翻转。当磁场突然消失（松开按钮）时，磁畴会在随机模式下稳定下来，从而有效抵消净磁化。' },
+    { type: 'title', text: '手表需要消磁的迹象', level: 3 },
+    { type: 'paragraph', html: '手表被磁化的常见症状包括：每天走快几分钟、不同位置走时不一致、滴答声明显加速，以及极端情况下手表完全停止。如果您的自动手表突然开始走快，磁化往往是罪魁祸首，而消磁是一个简单的解决方案。' },
+  ],
+  faq: [
+    {
+      question: '我应该按消磁器按钮多长时间？',
+      answer: '建议脉冲时长为1到3秒。从1秒开始，根据需要增加。过长的脉冲可能导致线圈过热，且不会改善效果。',
+    },
+    {
+      question: '可以多次消磁手表吗？',
+      answer: '可以。重复2到3次，每次将手表旋转90度。这样可以确保所有轴都暴露于交流磁场中。没有过度消磁的风险。',
+    },
+    {
+      question: '消磁对石英表有效吗？',
+      answer: '石英表很少受磁化影响，因为它们含有的铁磁性部件较少。然而，某些石英机芯中的步进电机可能会被磁化，导致指针运动异常。消磁对石英表是安全的。',
+    },
+  ],
+  bibliography,
+  howTo: [
+    {
+      name: '设置时长',
+      text: '根据磁化程度选择1、2或3秒。',
+    },
+    {
+      name: '放置手表',
+      text: '将手表平放在消磁器平台上，对准线圈中心。',
+    },
+    {
+      name: '按下并保持',
+      text: '同时按下开始按钮和消磁器按钮，保持设定的时长。',
+    },
+    {
+      name: '松开并移开',
+      text: '松开按钮，在关闭消磁器前将手表缓慢移开至少1米。',
+    },
+  ],
+  schemas: [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      'mainEntity': [
+        {
+          '@type': 'Question',
+          'name': '我应该按消磁器按钮多长时间？',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': '建议脉冲时长为1到3秒。从1秒开始，根据需要增加。过长的脉冲可能导致线圈过热，且不会改善效果。',
+          },
+        },
+        {
+          '@type': 'Question',
+          'name': '可以多次消磁手表吗？',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': '可以。重复2到3次，每次将手表旋转90度。这样可以确保所有轴都暴露于交流磁场中。没有过度消磁的风险。',
+          },
+        },
+        {
+          '@type': 'Question',
+          'name': '消磁对石英表有效吗？',
+          'acceptedAnswer': {
+            '@type': 'Answer',
+            'text': '石英表很少受磁化影响，因为它们含有的铁磁性部件较少。然而，某些石英机芯中的步进电机可能会被磁化，导致指针运动异常。消磁对石英表是安全的。',
+          },
+        },
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'SoftwareApplication',
+      'name': '手表消磁定时器与指南',
+      'operatingSystem': 'All',
+      'applicationCategory': 'UtilitiesApplication',
+      'browserRequirements': 'Requires HTML5. Requires JavaScript.',
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'HowTo',
+      'name': '如何消磁手表',
+      'step': [
+        {
+          '@type': 'HowToStep',
+          'name': '设置时长',
+          'text': '根据磁化程度选择1、2或3秒。',
+        },
+        {
+          '@type': 'HowToStep',
+          'name': '放置手表',
+          'text': '将手表平放在消磁器平台上，对准线圈中心。',
+        },
+        {
+          '@type': 'HowToStep',
+          'name': '按下并保持',
+          'text': '同时按下开始按钮和消磁器按钮，保持设定的时长。',
+        },
+        {
+          '@type': 'HowToStep',
+          'name': '松开并移开',
+          'text': '松开按钮，在关闭消磁器前将手表缓慢移开至少1米。',
+        },
+      ],
+    },
+  ],
+};

package/src/tool/demagnetizing-timer/index.ts

@@ -0,0 +1,11 @@
+import type { ToolDefinition } from '../../types';
+import { demagnetizingTimer } from './entry';
+
+export * from './entry';
+
+export const DEMAGNETIZING_TIMER_TOOL: ToolDefinition = {
+  entry: demagnetizingTimer,
+  Component: () => import('./component.astro'),
+  SEOComponent: () => import('./seo.astro'),
+  BibliographyComponent: () => import('./bibliography.astro'),
+};

package/src/tool/demagnetizing-timer/seo.astro

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

package/src/tool/power-reserve-estimator/bibliography.astro

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

package/src/tool/power-reserve-estimator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'How a Watch Power Reserve Works — Crown & Caliber',
+    url: 'https://www.crownandcaliber.com/posts/how-a-watch-works-101/',
+  },
+  {
+    name: 'What Is a Power Reserve? — Bob\'s Watches',
+    url: 'https://www.bobswatches.com/rolex-blog/resources/watch-winders-worth.html',
+  },
+  {
+    name: 'Automatic Watch Winding Efficiency Explained',
+    url: 'https://www.watchfinder.com/articles/feature-what-does-automatic-mean-in-a-watch-',
+  },
+];

package/src/tool/power-reserve-estimator/client.ts

@@ -0,0 +1,139 @@
+interface MovementData {
+  id: string;
+  name: string;
+  reserve: number;
+  turnsToFull: number;
+}
+
+const movements: MovementData[] = [
+  { id: 'eta-2824', name: 'ETA 2824-2 / SW200', reserve: 38, turnsToFull: 40 },
+  { id: 'eta-2892', name: 'ETA 2892-A2 / SW300', reserve: 42, turnsToFull: 40 },
+  { id: 'valjoux-7750', name: 'Valjoux 7750 / SW500', reserve: 48, turnsToFull: 40 },
+  { id: 'miyota-8215', name: 'Miyota 8215', reserve: 40, turnsToFull: 35 },
+  { id: 'miyota-9015', name: 'Miyota 9015', reserve: 42, turnsToFull: 35 },
+  { id: 'seiko-nh35', name: 'Seiko NH35 / 4R35', reserve: 41, turnsToFull: 40 },
+  { id: 'seiko-6r35', name: 'Seiko 6R35', reserve: 70, turnsToFull: 55 },
+  { id: 'unitas-6498', name: 'Unitas 6497 / 6498', reserve: 46, turnsToFull: 35 },
+  { id: 'rolex-3135', name: 'Rolex 3135', reserve: 48, turnsToFull: 40 },
+  { id: 'rolex-3235', name: 'Rolex 3235', reserve: 70, turnsToFull: 40 },
+];
+
+const activityFactors: Record<string, number> = {
+  low: 0.03,
+  medium: 0.06,
+  high: 0.10,
+};
+
+const movementSelect = document.getElementById('movement-select') as HTMLSelectElement;
+const turnsInput = document.getElementById('turns-input') as HTMLInputElement;
+const hoursInput = document.getElementById('hours-input') as HTMLInputElement;
+const activityChips = document.querySelectorAll('[data-activity]') as NodeListOf<HTMLButtonElement>;
+const customFields = document.getElementById('custom-fields') as HTMLElement;
+const customReserve = document.getElementById('custom-reserve') as HTMLInputElement;
+const customTurns = document.getElementById('custom-turns') as HTMLInputElement;
+const calcBtn = document.getElementById('calc-btn') as HTMLButtonElement;
+const resultCard = document.getElementById('result-card') as HTMLElement;
+const gaugeFill = document.getElementById('gauge-fill') as HTMLElement;
+const chargeValue = document.getElementById('charge-value') as HTMLElement;
+const reserveValue = document.getElementById('reserve-value') as HTMLElement;
+const stopValue = document.getElementById('stop-value') as HTMLElement;
+
+let currentActivity = 'medium';
+
+function getMovement(id: string): MovementData | null {
+  return movements.find((m) => m.id === id) || null;
+}
+
+function calcValue(input: HTMLInputElement, delta: number) {
+  const val = parseInt(input.value, 10) || 0;
+  const min = parseInt(input.min, 10) || 0;
+  const max = parseInt(input.max, 10) || 100;
+  const step = Math.abs(delta);
+  const next = Math.round(val / step) * step + delta;
+  input.value = String(Math.max(min, Math.min(max, next)));
+}
+
+function getMovementParams(): { reserve: number; turnsToFull: number } {
+  if (movementSelect.value === 'custom') {
+    return {
+      reserve: parseFloat(customReserve.value) || 38,
+      turnsToFull: parseFloat(customTurns.value) || 40,
+    };
+  }
+  const m = getMovement(movementSelect.value);
+  return m ? { reserve: m.reserve, turnsToFull: m.turnsToFull } : { reserve: 38, turnsToFull: 40 };
+}
+
+function formatStopTime(hoursFromNow: number): string {
+  const now = new Date();
+  const stop = new Date(now.getTime() + hoursFromNow * 3600000);
+  const sameDay = stop.getDate() === now.getDate()
+    && stop.getMonth() === now.getMonth()
+    && stop.getFullYear() === now.getFullYear();
+  if (sameDay) {
+    return stop.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+  }
+  return stop.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+    + ' ' + stop.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+}
+
+function getGaugeColor(pct: number): string {
+  if (pct <= 15) return 'var(--color-danger, #ef4444)';
+  if (pct <= 40) return 'var(--color-warning, #f59e0b)';
+  return 'var(--color-success, #22c55e)';
+}
+
+function calculate() {
+  const { reserve, turnsToFull } = getMovementParams();
+  const turns = parseInt(turnsInput.value, 10) || 0;
+  const hours = parseFloat(hoursInput.value) || 0;
+  const activity = activityFactors[currentActivity] || 0.06;
+
+  const totalCharge = Math.min(turns / turnsToFull + hours * activity, 1);
+  const hoursRemaining = Math.round(totalCharge * reserve);
+  const percent = Math.round(totalCharge * 100);
+  const color = getGaugeColor(percent);
+
+  gaugeFill.style.width = percent + '%';
+  gaugeFill.style.background = `linear-gradient(90deg, ${color}, color-mix(in srgb, ${color} 70%, #fff 30%))`;
+  chargeValue.textContent = percent + '%';
+  reserveValue.textContent = hoursRemaining + 'h';
+  stopValue.textContent = formatStopTime(hoursRemaining);
+  resultCard.style.display = 'flex';
+}
+
+function toggleCustom() {
+  const show = movementSelect.value === 'custom';
+  customFields.style.display = show ? 'flex' : 'none';
+}
+
+activityChips.forEach((chip) => {
+  chip.addEventListener('click', () => {
+    activityChips.forEach((c) => c.classList.remove('active'));
+    chip.classList.add('active');
+    currentActivity = chip.getAttribute('data-activity') || 'medium';
+  });
+});
+
+document.querySelectorAll('.stepper-btn').forEach((btn) => {
+  btn.addEventListener('click', () => {
+    const target = document.getElementById(btn.getAttribute('data-target') || '') as HTMLInputElement;
+    const dir = parseInt(btn.getAttribute('data-dir') || '1', 10);
+    if (target) {
+      calcValue(target, dir);
+    }
+  });
+});
+
+movementSelect.addEventListener('change', toggleCustom);
+calcBtn.addEventListener('click', calculate);
+
+[turnsInput, hoursInput, customReserve, customTurns].forEach((el) => {
+  el.addEventListener('keydown', (e) => {
+    if ((e as KeyboardEvent).key === 'Enter') calculate();
+  });
+  el.addEventListener('input', calculate);
+});
+
+toggleCustom();
+calculate();

package/src/tool/power-reserve-estimator/component.astro

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

package/src/tool/power-reserve-estimator/components/EstimatorPanel.astro

@@ -0,0 +1,150 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="estimator-panel">
+  <div class="panel-section">
+    <div class="section-label">{labels.movementLabel || "Movement"}</div>
+    <select class="movement-select" id="movement-select">
+      <option value="eta-2824">ETA 2824-2 / SW200 — 38h</option>
+      <option value="eta-2892">ETA 2892-A2 / SW300 — 42h</option>
+      <option value="valjoux-7750">Valjoux 7750 / SW500 — 48h</option>
+      <option value="miyota-8215">Miyota 8215 — 40h</option>
+      <option value="miyota-9015">Miyota 9015 — 42h</option>
+      <option value="seiko-nh35">Seiko NH35 / 4R35 — 41h</option>
+      <option value="seiko-6r35">Seiko 6R35 — 70h</option>
+      <option value="unitas-6498">Unitas 6497 / 6498 — 46h</option>
+      <option value="rolex-3135">Rolex 3135 — 48h</option>
+      <option value="rolex-3235">Rolex 3235 — 70h</option>
+      <option value="custom">{labels.customMovement || "Custom"}</option>
+    </select>
+  </div>
+
+  <div class="panel-section" id="custom-fields" style="display: none;">
+    <div class="section-label">{labels.customMovement || "Custom"}</div>
+    <div class="input-row">
+      <div class="input-group">
+        <label class="input-label" for="custom-reserve">{labels.powerReserveHours || "Reserve (h)"}</label>
+        <div class="stepper-wrap">
+          <button type="button" class="stepper-btn" data-target="custom-reserve" data-dir="-1">−</button>
+          <input type="number" class="stepper-input" id="custom-reserve" min="1" max="336" value="38" />
+          <button type="button" class="stepper-btn" data-target="custom-reserve" data-dir="1">+</button>
+        </div>
+      </div>
+      <div class="input-group">
+        <label class="input-label" for="custom-turns">{labels.fullWindTurns || "Turns to full"}</label>
+        <div class="stepper-wrap">
+          <button type="button" class="stepper-btn" data-target="custom-turns" data-dir="-1">−</button>
+          <input type="number" class="stepper-input" id="custom-turns" min="1" max="100" value="40" />
+          <button type="button" class="stepper-btn" data-target="custom-turns" data-dir="1">+</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="panel-section">
+    <div class="section-label">{labels.turnsLabel || "Crown Turns"} <span class="label-sub">+</span></div>
+    <div class="input-row">
+      <div class="input-group">
+        <label class="input-label" for="turns-input">{labels.turnsInput || "Turns"}</label>
+        <div class="stepper-wrap">
+          <button type="button" class="stepper-btn" data-target="turns-input" data-dir="-5">−5</button>
+          <input type="number" class="stepper-input" id="turns-input" min="0" max="100" value="0" />
+          <button type="button" class="stepper-btn" data-target="turns-input" data-dir="5">+5</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="panel-section">
+    <div class="section-label">{labels.hoursLabel || "Wear Time"} <span class="label-sub">+</span></div>
+    <div class="input-row">
+      <div class="input-group">
+        <label class="input-label" for="hours-input">{labels.hoursInput || "Hours"}</label>
+        <div class="stepper-wrap">
+          <button type="button" class="stepper-btn" data-target="hours-input" data-dir="-1">−</button>
+          <input type="number" class="stepper-input" id="hours-input" min="0" max="24" value="0" />
+          <button type="button" class="stepper-btn" data-target="hours-input" data-dir="1">+</button>
+        </div>
+      </div>
+      <div class="input-group">
+        <label class="input-label" for="activity-select">{labels.activityLabel || "Activity"}</label>
+        <div class="chip-group">
+          <button type="button" class="chip active" data-activity="low">{labels.activityLow || "Low"}</button>
+          <button type="button" class="chip" data-activity="medium">{labels.activityMedium || "Medium"}</button>
+          <button type="button" class="chip" data-activity="high">{labels.activityHigh || "High"}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <button type="button" class="calc-btn" id="calc-btn">
+    <svg viewBox="0 0 24 24" width="16" height="16">
+      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor" />
+    </svg>
+    {labels.calculate || "Calculate"}
+  </button>
+
+  <div class="result-card" id="result-card" style="display: none">
+    <div class="result-header">
+      <svg viewBox="0 0 24 24" width="18" height="18">
+        <path d="M13 2.05v2.02c3.95.49 7 3.85 7 7.93 0 4.42-3.58 8-8 8s-8-3.58-8-8c0-4.08 3.05-7.44 7-7.93V2.05C5.05 2.58 2 6.13 2 11c0 5.52 4.48 10 10 10s10-4.48 10-10c0-4.87-3.05-8.42-7-8.95zM12 6v5l4.28 2.54.72-1.21-3.5-2.08V6H12z" fill="currentColor" />
+      </svg>
+      <span>{labels.resultLabel || "Estimated Reserve"}</span>
+    </div>
+
+    <div class="gauge-wrap">
+      <div class="gauge-track">
+        <div class="gauge-fill" id="gauge-fill"></div>
+      </div>
+      <div class="gauge-marks">
+        <span class="gauge-mark gauge-danger">0</span>
+        <span class="gauge-mark gauge-warning">25</span>
+        <span class="gauge-mark gauge-ok">50</span>
+        <span class="gauge-mark gauge-warning">75</span>
+        <span class="gauge-mark gauge-ok">100%</span>
+      </div>
+    </div>
+
+    <div class="charge-stats">
+      <div class="charge-stat">
+        <span class="stat-value" id="charge-value">--</span>
+        <span class="stat-label">{labels.chargePercent || "Charge"}</span>
+      </div>
+      <div class="charge-stat">
+        <span class="stat-value" id="reserve-value">--</span>
+        <span class="stat-label">{labels.hoursRemaining || "Remaining"}</span>
+      </div>
+      <div class="charge-stat">
+        <span class="stat-value" id="stop-value">--</span>
+        <span class="stat-label">{labels.stopTimeLabel || "Runs until"}</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="steps-section">
+    <div class="step-row">
+      <div class="step-marker">1</div>
+      <span class="step-text">{labels.step1 || "Select your movement from the dropdown."}</span>
+    </div>
+    <div class="step-row">
+      <div class="step-marker">2</div>
+      <span class="step-text">{labels.step2 || "Enter crown turns and hours worn."}</span>
+    </div>
+    <div class="step-row">
+      <div class="step-marker">3</div>
+      <span class="step-text">{labels.step3 || "Press Calculate to see your reserve."}</span>
+    </div>
+  </div>
+
+  <div class="tip-row">
+    <svg class="tip-icon" viewBox="0 0 24 24" width="16" height="16">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor" />
+    </svg>
+    <span class="tip-text">{labels.tipContent || "Manual-wind movements only charge when you turn the crown. Automatic movements also charge while worn."}</span>
+  </div>
+</div>