@jjlmoya/utils-chrono 1.9.0 → 1.10.0

package/package.json

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

package/src/category/index.ts

@@ -14,6 +14,7 @@ import { tachymeterCalculator } from '../tool/tachymeter-calculator/entry';
 import { serviceIntervalTracker } from '../tool/service-interval-tracker/entry';
 import { strapLengthCalculator } from '../tool/strap-length-calculator/entry';
 import { telemeterCalculator } from '../tool/telemeter-calculator/entry';
+import { siderealTimeTracker } from '../tool/sidereal-time-tracker/entry';
 
 export const chronoCategory: ChronoCategoryEntry = {
   icon: 'mdi:clock-outline',
@@ -33,6 +34,7 @@ export const chronoCategory: ChronoCategoryEntry = {
     serviceIntervalTracker,
     strapLengthCalculator,
     telemeterCalculator,
+    siderealTimeTracker,
   ],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),

package/src/entries.ts

@@ -30,6 +30,8 @@ export { strapLengthCalculator } from './tool/strap-length-calculator/entry';
 export type { StrapLengthCalculatorUI, StrapLengthCalculatorLocaleContent } from './tool/strap-length-calculator/entry';
 export { telemeterCalculator } from './tool/telemeter-calculator/entry';
 export type { TelemeterCalculatorUI, TelemeterCalculatorLocaleContent } from './tool/telemeter-calculator/entry';
+export { siderealTimeTracker } from './tool/sidereal-time-tracker/entry';
+export type { SiderealTimeTrackerUI, SiderealTimeTrackerLocaleContent } from './tool/sidereal-time-tracker/entry';
 export { chronoCategory } from './category';
 
 import { watchAccuracyTracker } from './tool/watch-accuracy-tracker/entry';
@@ -48,6 +50,7 @@ import { tachymeterCalculator } from './tool/tachymeter-calculator/entry';
 import { serviceIntervalTracker } from './tool/service-interval-tracker/entry';
 import { strapLengthCalculator } from './tool/strap-length-calculator/entry';
 import { telemeterCalculator } from './tool/telemeter-calculator/entry';
+import { siderealTimeTracker } from './tool/sidereal-time-tracker/entry';
 
-export const ALL_ENTRIES = [watchAccuracyTracker, wristPresenceCalculator, demagnetizingTimer, watchSavingsPlanner, crownReferenceGuide, powerReserveEstimator, beatRateConverter, waterResistanceConverter, strapTaperCalculator, watchSizeComparator, lumeColorSimulator, moonPhaseVisualizer, tachymeterCalculator, serviceIntervalTracker, strapLengthCalculator, telemeterCalculator];
+export const ALL_ENTRIES = [watchAccuracyTracker, wristPresenceCalculator, demagnetizingTimer, watchSavingsPlanner, crownReferenceGuide, powerReserveEstimator, beatRateConverter, waterResistanceConverter, strapTaperCalculator, watchSizeComparator, lumeColorSimulator, moonPhaseVisualizer, tachymeterCalculator, serviceIntervalTracker, strapLengthCalculator, telemeterCalculator, siderealTimeTracker];
 

package/src/tests/locale_completeness.test.ts

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

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(16);
+      expect(ALL_TOOLS.length).toBe(17);
     });
 
 

package/src/tool/sidereal-time-tracker/bibliography.astro

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

package/src/tool/sidereal-time-tracker/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Sidereal Time - Wikipedia',
+    url: 'https://en.wikipedia.org/wiki/Sidereal_time',
+  },
+  {
+    name: 'Greenwich Mean Sidereal Time - US Naval Observatory',
+    url: 'https://aa.usno.navy.mil/data/siderealtime',
+  },
+  {
+    name: 'Patek Philippe Celestial - Astronomical Watches complication',
+    url: 'https://www.patek.com/en/service/taking-care-of-your-watch/settings/celestial',
+  },
+];

package/src/tool/sidereal-time-tracker/client.ts

@@ -0,0 +1,278 @@
+import { getJulianDate, getLST, formatHours } from './helpers';
+
+let simulatedTime = Date.now();
+let lastFrameTime = Date.now();
+let speedMultiplier = 1;
+let longitude = 0;
+let longitudeFormat: 'decimal' | 'dms' = 'decimal';
+let hemisphere: 'N' | 'S' = 'N';
+let audioEnabled = false;
+let audioCtx: AudioContext | null = null;
+let lastTickSecond = -1;
+
+try {
+  const storedLon = localStorage.getItem('sid-longitude');
+  if (storedLon) longitude = parseFloat(storedLon);
+  const storedFormat = localStorage.getItem('sid-longitude-format');
+  if (storedFormat === 'decimal' || storedFormat === 'dms') {
+    longitudeFormat = storedFormat;
+  }
+  const storedHem = localStorage.getItem('sid-hemisphere');
+  if (storedHem === 'N' || storedHem === 'S') {
+    hemisphere = storedHem;
+  }
+} catch {
+}
+
+function saveSettings(): void {
+  try {
+    localStorage.setItem('sid-longitude', longitude.toString());
+    localStorage.setItem('sid-longitude-format', longitudeFormat);
+    localStorage.setItem('sid-hemisphere', hemisphere);
+  } catch {
+  }
+}
+
+function formatDMS(deg: number): string {
+  const direction = deg >= 0 ? 'E' : 'W';
+  const absDeg = Math.abs(deg);
+  const degrees = Math.floor(absDeg);
+  const minutes = Math.round((absDeg - degrees) * 60);
+  return `${degrees}° ${minutes.toString().padStart(2, '0')}' ${direction}`;
+}
+
+function updateLongitudeLabel(): void {
+  const label = document.getElementById('sid-label-longitude-val');
+  if (!label) return;
+  if (longitudeFormat === 'decimal') {
+    label.textContent = `${longitude.toFixed(1)}°`;
+  } else {
+    label.textContent = formatDMS(longitude);
+  }
+}
+
+function updateHemisphere(): void {
+  const northGroup = document.getElementById('sid-constellations-north');
+  const southGroup = document.getElementById('sid-constellations-south');
+  if (northGroup && southGroup) {
+    if (hemisphere === 'N') {
+      northGroup.style.display = 'block';
+      southGroup.style.display = 'none';
+    } else {
+      northGroup.style.display = 'none';
+      southGroup.style.display = 'block';
+    }
+  }
+}
+
+function initAudio(): void {
+  if (!audioCtx) {
+    const AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+    audioCtx = new AudioContextClass();
+  }
+  if (audioCtx.state === 'suspended') {
+    audioCtx.resume();
+  }
+}
+
+function playTick(freq: number): void {
+  if (!audioCtx || !audioEnabled) return;
+  const osc = audioCtx.createOscillator();
+  const gain = audioCtx.createGain();
+  osc.type = 'sine';
+  osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
+  gain.gain.setValueAtTime(0.015, audioCtx.currentTime);
+  gain.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime + 0.08);
+  osc.connect(gain);
+  gain.connect(audioCtx.destination);
+  osc.start();
+  osc.stop(audioCtx.currentTime + 0.08);
+}
+
+function updateHands(date: Date, lst: number): void {
+  const sec = date.getUTCSeconds() + date.getUTCMilliseconds() / 1000;
+  const min = date.getUTCMinutes() + sec / 60;
+  const hour = date.getUTCHours() + min / 60;
+
+  const elSec = document.getElementById('sid-hand-sec');
+  const elMin = document.getElementById('sid-hand-solar-min');
+  const elHour = document.getElementById('sid-hand-solar-hour');
+  const elSidHour = document.getElementById('sid-hand-sid-hour');
+  const elSphere = document.getElementById('sid-celestial-sphere');
+
+  if (elSec) elSec.style.transform = `rotate(${sec * 6}deg)`;
+  if (elMin) elMin.style.transform = `rotate(${min * 6}deg)`;
+  if (elHour) elHour.style.transform = `rotate(${(hour % 12) * 30}deg)`;
+  if (elSidHour) elSidHour.style.transform = `rotate(${lst * 15}deg)`;
+  if (elSphere) elSphere.style.transform = `rotate(${-lst * 15}deg)`;
+}
+
+function handleTickSound(date: Date): void {
+  const solarSec = date.getUTCSeconds();
+  if (solarSec !== lastTickSecond) {
+    lastTickSecond = solarSec;
+    const isHourCross = date.getUTCMinutes() === 0 && solarSec === 0;
+    playTick(isHourCross ? 1400 : 900);
+  }
+}
+
+function setText(id: string, text: string): void {
+  const el = document.getElementById(id);
+  if (el) {
+    el.textContent = text;
+  }
+}
+
+function updateDisplay(): void {
+  const date = new Date(simulatedTime);
+  const lst = getLST(date, longitude);
+  const jd = getJulianDate(date);
+
+  handleTickSound(date);
+  updateHands(date, lst);
+
+  const utcHours = date.getUTCHours() + date.getUTCMinutes() / 60 + date.getUTCSeconds() / 3600;
+  let diff = Math.abs(utcHours - lst);
+  if (diff > 12) {
+    diff = 24 - diff;
+  }
+
+  setText('sid-val-solar', formatHours(utcHours));
+  setText('sid-val-sidereal', formatHours(lst));
+  setText('sid-val-drift', `${Math.floor(diff * 60)}m ${Math.floor((diff * 3600) % 60)}s`);
+  setText('sid-val-julian', jd.toFixed(5));
+}
+
+function tick(): void {
+  const now = Date.now();
+  const delta = now - lastFrameTime;
+  lastFrameTime = now;
+  simulatedTime += delta * speedMultiplier;
+
+  updateDisplay();
+  requestAnimationFrame(tick);
+}
+
+function setupSpeedButtons(): void {
+  const btns = ['sid-btn-speed-1', 'sid-btn-speed-100', 'sid-btn-speed-10000'];
+  btns.forEach((id) => {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.addEventListener('click', () => {
+      btns.forEach((b) => document.getElementById(b)?.classList.remove('active'));
+      el.classList.add('active');
+      speedMultiplier = parseFloat(el.getAttribute('data-speed') || '1');
+      initAudio();
+    });
+  });
+}
+
+function setupFormatButtons(): void {
+  const decimalBtn = document.getElementById('sid-btn-format-decimal');
+  const dmsBtn = document.getElementById('sid-btn-format-dms');
+  if (decimalBtn && dmsBtn) {
+    decimalBtn.addEventListener('click', () => {
+      decimalBtn.classList.add('active');
+      dmsBtn.classList.remove('active');
+      longitudeFormat = 'decimal';
+      updateLongitudeLabel();
+      saveSettings();
+    });
+    dmsBtn.addEventListener('click', () => {
+      dmsBtn.classList.add('active');
+      decimalBtn.classList.remove('active');
+      longitudeFormat = 'dms';
+      updateLongitudeLabel();
+      saveSettings();
+    });
+  }
+}
+
+function setupHemisphereButtons(): void {
+  const northBtn = document.getElementById('sid-btn-hem-north');
+  const southBtn = document.getElementById('sid-btn-hem-south');
+  if (northBtn && southBtn) {
+    northBtn.addEventListener('click', () => {
+      northBtn.classList.add('active');
+      southBtn.classList.remove('active');
+      hemisphere = 'N';
+      updateHemisphere();
+      saveSettings();
+    });
+    southBtn.addEventListener('click', () => {
+      southBtn.classList.add('active');
+      northBtn.classList.remove('active');
+      hemisphere = 'S';
+      updateHemisphere();
+      saveSettings();
+    });
+  }
+}
+
+function setupLocationButton(slider: HTMLInputElement): void {
+  const locateBtn = document.getElementById('sid-btn-locate');
+  if (!locateBtn) return;
+  locateBtn.addEventListener('click', () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition((pos) => {
+        const lon = pos.coords.longitude;
+        slider.value = lon.toFixed(1);
+        longitude = lon;
+        updateLongitudeLabel();
+        saveSettings();
+      }, () => {});
+    }
+  });
+}
+
+function setupAudioButton(): void {
+  const audioBtn = document.getElementById('sid-btn-audio');
+  if (!audioBtn) return;
+  audioBtn.addEventListener('click', () => {
+    initAudio();
+    audioEnabled = !audioEnabled;
+    audioBtn.textContent = audioEnabled ? 'ON' : 'OFF';
+    audioBtn.classList.toggle('active', audioEnabled);
+  });
+}
+
+function setupEventListeners(): void {
+  const slider = document.getElementById('sid-input-longitude') as HTMLInputElement;
+  if (slider) {
+    slider.value = longitude.toString();
+    slider.addEventListener('input', () => {
+      longitude = parseFloat(slider.value);
+      updateLongitudeLabel();
+      saveSettings();
+    });
+    setupLocationButton(slider);
+  }
+  setupAudioButton();
+  setupSpeedButtons();
+  setupFormatButtons();
+  setupHemisphereButtons();
+}
+
+let initiated = false;
+function init(): void {
+  if (initiated) return;
+  initiated = true;
+  lastFrameTime = Date.now();
+  simulatedTime = Date.now();
+  setupEventListeners();
+
+  updateLongitudeLabel();
+  updateHemisphere();
+
+  document.getElementById('sid-btn-format-decimal')?.classList.toggle('active', longitudeFormat === 'decimal');
+  document.getElementById('sid-btn-format-dms')?.classList.toggle('active', longitudeFormat === 'dms');
+  document.getElementById('sid-btn-hem-north')?.classList.toggle('active', hemisphere === 'N');
+  document.getElementById('sid-btn-hem-south')?.classList.toggle('active', hemisphere === 'S');
+
+  requestAnimationFrame(tick);
+}
+
+document.addEventListener('DOMContentLoaded', init);
+if (document.readyState !== 'loading') {
+  init();
+}

package/src/tool/sidereal-time-tracker/component.astro

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

package/src/tool/sidereal-time-tracker/components/SiderealPanel.astro

@@ -0,0 +1,197 @@
+---
+import '../sidereal-time-tracker.css';
+
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="sid-card">
+  <div class="sid-grid">
+    <div class="sid-dial-container">
+      <svg class="sid-svg-clock" viewBox="0 0 400 400" id="sid-watch-dial">
+        <circle cx="200" cy="200" r="195" fill="var(--sid-dial-outer-bg)" stroke="var(--sid-gold)" stroke-width="4"></circle>
+        <circle cx="200" cy="200" r="180" fill="none" stroke="var(--sid-gold-glow)" stroke-width="1"></circle>
+
+        <line x1="200" y1="8" x2="200" y2="28" stroke="var(--sid-gold)" stroke-width="1" stroke-dasharray="2 2" opacity="0.6"></line>
+        <polygon points="200,28 197,22 203,22" fill="var(--sid-gold)" opacity="0.8"></polygon>
+        <text x="200" y="16" fill="var(--sid-gold)" font-size="5" font-family="Outfit" font-weight="700" letter-spacing="0.5" text-anchor="middle" opacity="0.8">MERIDIAN</text>
+
+        <g class="sid-sky-sphere" id="sid-celestial-sphere">
+          <circle cx="200" cy="200" r="160" fill="var(--sid-dial-inner-bg)"></circle>
+          
+          <g id="sid-constellations-north">
+            <line class="sid-constellation" x1="160" y1="120" x2="180" y2="100"></line>
+            <line class="sid-constellation" x1="180" y1="100" x2="205" y2="90"></line>
+            <line class="sid-constellation" x1="205" y1="90" x2="225" y2="105"></line>
+            <line class="sid-constellation" x1="225" y1="105" x2="215" y2="135"></line>
+            <line class="sid-constellation" x1="215" y1="135" x2="190" y2="140"></line>
+            <line class="sid-constellation" x1="190" y1="140" x2="160" y2="120"></line>
+
+            <line class="sid-constellation" x1="90" y1="210" x2="120" y2="190"></line>
+            <line class="sid-constellation" x1="120" y1="190" x2="130" y2="160"></line>
+            <line class="sid-constellation" x1="130" y1="160" x2="110" y2="140"></line>
+
+            <line class="sid-constellation" x1="270" y1="230" x2="290" y2="260"></line>
+            <line class="sid-constellation" x1="290" y1="260" x2="320" y2="250"></line>
+            <line class="sid-constellation" x1="320" y1="250" x2="310" y2="220"></line>
+            <line class="sid-constellation" x1="310" y1="220" x2="270" y2="230"></line>
+
+            <circle class="sid-star-blink" cx="160" cy="120" r="3" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="180" cy="100" r="2.5" fill="var(--sid-gold)"></circle>
+            <circle class="sid-star-blink" cx="205" cy="90" r="4" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="225" cy="105" r="2" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="215" cy="135" r="3" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="190" cy="140" r="2" fill="var(--sid-star)"></circle>
+            
+            <circle class="sid-star-blink" cx="90" cy="210" r="3.5" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="120" cy="190" r="2.5" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="130" cy="160" r="3.5" fill="var(--sid-gold)"></circle>
+            <circle class="sid-star-blink" cx="110" cy="140" r="2" fill="var(--sid-star)"></circle>
+
+            <circle class="sid-star-blink" cx="270" cy="230" r="3" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="290" cy="260" r="2" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="320" cy="250" r="3.5" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="310" cy="220" r="4" fill="var(--sid-gold)"></circle>
+
+            <text x="205" y="80" fill="var(--sid-sky-text)" font-size="7" text-anchor="middle">URSA MAJOR</text>
+            <text x="110" y="225" fill="var(--sid-sky-text)" font-size="7" text-anchor="middle">CASSIOPEIA</text>
+            <text x="305" y="210" fill="var(--sid-sky-text)" font-size="7" text-anchor="middle">CYGNUS</text>
+          </g>
+
+          <g id="sid-constellations-south" style="display: none;">
+            <line class="sid-constellation" x1="200" y1="90" x2="200" y2="150"></line>
+            <line class="sid-constellation" x1="170" y1="120" x2="230" y2="125"></line>
+            <circle class="sid-star-blink" cx="200" cy="90" r="3.5" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="200" cy="150" r="4" fill="var(--sid-gold)"></circle>
+            <circle class="sid-star-blink" cx="170" cy="120" r="3.5" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="230" cy="125" r="3" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="215" cy="138" r="2" fill="var(--sid-star)"></circle>
+
+            <line class="sid-constellation" x1="270" y1="120" x2="310" y2="140"></line>
+            <circle class="sid-star-blink" cx="270" cy="120" r="4.5" fill="var(--sid-gold)"></circle>
+            <circle class="sid-star-blink" cx="310" cy="140" r="4" fill="var(--sid-star)"></circle>
+
+            <line class="sid-constellation" x1="100" y1="110" x2="120" y2="80"></line>
+            <line class="sid-constellation" x1="120" y1="80" x2="140" y2="100"></line>
+            <circle class="sid-star-blink" cx="100" cy="110" r="5" fill="var(--sid-gold)"></circle>
+            <circle class="sid-star-blink" cx="120" cy="80" r="3" fill="var(--sid-star)"></circle>
+            <circle class="sid-star-blink" cx="140" cy="100" r="2.5" fill="var(--sid-star)"></circle>
+
+            <text x="200" y="75" fill="var(--sid-sky-text)" font-size="7" text-anchor="middle">CRUX</text>
+            <text x="290" y="110" fill="var(--sid-sky-text)" font-size="7" text-anchor="middle">CENTAURUS</text>
+            <text x="100" y="125" fill="var(--sid-sky-text)" font-size="7" text-anchor="middle">CARINA</text>
+          </g>
+        </g>
+
+        <g fill="var(--sid-gold)" font-size="10" font-family="Outfit" font-weight="600" text-anchor="middle">
+          <text x="200" y="42">XXIV</text>
+          <text x="280" y="62">II</text>
+          <text x="338" y="120">IV</text>
+          <text x="358" y="204">VI</text>
+          <text x="338" y="288">VIII</text>
+          <text x="280" y="346">X</text>
+          <text x="200" y="366">XII</text>
+          <text x="120" y="346">XIV</text>
+          <text x="62" y="288">XVI</text>
+          <text x="42" y="204">XVIII</text>
+          <text x="62" y="120">XX</text>
+          <text x="120" y="62">XXII</text>
+        </g>
+
+        <g fill="var(--sid-indigo)" font-size="11" font-family="Outfit" text-anchor="middle" opacity="0.6">
+          <text x="200" y="70">12</text>
+          <text x="330" y="204">3</text>
+          <text x="200" y="334">6</text>
+          <text x="70" y="204">9</text>
+        </g>
+
+        <line class="sid-hand-solar" id="sid-hand-solar-hour" x1="200" y1="200" x2="200" y2="110" stroke-width="5" stroke-linecap="round"></line>
+        <line class="sid-hand-solar" id="sid-hand-solar-min" x1="200" y1="200" x2="200" y2="80" stroke-width="3" stroke-linecap="round"></line>
+
+        <g class="sid-hand-sidereal" id="sid-hand-sid-hour">
+          <line x1="200" y1="200" x2="200" y2="60" stroke="var(--sid-gold)" stroke-width="2.5" stroke-linecap="round"></line>
+          <polygon points="200,48 195,60 205,60" fill="var(--sid-gold)"></polygon>
+        </g>
+
+        <line x1="200" y1="200" x2="200" y2="52" stroke="var(--sid-second-hand)" stroke-width="1.5" id="sid-hand-sec" style="transform-origin: 200px 200px; transition: transform 0.1s linear;"></line>
+        <circle cx="200" cy="200" r="6" fill="var(--sid-gold)"></circle>
+        <circle cx="200" cy="200" r="2" fill="var(--sid-black)"></circle>
+      </svg>
+    </div>
+
+    <div class="sid-controls-column">
+      <div class="sid-card-panel">
+        <div class="sid-readout-row">
+          <span class="sid-readout-label">{labels.solarTimeLabel}</span>
+          <span class="sid-readout-value" id="sid-val-solar">00:00:00</span>
+        </div>
+        <div class="sid-readout-row">
+          <span class="sid-readout-label">{labels.siderealTimeLabel}</span>
+          <span class="sid-readout-value sid-gold-text" id="sid-val-sidereal">00:00:00</span>
+        </div>
+        <div class="sid-readout-row">
+          <span class="sid-readout-label">{labels.differenceLabel}</span>
+          <span class="sid-readout-value" id="sid-val-drift">0m 00s</span>
+        </div>
+        <div class="sid-readout-row">
+          <span class="sid-readout-label">Julian Date</span>
+          <span class="sid-readout-value" id="sid-val-julian" style="font-size: 1rem;">0.0</span>
+        </div>
+      </div>
+
+      <div class="sid-card-panel">
+        <div class="sid-control-group">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
+            <label class="sid-label" for="sid-input-longitude" style="margin-bottom: 0;">
+              {labels.longitudeLabel}: <span id="sid-label-longitude-val">0.0°</span>
+            </label>
+            <button type="button" class="sid-btn-location" id="sid-btn-locate" title={labels.useLocationBtn}>
+              <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h-2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>
+            </button>
+          </div>
+          <input type="range" class="sid-slider" id="sid-input-longitude" min="-180" max="180" step="0.1" value="0.0" />
+        </div>
+
+        <div class="sid-control-group">
+          <label class="sid-label">{labels.longitudeFormatLabel}</label>
+          <div class="sid-speed-btn-row">
+            <button type="button" class="sid-btn-toggle active" id="sid-btn-format-decimal" data-format="decimal">{labels.longitudeFormatDecimal}</button>
+            <button type="button" class="sid-btn-toggle" id="sid-btn-format-dms" data-format="dms">{labels.longitudeFormatDMS}</button>
+          </div>
+        </div>
+
+        <div class="sid-control-group">
+          <label class="sid-label">{labels.hemisphereLabel}</label>
+          <div class="sid-speed-btn-row">
+            <button type="button" class="sid-btn-toggle active" id="sid-btn-hem-north" data-hem="N">{labels.hemisphereNorth}</button>
+            <button type="button" class="sid-btn-toggle" id="sid-btn-hem-south" data-hem="S">{labels.hemisphereSouth}</button>
+          </div>
+        </div>
+
+        <div class="sid-control-group">
+          <label class="sid-label">{labels.speedLabel}</label>
+          <div class="sid-speed-btn-row">
+            <button type="button" class="sid-btn-toggle active" id="sid-btn-speed-1" data-speed="1">{labels.speedNormal}</button>
+            <button type="button" class="sid-btn-toggle" id="sid-btn-speed-100" data-speed="200">{labels.speedFast}</button>
+            <button type="button" class="sid-btn-toggle" id="sid-btn-speed-10000" data-speed="5000">{labels.speedVeryFast}</button>
+          </div>
+        </div>
+
+        <div class="sid-control-group" style="margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center;">
+          <span class="sid-label" style="margin-bottom: 0;">{labels.audioToggleLabel}</span>
+          <button type="button" class="sid-btn-toggle" id="sid-btn-audio">OFF</button>
+        </div>
+      </div>
+
+      <div class="sid-tip-box">
+        <div class="sid-tip-title">{labels.tipTitle}</div>
+        <div>{labels.step1}</div>
+        <div style="margin-top: 0.25rem;">{labels.step2}</div>
+        <div style="margin-top: 0.25rem;">{labels.step3}</div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/tool/sidereal-time-tracker/entry.ts

@@ -0,0 +1,51 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type SiderealTimeTrackerUI = {
+  title: string;
+  longitudeLabel: string;
+  solarTimeLabel: string;
+  siderealTimeLabel: string;
+  differenceLabel: string;
+  utcLabel: string;
+  speedLabel: string;
+  speedNormal: string;
+  speedFast: string;
+  speedVeryFast: string;
+  audioToggleLabel: string;
+  step1: string;
+  step2: string;
+  step3: string;
+  tipTitle: string;
+  tipContent: string;
+  useLocationBtn: string;
+  hemisphereLabel: string;
+  hemisphereNorth: string;
+  hemisphereSouth: string;
+  longitudeFormatLabel: string;
+  longitudeFormatDecimal: string;
+  longitudeFormatDMS: string;
+};
+
+export type SiderealTimeTrackerLocaleContent = ToolLocaleContent<SiderealTimeTrackerUI>;
+
+export const siderealTimeTracker: ChronoToolEntry<SiderealTimeTrackerUI> = {
+  id: 'sidereal-time-tracker',
+  icons: { bg: 'mdi:orbit', fg: 'mdi:creation-outline' },
+  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),
+  },
+};