@jjlmoya/utils-chrono 1.11.0 → 1.17.0

package/src/tool/perpetual-calendar/i18n/tr.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: 'Saatte ebedi takvim nedir?',
+    answer: 'Ebedi takvim, farklı uzunluktaki ayları ve artık yılları otomatik olarak hesaba katarak doğru tarih, gün, ay ve ay evresini gösteren mekanik bir saat komplikasyonudur. 2100 yılına (400\'e bölünemeyen bir sonraki yüzyıl yılı) kadar doğru olacak şekilde programlanmıştır.',
+  },
+  {
+    question: 'Ebedi takvim artık yılları nasıl bilir?',
+    answer: 'Mekanik program, 29 Şubat\'ı hesaba katan özel tasarlanmış bir kam ile 48 aylık (4 yıl) bir dişli kullanır. Mekanizma, 100\'e bölünebilen yılların, 400\'e de bölünmedikçe artık yıl olmadığını bilir. Çoğu ebedi takvim, bir günlük düzeltme gerektirecek olan 2100 yılına kadar doğrudur.',
+  },
+  {
+    question: 'Ebedi takvim ile yıllık takvim arasındaki fark nedir?',
+    answer: 'Yıllık takvim yılda bir kez manuel düzeltme gerektirir (Şubat sonunda), oysa ebedi takvim artık yılları otomatik olarak işler ve onlarca yıl boyunca doğru şekilde devam eder. Ebedi takvimler mekanik olarak önemli ölçüde daha karmaşıktır.',
+  },
+];
+
+const howTo = [
+  {
+    name: 'Tarihi ilerletin',
+    text: 'Takvimi ilerletmek için G (gün), A (ay) ve Y (yıl) düğmelerini kullanın. Tarih kolunun hareketini ve ay penceresinin değişimini izleyin.',
+  },
+  {
+    name: 'Artık yıl geçişlerini gözlemleyin',
+    text: '29\'dan 1 Mart\'a atlamayı görmek için bir artık yılın (ör. 2024) Şubat ayını geçin. 28\'den 1 Mart\'a atlamayı görmek için artık olmayan bir yılı deneyin.',
+  },
+  {
+    name: 'Otomatik oynatmayı kullanın',
+    text: 'Takvimin otomatik olarak ilerlemesi için play\'e basın. Bu, ay uzunluklarının tam döngüsünü ve ay evresi ilerlemesini ortaya çıkarır.',
+  },
+];
+
+const title = 'Ebedi Takvim Simülatörü: Etkileşimli Saat Komplikasyonu';
+
+export const content: ToolLocaleContent<PerpetualCalendarUI> = {
+  slug: 'ebedi-takvim',
+  title,
+  description: 'Ebedi takvim saat komplikasyonunun mekanik dehasını keşfedin. Animasyonlu bir kadranla tarih, gün, ay, artık yıl döngüsü ve ay evresini görselleştirin.',
+  ui: {
+    title: 'Ebedi Takvim Simülatörü',
+    dateLabel: 'Tarih',
+    dayLabel: 'Gün',
+    monthLabel: 'Ay',
+    yearLabel: 'Yıl',
+    leapYearLabel: 'Artık Yıl',
+    moonPhaseLabel: 'Ay Evresi',
+    weekdayLabel: 'Hafta Günü',
+    advanceDay: 'Gün İlerlet',
+    advanceMonth: 'Ay İlerlet',
+    advanceYear: 'Yıl İlerlet',
+    autoPlay: 'Otomatik',
+    resetBtn: 'Bugün',
+    dayNames: 'Pazar,Pazartesi,Salı,Çarşamba,Perşembe,Cuma,Cumartesi',
+    monthNames: 'Ocak,Şubat,Mart,Nisan,Mayıs,Haziran,Temmuz,Ağustos,Eylül,Ekim,Kasım,Aralık',
+    tipTitle: 'İpucu',
+    tipContent: 'Çoğu ebedi takvim saati, değişken uzunlukta çentiklere sahip 48 aylık bir program çarkı kullanır. Şubat en kısa çentiğe sahiptir (normal yıllarda 28 gün, artık yıllarda 29), 30 ve 31 günlük aylar ise giderek daha uzun çentiklere sahiptir.',
+    step1: 'Mekanizmanın ay sonu geçişlerini nasıl yönettiğini görmek için Şubat ayını gün gün geçin.',
+    step2: 'Ay evresi göstergesinin 29,5 günlük döngüsü boyunca ilerlemesini izleyin.',
+    step3: '4 yıllık döngüyü anlamak için artık yıl ve normal yıl Şubat geçişlerini karşılaştırın.',
+  },
+  seo: [
+    { type: 'title', text: 'Ebedi Takvim Simülatörü: Etkileşimli Komplikasyon', level: 2 },
+    { type: 'paragraph', html: '<strong>Ebedi takvim</strong>, haute horlogerie\'nin en prestijli komplikasyonlarından biridir. Bu etkileşimli simülatör, mekanik bir ebedi takvimin tarih, gün, ay, artık yıl ve ay evresini nasıl takip ettiğini görselleştirir — onlarca yıl boyunca manuel düzeltme gerektirmez. 48 aylık dişli programını keşfedin, Şubat geçişlerinin nasıl çalıştığını görün ve bu mikromekanik başyapıtlarına yerleştirilmiş Gregoryen takvim mantığını anlayın.' },
+    { type: 'title', text: 'Ebedi takvim nasıl çalışır', level: 3 },
+    { type: 'paragraph', html: 'Mekanik bir ebedi takvim, farklı uzunluktaki ayları temsil eden farklı derinliklerde çentiklere sahip bir <strong>program çarkı</strong> kullanır. Bir algılama kolu her çentiğe düşer; daha derin bir çentik kısa bir ayı (28-29 gün) işaret eder ve doğru gün sayısından sonra mekanizmayı bir sonraki ayın 1\'ine atlaması için tetikler. Bir <strong>48 aylık dişli</strong>, 29 Şubat için ek bir çentik ile 4 yıllık artık yıl döngüsünü yönetir. Program, yüzyıl yıllarının (ör. 2100) 400\'e bölünmedikçe artık yılı atladığını bilir.' },
+    { type: 'title', text: 'Karşılaştırma: Ebedi vs Yıllık Takvim', level: 3 },
+    {
+      type: 'table', headers: ['Özellik', 'Yıllık Takvim', 'Ebedi Takvim'], rows: [
+        ['Düzeltme gerektirir', 'Yılda bir kez (1 Mart)', 'Yüzyılda bir kez (2100)'],
+        ['Artık yıl yönetimi', 'Manuel', 'Otomatik (4 yıllık kam)'],
+        ['Ay tanıma', '30 vs 31 gün', 'Tam 28/29/30/31'],
+        ['Karmaşıklık', 'Orta (~50 parça)', 'Çok yüksek (~200+ parça)'],
+        ['Fiyat aralığı', '€3.000-15.000', '€20.000-500.000+'],
+      ]
+    },
+    { type: 'diagnostic', variant: 'info', title: 'Etkileşimli Takvim Simülatörü', icon: 'mdi:calendar-month', badge: 'SAATÇİLİK', html: 'Bu araç, ebedi takvimli bir saatin takvim mekanizmasını simüle eder. Animasyonlu kadran, tarih kolunu, ay penceresini, gün alt kadranını, ay evresini ve artık yıl göstergesini gösterir. Günler, aylar veya yıllar boyunca ilerlemek için kontrolleri kullanın ve mekanik mantığı izleyin.' },
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: buildSchemas(title, faq, howTo),
+};

package/src/tool/perpetual-calendar/i18n/zh.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: '什么是手表的万年历？',
+    answer: '万年历是一种机械式手表复杂功能，可自动显示正确的日期、星期、月份和月相，同时考虑不同长度的月份和闰年。它被编程为精确到2100年（下一个不能被400整除的世纪年）。',
+  },
+  {
+    question: '万年历如何知道闰年？',
+    answer: '机械程序使用带有特殊设计凸轮的48个月（4年）齿轮，该凸轮考虑到2月29日。该机制知道能被100整除的年份不是闰年，除非它们也能被400整除。大多数万年历精确到2100年，届时将需要一天的修正。',
+  },
+  {
+    question: '万年历和年历有什么区别？',
+    answer: '年历每年需要一次手动校正（2月底），而万年历自动处理闰年并持续正确运行数十年。万年历在机械上要复杂得多。',
+  },
+];
+
+const howTo = [
+  {
+    name: '前进日期',
+    text: '使用D（日）、M（月）和Y（年）按钮向前推进日历。观察日期指针移动和月份窗口变化。',
+  },
+  {
+    name: '观察闰年过渡',
+    text: '在闰年（例如2024年）的2月中前进，查看从29日跳转到3月1日。尝试非闰年查看从28日跳转到3月1日。',
+  },
+  {
+    name: '使用自动播放',
+    text: '按播放键让日历自动前进。这将显示完整的月份长度周期和月相进展。',
+  },
+];
+
+const title = '万年历模拟器：交互式手表复杂功能';
+
+export const content: ToolLocaleContent<PerpetualCalendarUI> = {
+  slug: 'perpetual-calendar',
+  title,
+  description: '探索万年历手表复杂功能的机械天才。通过动画表盘可视化日期、星期、月份、闰年周期和月相。',
+  ui: {
+    title: '万年历模拟器',
+    dateLabel: '日期',
+    dayLabel: '日',
+    monthLabel: '月',
+    yearLabel: '年',
+    leapYearLabel: '闰年',
+    moonPhaseLabel: '月相',
+    weekdayLabel: '星期',
+    advanceDay: '前进一天',
+    advanceMonth: '前进一月',
+    advanceYear: '前进一年',
+    autoPlay: '自动',
+    resetBtn: '今天',
+    dayNames: '星期日,星期一,星期二,星期三,星期四,星期五,星期六',
+    monthNames: '一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月',
+    tipTitle: '小贴士',
+    tipContent: '大多数万年历手表使用带有可变长度凹口的48个月程序轮。二月的凹口最短（平年28天，闰年29天），而30天和31天的月份拥有逐渐变长的凹口。',
+    step1: '一天天经过二月，观察机制如何处理月末过渡。',
+    step2: '观察月相指示器经过其29.5天周期的进展。',
+    step3: '比较闰年和平年的二月过渡，以理解4年周期。',
+  },
+  seo: [
+    { type: 'title', text: '万年历模拟器：交互式复杂功能', level: 2 },
+    { type: 'paragraph', html: '<strong>万年历</strong>是高级制表中最负盛名的复杂功能之一。此交互式模拟器可视化机械万年历如何跟踪日期、星期、月份、闰年和月相——数十年无需手动校正。探索48个月齿轮程序，查看二月过渡如何工作，并理解融入这些微机械杰作中的格里高利历逻辑。' },
+    { type: 'title', text: '万年历的工作原理', level: 3 },
+    { type: 'paragraph', html: '机械万年历使用带有不同深度凹口的<strong>程序轮</strong>来表示不同长度的月份。感应杆落入每个凹口；较深的凹口表示短月（28-29天），触发机制在正确的天数后跳转到下个月的第1天。<strong>48个月齿轮</strong>处理4年的闰年周期，为2月29日设有一个额外凹口。程序知道世纪年（例如2100年）除非能被400整除，否则跳过闰年。' },
+    { type: 'title', text: '比较：万年历 vs 年历', level: 3 },
+    {
+      type: 'table', headers: ['特点', '年历', '万年历'], rows: [
+        ['需要调整', '每年一次（3月1日）', '每世纪一次（2100年）'],
+        ['闰年处理', '手动', '自动（4年凸轮）'],
+        ['月份识别', '30日 vs 31日', '完整28/29/30/31'],
+        ['复杂度', '中等（约50个零件）', '非常高（200+个零件）'],
+        ['价格范围', '€3,000-15,000', '€20,000-500,000+'],
+      ]
+    },
+    { type: 'diagnostic', variant: 'info', title: '交互式日历模拟器', icon: 'mdi:calendar-month', badge: '钟表学', html: '此工具模拟万年历手表的日历机制。动画表盘显示日期指针、月份窗口、日子表盘、月相和闰年指示器。使用控制前进日、月或年，观察机械逻辑的运行。' },
+  ],
+  faq,
+  bibliography,
+  howTo,
+  schemas: buildSchemas(title, faq, howTo),
+};

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

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

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

@@ -0,0 +1,181 @@
+.tool-main-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  border-radius: 1.25rem;
+  margin: 0 auto;
+  padding: 1.25rem;
+  box-shadow: var(--shadow-base);
+}
+
+.calendar-layout {
+  display: flex;
+  gap: 1rem;
+  align-items: stretch;
+}
+
+.dial-section {
+  flex: 4;
+  position: relative;
+  min-width: 0;
+}
+
+canvas#calendar-canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0.75rem;
+  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f1a 100%);
+  border: 1px solid rgba(212, 175, 55, 0.15);
+}
+
+.date-overlay {
+  position: absolute;
+  bottom: 18%;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  pointer-events: none;
+  line-height: 1.2;
+}
+
+.date-weekday {
+  display: block;
+  font-size: clamp(0.8rem, 2vw, 1.3rem);
+  font-weight: 700;
+  color: var(--accent);
+  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.date-full {
+  display: block;
+  font-size: clamp(0.5rem, 1vw, 0.75rem);
+  color: var(--text-base);
+  opacity: 0.5;
+  margin-top: 0.2em;
+  font-variant-numeric: tabular-nums;
+}
+
+.sidebar {
+  flex: 1;
+  min-width: 120px;
+  max-width: 180px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: 0.5rem 0;
+}
+
+.sidebar-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.sidebar-label {
+  font-size: 0.55rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-base);
+  opacity: 0.35;
+}
+
+.sidebar-buttons {
+  display: flex;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+
+.sidebar button {
+  min-width: 28px;
+  height: 28px;
+  padding: 0 0.45rem;
+  font-size: 0.65rem;
+  font-weight: 500;
+  border: 1px solid var(--border-base);
+  border-radius: 0.35rem;
+  background: var(--bg-page);
+  color: var(--text-base);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sidebar button:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 6%, var(--bg-page));
+}
+
+.sidebar button:active {
+  transform: scale(0.95);
+}
+
+.sidebar-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.sidebar-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.2rem 0;
+  border-bottom: 1px solid var(--border-base);
+  border-bottom-width: 0.5px;
+}
+
+.sidebar-row:last-child {
+  border-bottom: none;
+}
+
+.sidebar-row .slbl {
+  font-size: 0.55rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-base);
+  opacity: 0.4;
+  font-weight: 500;
+}
+
+.sidebar-row .sval {
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--text-base);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (max-width: 520px) {
+  .calendar-layout {
+    flex-direction: column;
+  }
+  .sidebar {
+    max-width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    padding: 0;
+  }
+  .sidebar-group {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  .sidebar-label {
+    margin-right: 0.25rem;
+  }
+  .sidebar-info {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  .sidebar-row {
+    border-bottom: none;
+    gap: 0.3rem;
+  }
+}

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

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

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

@@ -0,0 +1,26 @@
+let _ctx: CanvasRenderingContext2D;
+let _isDark = true;
+let _fontFam = 'system-ui, sans-serif';
+
+export function getCtx() { return _ctx; }
+export function isDark() { return _isDark; }
+
+export function setCtx(ctx: CanvasRenderingContext2D) {
+  _ctx = ctx;
+  _fontFam = getComputedStyle(document.body).fontFamily || _fontFam;
+}
+
+export function detectTheme() {
+  const bg = window.getComputedStyle(document.body).backgroundColor;
+  _isDark = !bg || bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent' ? true : parseInt(bg.replace(/[^\d,]/g, '').split(',')[0]) < 128;
+}
+
+export function c(h: string, l: string): string { return _isDark ? h : l; }
+export function getFontFam() { return _fontFam; }
+
+export const W = 600;
+export const H = 600;
+export const CX = 300;
+export const CY = 300;
+export const OUTER_R = 280;
+export const INNER_R = 220;

package/src/tool/tourbillon-visualizer/bibliography.astro

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

package/src/tool/tourbillon-visualizer/bibliography.ts

@@ -0,0 +1,7 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  { name: 'Tourbillon - Wikipedia', url: 'https://en.wikipedia.org/wiki/Tourbillon' },
+  { name: 'Breguet Tourbillon History', url: 'https://www.swatchgroup.com/en/services/archive/2021/breguet-inventor-tourbillon' },
+  { name: 'Flying Tourbillon Explained', url: 'https://www.hautehorlogerie.org/zh/watches-and-culture/watchmaking-knowledge/encyclopedia/flying-tourbillon-' },
+];

package/src/tool/tourbillon-visualizer/client.ts

@@ -0,0 +1,122 @@
+const canvas = document.getElementById('tourb-canvas') as HTMLCanvasElement;
+const ctx = canvas.getContext('2d')!;
+
+import { setCtx, detT, W, H, CX, CY } from './state';
+import { drawBg, drawPlate, drawSecondScale, drawScrews } from './renderer/base';
+import { drawCage } from './renderer/cage';
+import { drawBalance, drawHairspring, drawPallet, drawEscapeWheel } from './renderer/esc';
+import { calc } from './tourbillon';
+
+setCtx(ctx);
+
+const REF = 700;
+
+let cageAngle = 0;
+let balancePhase = 0;
+let palletPhase = 0;
+let escAngle = 0;
+let flying = false;
+let gyro = false;
+let zoom = false;
+let curBeat = 28800;
+let speedM = 1;
+let paused = false;
+let highlight: string | null = null;
+
+function resize() {
+  const p = canvas.parentElement!;
+  const dw = p.clientWidth;
+  const dh = dw;
+  const dpr = Math.min(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 * dpr, 0, 0, dh / REF * dpr, 0, 0);
+}
+
+function upUI() {
+  const b = calc(curBeat);
+  const f = (id: string, v: string) => { const e = document.getElementById(id); if (e) e.textContent = v; };
+  f('cage-info', Math.round(((cageAngle * 180 / Math.PI) % 360 + 360) % 360) + '\u00B0');
+  f('balance-info', b.hz + ' Hz');
+  f('escape-info', b.rpm + ' rpm');
+  f('pallet-info', b.bph + ' bph');
+  f('spring-info', b.hz + ' Hz');
+}
+
+function tick() {
+  if (paused) return;
+  const b = calc(curBeat);
+  const dt = 1 * speedM;
+  cageAngle += 0.0015 * dt;
+  const balanceSpeed = 0.04 + b.hz * 0.03;
+  balancePhase += balanceSpeed * dt;
+  palletPhase += b.hz * 0.35 * dt;
+  escAngle += b.rpm * 0.0005 * dt;
+}
+
+function render() {
+  detT();
+  const b = calc(curBeat);
+  const cr = zoom ? 60 : 140;
+
+  ctx.save();
+  ctx.clearRect(0, 0, W, H);
+  drawBg();
+  drawPlate();
+  drawSecondScale();
+  drawScrews();
+
+  if (zoom) {
+    const zf = 2.5;
+    ctx.translate(CX, CY);
+    ctx.scale(zf, zf);
+    ctx.translate(-CX, -CY);
+  }
+
+  drawCage(cageAngle, flying, gyro, zoom);
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(CX, CY, cr - 5, 0, Math.PI * 2);
+  ctx.clip();
+  drawHairspring(balancePhase, b.hz, highlight === 'hairspring');
+  drawBalance(balancePhase, highlight === 'balance');
+  drawPallet(palletPhase, highlight === 'pallet');
+  drawEscapeWheel(escAngle, highlight === 'escape');
+  ctx.restore();
+  ctx.restore();
+  upUI();
+}
+
+function loop() { tick(); render(); requestAnimationFrame(loop); }
+
+function switchOpt(opt: string, val: string) {
+  document.querySelectorAll(`[data-opt="${opt}"]`).forEach((b) => {
+    b.classList.toggle('active', (b as HTMLElement).dataset.val === val);
+  });
+  if (opt === 'type') { flying = val === 'flying'; gyro = val === 'gyro'; }
+  if (opt === 'speed') { speedM = parseFloat(val); paused = val === '0'; }
+  if (opt === 'beat') curBeat = parseInt(val);
+  if (opt === 'view') zoom = val === 'zoom';
+}
+
+function init() {
+  document.querySelectorAll('[data-opt]').forEach((b) => {
+    b.addEventListener('click', () => switchOpt(
+      (b as HTMLElement).dataset.opt!,
+      (b as HTMLElement).dataset.val!
+    ));
+  });
+  document.querySelectorAll('.tourb-cell').forEach((cell) => {
+    const target = cell.getAttribute('data-highlight');
+    if (!target) return;
+    cell.addEventListener('mouseenter', () => { highlight = target; });
+    cell.addEventListener('mouseleave', () => { highlight = null; });
+  });
+}
+
+new ResizeObserver(resize).observe(canvas.parentElement!);
+resize();
+init();
+loop();

package/src/tool/tourbillon-visualizer/component.astro

@@ -0,0 +1,126 @@
+---
+import TourbillonPanel from './components/TourbillonPanel.astro';
+interface Props { ui: Record<string, string>; }
+const { ui } = Astro.props;
+---
+<style is:global>
+  .tool-main-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 1.25rem;
+    margin: 0 auto;
+    padding: 1.25rem;
+    box-shadow: var(--shadow-base);
+  }
+  .tourb-col {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .tourb-canvas {
+    width: 100%;
+  }
+  canvas#tourb-canvas {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 0.75rem;
+    background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f1a 100%);
+    border: 1px solid rgba(212,175,55,0.15);
+  }
+  .tourb-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background: var(--bg-page);
+    border: 1px solid var(--border-base);
+    border-radius: 0.75rem;
+  }
+  .tourb-block {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.35rem 0.6rem;
+    border: 1px solid rgba(212,175,55,0.12);
+    border-radius: 0.4rem;
+    background: color-mix(in srgb, rgba(212,175,55,0.03), var(--bg-surface));
+  }
+  .tourb-lbl {
+    font-size: 0.6rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: rgba(212,175,55,0.8);
+    white-space: nowrap;
+  }
+  .tourb-btns {
+    display: inline-flex;
+    gap: 0.15rem;
+  }
+  .tourb-btn {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.7rem;
+    font-weight: 500;
+    border: 1px solid rgba(212,175,55,0.15);
+    border-radius: 0.3rem;
+    background: transparent;
+    color: var(--text-base);
+    opacity: 0.5;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+  .tourb-btn:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+    opacity: 1;
+  }
+  .tourb-btn.active {
+    border-color: var(--accent);
+    color: var(--accent);
+    opacity: 1;
+    background: color-mix(in srgb, var(--accent) 10%, var(--bg-page));
+    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 15%, transparent);
+  }
+  .tourb-cell-val {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--accent);
+    font-variant-numeric: tabular-nums;
+  }
+  .tourb-data {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    padding: 0.6rem 0.75rem;
+    background: var(--bg-page);
+    border: 1px solid var(--border-base);
+    border-radius: 0.6rem;
+  }
+  .tourb-cell {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 0.3rem;
+    cursor: default;
+    transition: background 0.2s;
+  }
+  .tourb-cell:hover {
+    background: rgba(212,175,55,0.06);
+  }
+  .tourb-cell.highlight {
+    background: rgba(212,175,55,0.1);
+    box-shadow: 0 0 6px rgba(212,175,55,0.1);
+  }
+  .tourb-cell-lbl {
+    font-size: 0.6rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--text-base);
+    opacity: 0.3;
+  }
+</style>
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}><TourbillonPanel labels={ui} /></div>
+<script src="./client.ts"></script>