@jjlmoya/utils-chrono 1.11.0 → 1.16.0

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>

package/src/tool/tourbillon-visualizer/components/TourbillonPanel.astro

@@ -0,0 +1,66 @@
+---
+interface Props { labels: Record<string, string>; }
+const { labels } = Astro.props;
+---
+<div class="tourb-col">
+  <div class="tourb-canvas">
+    <canvas id="tourb-canvas" width="700" height="700"></canvas>
+  </div>
+  <div class="tourb-controls">
+    <div class="tourb-block">
+      <span class="tourb-lbl">{labels.typeLabel || 'Type'}</span>
+      <span class="tourb-btns">
+        <button class="tourb-btn active" data-opt="type" data-val="classic">{labels.typeClassic || 'Classic'}</button>
+        <button class="tourb-btn" data-opt="type" data-val="flying">{labels.typeFlying || 'Flying'}</button>
+        <button class="tourb-btn" data-opt="type" data-val="gyro">Gyro</button>
+      </span>
+    </div>
+    <div class="tourb-block">
+      <span class="tourb-lbl">{labels.beatRateLabel || 'Rate'}</span>
+      <span class="tourb-btns">
+        <button class="tourb-btn" data-opt="beat" data-val="18000" title="Slow majestic beat">18k</button>
+        <button class="tourb-btn active" data-opt="beat" data-val="28800" title="Standard modern beat">28.8k</button>
+        <button class="tourb-btn" data-opt="beat" data-val="36000" title="High frequency rapid beat">36k</button>
+      </span>
+    </div>
+    <div class="tourb-block">
+      <span class="tourb-lbl">{labels.speedLabel || 'Speed'}</span>
+      <span class="tourb-btns">
+        <button class="tourb-btn" data-opt="speed" data-val="0.5">Slow</button>
+        <button class="tourb-btn active" data-opt="speed" data-val="1">1x</button>
+        <button class="tourb-btn" data-opt="speed" data-val="2">2x</button>
+        <button class="tourb-btn" data-opt="speed" data-val="5">5x</button>
+        <button class="tourb-btn" data-opt="speed" data-val="0">||</button>
+      </span>
+    </div>
+    <div class="tourb-block">
+      <span class="tourb-lbl">View</span>
+      <span class="tourb-btns">
+        <button class="tourb-btn active" data-opt="view" data-val="full">Full</button>
+        <button class="tourb-btn" data-opt="view" data-val="zoom">Zoom</button>
+      </span>
+    </div>
+  </div>
+  <div class="tourb-data">
+    <div class="tourb-cell" data-highlight="cage">
+      <span class="tourb-cell-lbl">{labels.cageRotationLabel || 'Cage'}</span>
+      <span class="tourb-cell-val" id="cage-info">0&deg;</span>
+    </div>
+    <div class="tourb-cell" data-highlight="balance">
+      <span class="tourb-cell-lbl">{labels.balanceLabel || 'Balance'}</span>
+      <span class="tourb-cell-val" id="balance-info">0 Hz</span>
+    </div>
+    <div class="tourb-cell" data-highlight="escape">
+      <span class="tourb-cell-lbl">{labels.escapeLabel || 'Escape'}</span>
+      <span class="tourb-cell-val" id="escape-info">0 rpm</span>
+    </div>
+    <div class="tourb-cell" data-highlight="pallet">
+      <span class="tourb-cell-lbl">{labels.palletLabel || 'Pallet'}</span>
+      <span class="tourb-cell-val" id="pallet-info">0 bph</span>
+    </div>
+    <div class="tourb-cell" data-highlight="hairspring">
+      <span class="tourb-cell-lbl">Spring</span>
+      <span class="tourb-cell-val" id="spring-info">4 Hz</span>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,51 @@
+import type { ChronoToolEntry, ToolLocaleContent } from '../../types';
+
+export type TourbillonUI = {
+  title: string;
+  typeLabel: string;
+  typeClassic: string;
+  typeFlying: string;
+  speedLabel: string;
+  speedNormal: string;
+  speedSlow: string;
+  speedPaused: string;
+  beatRateLabel: string;
+  rate18k: string;
+  rate28k: string;
+  rate36k: string;
+  cageRotationLabel: string;
+  showLabelsLabel: string;
+  step1: string;
+  step2: string;
+  step3: string;
+  tipTitle: string;
+  tipContent: string;
+  balanceLabel: string;
+  escapeLabel: string;
+  palletLabel: string;
+  cageLabel: string;
+};
+
+export type TourbillonLocaleContent = ToolLocaleContent<TourbillonUI>;
+
+export const tourbillonVisualizer: ChronoToolEntry<TourbillonUI> = {
+  id: 'tourbillon-visualizer',
+  icons: { bg: 'mdi:rotate-orbit', fg: 'mdi:circle-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),
+  },
+};

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

@@ -0,0 +1,35 @@
+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)];
+}