@jjlmoya/utils-nature 1.26.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-nature",
-    "version": "1.26.0",
+    "version": "1.27.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/entries.ts

@@ -8,6 +8,8 @@ export { seedCalculator } from './tool/seedCalculator/entry';
 export type { SeedCalculatorLocaleContent } from './tool/seedCalculator/entry';
 export { urbanGardenPlanner } from './tool/urbanGardenPlanner/entry';
 export type { UrbanGardenPlannerLocaleContent } from './tool/urbanGardenPlanner/entry';
+export { seedStratificationCalendar } from './tool/seedStratificationCalendar/entry';
+export type { SeedStratificationCalendarLocaleContent } from './tool/seedStratificationCalendar/entry';
 export { natureCategory } from './category';
 import { cricketThermometer } from './tool/cricketThermometer/entry';
 import { digitalCarbon } from './tool/digitalCarbon/entry';

package/src/index.ts

@@ -30,3 +30,5 @@ export { URBAN_GARDEN_PLANNER_TOOL, urbanGardenPlanner } from './tool/urbanGarde
 export { COMPOST_BIN_VOLUME_RATIO_CALCULATOR_TOOL, compostBinVolumeRatioCalculator } from './tool/compostBinVolumeRatioCalculator/index';
 
 export { WILDLIFE_CAMERA_TRAP_EFFORT_PLANNER_TOOL, wildlifeCameraTrapEffortPlanner } from './tool/wildlifeCameraTrapEffortPlanner/index';
+
+export { SEED_STRATIFICATION_CALENDAR_TOOL, seedStratificationCalendar } from './tool/seedStratificationCalendar/index';

package/src/tests/tool_validation.test.ts

@@ -3,8 +3,8 @@ import { ALL_TOOLS, natureCategory } from '../index';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 7 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(7);
+    it('should have 8 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(8);
     });
 
     it('natureCategory should be defined', () => {

package/src/tool/seedStratificationCalendar/bibliography.astro

@@ -0,0 +1,9 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { seedStratificationCalendar } from './index';
+
+const { locale = 'en' } = Astro.props;
+const content = await seedStratificationCalendar.i18n[locale as keyof typeof seedStratificationCalendar.i18n]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/seedStratificationCalendar/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Royal Horticultural Society, Growing Trees and Shrubs from Seed',
+    url: 'https://www.rhs.org.uk/plants/types/trees/trees-shrubs-from-seed',
+  },
+  {
+    name: 'Ministerio de Agricultura de España, Producción de plantas por medio de semillas',
+    url: 'https://www.mapa.gob.es/ministerio/pags/biblioteca/hojas/hd_1980_15.pdf',
+  },
+  {
+    name: 'Plantas y Flores, Calendario de Plantación 2025 | Guía Completa de Cultivo Mes a Mes',
+    url: 'https://plantasyflores.online/calendario/',
+  },
+];

package/src/tool/seedStratificationCalendar/calendar-actions.ts

@@ -0,0 +1,66 @@
+import type { CalendarPlan } from './logic';
+import type { SeedStratificationCalendarUI } from './ui';
+import { profileLabels } from './profile-labels';
+
+export function todayISO(): string {
+  const date = new Date();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${date.getFullYear()}-${month}-${day}`;
+}
+
+function formatICSDate(value: string): string {
+  return value.replaceAll('-', '');
+}
+
+function addDay(value: string): string {
+  const date = new Date(`${value}T00:00:00Z`);
+  date.setUTCDate(date.getUTCDate() + 1);
+  return date.toISOString().slice(0, 10);
+}
+
+function escapeICS(value: string): string {
+  return value.replaceAll('\\', '\\\\').replaceAll(';', '\\;').replaceAll(',', '\\,').replaceAll('\n', '\\n');
+}
+
+function buildICS(plan: CalendarPlan, ui: SeedStratificationCalendarUI): string {
+  const labels = { soak: ui.labelSoak, warm: ui.labelWarm, cold: ui.labelCold, sow: ui.labelSow };
+  const lines = ['BEGIN:VCALENDAR', 'VERSION:2.0', 'PRODID:-//jjlmoya-utils-nature//Seed Calendar//EN', 'CALSCALE:GREGORIAN'];
+  plan.phases.forEach((phase) => {
+    const label = labels[phase.kind];
+    lines.push('BEGIN:VEVENT', `UID:${plan.profileId}-${phase.kind}-${phase.startDate}@jjlmoya-utils-nature`, `DTSTAMP:${formatICSDate(todayISO())}T000000Z`, `DTSTART;VALUE=DATE:${formatICSDate(phase.startDate)}`, `DTEND;VALUE=DATE:${formatICSDate(addDay(phase.endDate))}`, `SUMMARY:${escapeICS(label)}`, `DESCRIPTION:${escapeICS(phase.technique)}`, 'BEGIN:VALARM', 'TRIGGER:PT0S', 'ACTION:DISPLAY', `DESCRIPTION:${escapeICS(label)}`, 'END:VALARM', 'END:VEVENT');
+  });
+  lines.push('END:VCALENDAR');
+  return `${lines.join('\r\n')}\r\n`;
+}
+
+export function downloadCalendar(plan: CalendarPlan, ui: SeedStratificationCalendarUI): void {
+  const blob = new Blob([buildICS(plan, ui)], { type: 'text/calendar;charset=utf-8' });
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+  link.download = `seed-calendar-${plan.profileId}.ics`;
+  link.click();
+  URL.revokeObjectURL(link.href);
+}
+
+export async function copyShareLink(root: HTMLElement, link: string, ui: SeedStratificationCalendarUI): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(link);
+    root.querySelector<HTMLElement>('[data-role="share-status"]')!.textContent = ui.labelCopied;
+  } catch {
+    root.querySelector<HTMLElement>('[data-role="share-status"]')!.textContent = link;
+  }
+}
+
+function formatDateForPrint(value: string, locale: string): string {
+  return new Intl.DateTimeFormat(locale, { day: '2-digit', month: '2-digit', year: 'numeric', timeZone: 'UTC' }).format(new Date(`${value}T00:00:00Z`));
+}
+
+export function updatePrintLabel(root: HTMLElement, plan: CalendarPlan, ui: SeedStratificationCalendarUI, locale: string): void {
+  const phaseLabels = { soak: ui.labelSoak, warm: ui.labelWarm, cold: ui.labelCold, sow: ui.labelSow };
+  const profileLabelsMap = profileLabels(ui);
+  root.querySelector<HTMLElement>('[data-role="print-profile"]')!.textContent = profileLabelsMap[plan.profileId] ?? ui.profileApple;
+  root.querySelector<HTMLElement>('[data-role="print-start"]')!.textContent = `${ui.labelCalendarStarts}: ${formatDateForPrint(plan.startDate, locale)}`;
+  root.querySelector<HTMLElement>('[data-role="print-sowing"]')!.textContent = `${ui.labelSowingDay}: ${formatDateForPrint(plan.sowingDate, locale)}`;
+  root.querySelector<HTMLElement>('[data-role="print-phases"]')!.textContent = plan.phases.map((phase) => `${phaseLabels[phase.kind]} ${formatDateForPrint(phase.startDate, locale)}–${formatDateForPrint(phase.endDate, locale)}`).join(' · ');
+}

package/src/tool/seedStratificationCalendar/component.astro

@@ -0,0 +1,62 @@
+---
+import { seedStratificationCalendar } from './index';
+import { SEED_PROFILES as profileOptions } from './logic';
+import { profileLabels } from './profile-labels';
+import type { KnownLocale } from '../../types';
+import type { SeedStratificationCalendarUI } from './ui';
+
+const { locale = 'en', ui: providedUI } = Astro.props as { locale?: KnownLocale; ui?: SeedStratificationCalendarUI };
+const fallbackContent = await seedStratificationCalendar.i18n[locale]?.();
+const ui = providedUI ?? fallbackContent?.ui;
+if (!ui) return null;
+const labels = profileLabels(ui);
+---
+
+<section class="n-seed-calendar" data-tool="seed-stratification-calendar" data-locale={locale}>
+  <div class="n-calendar-controls">
+    <div class="n-unit-switch" role="group" aria-label={ui.labelUnits}>
+      <span class="n-field-label">{ui.labelUnits}</span>
+      <div class="n-unit-options"><button class="n-unit-button is-active" type="button" data-unit-option="metric" aria-pressed="true">{ui.labelMetric}</button><button class="n-unit-button" type="button" data-unit-option="imperial" aria-pressed="false">{ui.labelImperial}</button></div>
+    </div>
+    <div class="n-mode-switch" role="group" aria-label={ui.labelMode}>
+      <span class="n-field-label">{ui.labelMode}</span>
+      <div class="n-mode-options"><button class="n-mode-button is-active" type="button" data-mode-option="sowing-date" aria-pressed="true">{ui.labelModeSowing}</button><button class="n-mode-button" type="button" data-mode-option="ready-date" aria-pressed="false">{ui.labelModeReady}</button></div>
+    </div>
+    <div class="n-control-block">
+      <label class="n-field-label" for="seed-profile-trigger">{ui.labelProfile}</label>
+      <div class="n-custom-select" data-role="profile-select" data-value="apple">
+        <button id="seed-profile-trigger" class="n-select-trigger" type="button" data-select-trigger aria-haspopup="listbox" aria-expanded="false">{ui.profileApple}<span class="n-chevron" aria-hidden="true"></span></button>
+        <div class="n-select-menu" data-select-menu role="listbox" hidden>
+          {profileOptions.map((profile) => <button class="n-select-option" type="button" data-option={profile.id} role="option" aria-selected={profile.id === 'apple'}>{labels[profile.id]}</button>)}
+        </div>
+      </div>
+    </div>
+    <div class="n-control-block">
+      <label class="n-field-label" data-role="date-label" for="seed-anchor-date">{ui.labelSowingDate}</label>
+      <input id="seed-anchor-date" class="n-field" data-role="anchor-date" type="date" value="2027-04-15" />
+    </div>
+    <div class="n-duration-grid">
+      <label class="n-control-block"><span class="n-field-label">{ui.labelSoakDays}</span><input class="n-field" data-role="soak-days" type="number" min="0" max="30" step="1" value="1" /></label>
+      <label class="n-control-block"><span class="n-field-label">{ui.labelWarmDays}</span><input class="n-field" data-role="warm-days" type="number" min="0" max="180" step="1" value="0" /></label>
+      <label class="n-control-block"><span class="n-field-label">{ui.labelColdDays}</span><input class="n-field" data-role="cold-days" type="number" min="0" max="365" step="1" value="90" /></label>
+    </div>
+    <div class="n-range-block">
+      <div class="n-range-heading"><span class="n-field-label">{ui.labelColdRange}</span><span class="n-range-values"><output data-role="cold-min-value">1 °C / 34 °F</output><span>to</span><output data-role="cold-max-value">5 °C / 41 °F</output></span></div>
+      <div class="n-range-pair"><label><span class="sr-only">{ui.labelFrom}</span><input class="n-range" data-role="cold-min" type="range" min="-5" max="15" value="1" /></label><label><span class="sr-only">{ui.labelTo}</span><input class="n-range" data-role="cold-max" type="range" min="-5" max="15" value="5" /></label></div>
+    </div>
+    <p class="n-edit-hint">{ui.labelEditHint}</p>
+    <div class="n-control-actions"><button class="n-primary-button" type="button" data-role="generate">{ui.labelGenerate}</button><button class="n-quiet-button" type="button" data-role="reset">{ui.labelReset}</button></div>
+    <p class="n-error" data-role="error" role="alert" hidden>{ui.warningTemperature}</p>
+  </div>
+  <div class="n-calendar-results" data-role="results" aria-live="polite"><p class="n-empty-state">{ui.emptyState}</p></div>
+  <div class="n-calendar-actions"><button class="n-secondary-button" type="button" data-role="calendar">{ui.labelAddCalendar}</button><button class="n-secondary-button" type="button" data-role="share">{ui.labelShare}</button><button class="n-secondary-button" type="button" data-role="print">{ui.labelPrint}</button><span class="n-share-status" data-role="share-status" role="status" aria-live="polite"></span></div>
+  <div class="n-print-label" data-role="print-label"><strong data-role="print-profile">{ui.profileApple}</strong><span data-role="print-start"></span><span data-role="print-sowing"></span><span data-role="print-phases"></span></div>
+  <script is:inline type="application/json" data-seed-calendar-ui set:html={JSON.stringify(ui)}></script>
+</section>
+
+<script>
+  import { initializeSeedStratificationCalendar } from './controller';
+  const root = document.querySelector<HTMLElement>('[data-tool="seed-stratification-calendar"]');
+  const uiNode = root?.querySelector('[data-seed-calendar-ui]');
+  if (root && uiNode) initializeSeedStratificationCalendar({ root, ui: JSON.parse(uiNode.textContent ?? '{}'), locale: root.dataset.locale ?? 'en' });
+</script>

package/src/tool/seedStratificationCalendar/controller.ts

@@ -0,0 +1,227 @@
+import { applyProfile, celsiusToFahrenheit, createCalendarPlan, DEFAULT_INPUT, fahrenheitToCelsius, SEED_PROFILES, type CalendarInput, type CalendarMode, type TemperatureUnit } from './logic';
+import { renderTimeline } from './dom-views';
+import { loadCalendarState, saveCalendarState } from './storage';
+import { copyShareLink, downloadCalendar, todayISO, updatePrintLabel } from './calendar-actions';
+import { setupSelect } from './profile-select';
+import type { SeedStratificationCalendarUI } from './ui';
+interface ControllerOptions {
+  root: HTMLElement;
+  ui: SeedStratificationCalendarUI;
+  locale: string;
+}
+
+function query<T extends Element>(root: HTMLElement, selector: string): T {
+  const element = root.querySelector<T>(selector);
+  if (!element) throw new Error(`Missing calendar element ${selector}`);
+  return element;
+}
+
+function readNumber(root: HTMLElement, role: string): number {
+  return Number(query<HTMLInputElement>(root, `[data-role="${role}"]`).value);
+}
+
+function getUnit(root: HTMLElement): TemperatureUnit {
+  return root.dataset.unit === 'imperial' ? 'imperial' : 'metric';
+}
+
+function getMode(root: HTMLElement): CalendarMode {
+  return root.dataset.mode === 'ready-date' ? 'ready-date' : 'sowing-date';
+}
+
+function readTemperature(root: HTMLElement, role: string): number {
+  const value = readNumber(root, role);
+  return getUnit(root) === 'metric' ? value : fahrenheitToCelsius(value);
+}
+
+function readInput(root: HTMLElement): CalendarInput {
+  return {
+    mode: getMode(root),
+    anchorDate: query<HTMLInputElement>(root, '[data-role="anchor-date"]').value,
+    profileId: query<HTMLElement>(root, '[data-role="profile-select"]').dataset.value ?? DEFAULT_INPUT.profileId,
+    soakDays: readNumber(root, 'soak-days'),
+    warmDays: readNumber(root, 'warm-days'),
+    coldDays: readNumber(root, 'cold-days'),
+    coldMinC: readTemperature(root, 'cold-min'),
+    coldMaxC: readTemperature(root, 'cold-max'),
+  };
+}
+
+function updateProfileFields(root: HTMLElement, input: CalendarInput): void {
+  const values: Record<string, number> = {
+    'soak-days': input.soakDays,
+    'warm-days': input.warmDays,
+    'cold-days': input.coldDays,
+    'cold-min': input.coldMinC,
+    'cold-max': input.coldMaxC,
+  };
+  Object.entries(values).forEach(([role, value]) => { query<HTMLInputElement>(root, `[data-role="${role}"]`).value = String(value); });
+  setTemperatureInput(root, 'cold-min', input.coldMinC);
+  setTemperatureInput(root, 'cold-max', input.coldMaxC);
+}
+
+function setTemperatureInput(root: HTMLElement, role: string, celsius: number): void {
+  const input = query<HTMLInputElement>(root, `[data-role="${role}"]`);
+  input.value = String(getUnit(root) === 'metric' ? celsius : Math.round(celsiusToFahrenheit(celsius)));
+}
+
+function readUrlNumber(params: URLSearchParams, key: string, fallback: number): number {
+  const value = Number(params.get(key));
+  return Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+
+function readUrlTemperature(params: URLSearchParams, key: string, fallback: number): number {
+  const value = Number(params.get(key));
+  return Number.isFinite(value) ? value : fallback;
+}
+
+function readUrlProfile(params: URLSearchParams, fallback: string): string {
+  const value = params.get('seed');
+  return value && SEED_PROFILES.some((profile) => profile.id === value) ? value : fallback;
+}
+
+function readUrlMode(params: URLSearchParams, fallback: CalendarMode): CalendarMode {
+  return params.get('mode') === 'ready-date' ? 'ready-date' : fallback;
+}
+
+function readUrlAnchorDate(params: URLSearchParams, mode: CalendarMode, fallback: string): string {
+  const value = params.get(mode === 'ready-date' ? 'ready' : 'sow');
+  return value ?? params.get('sow') ?? fallback;
+}
+
+function readUrlInput(fallback: CalendarInput): CalendarInput {
+  if (typeof window === 'undefined') return fallback;
+  const params = new URLSearchParams(window.location.search);
+  const mode = readUrlMode(params, fallback.mode);
+  return {
+    ...fallback,
+    mode,
+    anchorDate: readUrlAnchorDate(params, mode, fallback.anchorDate),
+    profileId: readUrlProfile(params, fallback.profileId),
+    soakDays: readUrlNumber(params, 'soak', fallback.soakDays),
+    warmDays: readUrlNumber(params, 'warm', fallback.warmDays),
+    coldDays: readUrlNumber(params, 'cold', fallback.coldDays),
+    coldMinC: readUrlTemperature(params, 'min', fallback.coldMinC),
+    coldMaxC: readUrlTemperature(params, 'max', fallback.coldMaxC),
+  };
+}
+
+function updateUrl(input: CalendarInput): void {
+  if (typeof window === 'undefined') return;
+  const url = new URL(window.location.href);
+  url.searchParams.set('seed', input.profileId);
+  url.searchParams.set('mode', input.mode);
+  url.searchParams.set(input.mode === 'ready-date' ? 'ready' : 'sow', input.anchorDate);
+  url.searchParams.delete(input.mode === 'ready-date' ? 'sow' : 'ready');
+  url.searchParams.set('soak', String(input.soakDays));
+  url.searchParams.set('warm', String(input.warmDays));
+  url.searchParams.set('cold', String(input.coldDays));
+  url.searchParams.set('min', String(input.coldMinC));
+  url.searchParams.set('max', String(input.coldMaxC));
+  window.history.replaceState(null, '', url);
+}
+
+function updateModeButtons(root: HTMLElement, ui: SeedStratificationCalendarUI): void {
+  const mode = getMode(root);
+  root.querySelectorAll<HTMLButtonElement>('[data-mode-option]').forEach((button) => {
+    const isActive = button.dataset.modeOption === mode;
+    button.classList.toggle('is-active', isActive);
+    button.setAttribute('aria-pressed', String(isActive));
+  });
+  query<HTMLElement>(root, '[data-role="date-label"]').textContent = mode === 'ready-date' ? ui.labelReadyDate : ui.labelSowingDate;
+}
+
+function setMode(root: HTMLElement, ui: SeedStratificationCalendarUI, mode: CalendarMode): void {
+  root.dataset.mode = mode;
+  updateModeButtons(root, ui);
+}
+
+function setupMode(root: HTMLElement, ui: SeedStratificationCalendarUI, initialMode: CalendarMode): void {
+  setMode(root, ui, initialMode);
+  root.querySelectorAll<HTMLButtonElement>('[data-mode-option]').forEach((button) => button.addEventListener('click', () => {
+    root.dataset.mode = button.dataset.modeOption === 'ready-date' ? 'ready-date' : 'sowing-date';
+    updateModeButtons(root, ui);
+    render(root, ui, root.dataset.locale ?? 'en');
+  }));
+}
+
+function render(root: HTMLElement, ui: SeedStratificationCalendarUI, locale: string): void {
+  try {
+    const input = readInput(root);
+    const today = todayISO();
+    const plan = createCalendarPlan({ ...input, referenceDate: today });
+    renderTimeline({ container: query(root, '[data-role="results"]'), plan, ui, locale, today, unit: getUnit(root) });
+    updatePrintLabel(root, plan, ui, locale);
+    updateUrl(input);
+    saveCalendarState(input, getUnit(root));
+    query<HTMLElement>(root, '[data-role="error"]').hidden = true;
+  } catch {
+    const error = query<HTMLElement>(root, '[data-role="error"]');
+    error.textContent = ui.warningTemperature;
+    error.hidden = false;
+  }
+}
+
+function setInputValues(root: HTMLElement, input: CalendarInput): void {
+  query<HTMLInputElement>(root, '[data-role="anchor-date"]').value = input.anchorDate;
+  updateProfileFields(root, input);
+}
+
+function updateRangeLabels(root: HTMLElement): void {
+  const minimum = readNumber(root, 'cold-min');
+  const maximum = readNumber(root, 'cold-max');
+  const minimumC = getUnit(root) === 'metric' ? minimum : fahrenheitToCelsius(minimum);
+  const maximumC = getUnit(root) === 'metric' ? maximum : fahrenheitToCelsius(maximum);
+  query<HTMLOutputElement>(root, '[data-role="cold-min-value"]').textContent = `${Math.round(minimumC * 10) / 10} °C / ${Math.round(celsiusToFahrenheit(minimumC))} °F`;
+  query<HTMLOutputElement>(root, '[data-role="cold-max-value"]').textContent = `${Math.round(maximumC * 10) / 10} °C / ${Math.round(celsiusToFahrenheit(maximumC))} °F`;
+}
+
+function updateUnitButtons(root: HTMLElement): void {
+  const unit = getUnit(root);
+  root.querySelectorAll<HTMLButtonElement>('[data-unit-option]').forEach((button) => {
+    const isActive = button.dataset.unitOption === unit;
+    button.classList.toggle('is-active', isActive);
+    button.setAttribute('aria-pressed', String(isActive));
+  });
+}
+
+function setTemperatureBounds(root: HTMLElement, unit: TemperatureUnit): void {
+  const min = query<HTMLInputElement>(root, '[data-role="cold-min"]');
+  const max = query<HTMLInputElement>(root, '[data-role="cold-max"]');
+  const bounds = unit === 'metric' ? { min: '-5', max: '15' } : { min: '23', max: '59' };
+  min.min = bounds.min; min.max = bounds.max; max.min = bounds.min; max.max = bounds.max;
+}
+
+function switchUnit(root: HTMLElement, ui: SeedStratificationCalendarUI, unit: TemperatureUnit): void {
+  const current = readInput(root);
+  root.dataset.unit = unit;
+  setTemperatureBounds(root, unit);
+  setTemperatureInput(root, 'cold-min', current.coldMinC);
+  setTemperatureInput(root, 'cold-max', current.coldMaxC);
+  updateUnitButtons(root);
+  updateRangeLabels(root);
+  render(root, ui, root.dataset.locale ?? 'en');
+}
+
+export function initializeSeedStratificationCalendar(options: ControllerOptions): void {
+  const { root, ui, locale } = options;
+  root.dataset.locale = locale;
+  root.dataset.unit = 'metric';
+  const stored = loadCalendarState(DEFAULT_INPUT);
+  const initialInput = readUrlInput(stored.input);
+  root.dataset.unit = stored.unit;
+  setTemperatureBounds(root, stored.unit);
+  setInputValues(root, initialInput);
+  setupMode(root, ui, initialInput.mode);
+  const onProfileSelect = (id: string): void => { updateProfileFields(root, { ...applyProfile(id, query<HTMLInputElement>(root, '[data-role="anchor-date"]').value), mode: getMode(root) }); render(root, ui, root.dataset.locale ?? 'en'); };
+  const profileSelect = setupSelect(root, ui, initialInput.profileId, onProfileSelect);
+  root.querySelectorAll<HTMLButtonElement>('[data-unit-option]').forEach((button) => button.addEventListener('click', () => switchUnit(root, ui, button.dataset.unitOption as TemperatureUnit)));
+  updateUnitButtons(root);
+  root.querySelectorAll<HTMLInputElement>('input').forEach((input) => input.addEventListener('input', () => { updateRangeLabels(root); render(root, ui, locale); }));
+  query<HTMLButtonElement>(root, '[data-role="reset"]').addEventListener('click', () => { setInputValues(root, DEFAULT_INPUT); setMode(root, ui, DEFAULT_INPUT.mode); profileSelect.choose(DEFAULT_INPUT.profileId); render(root, ui, locale); });
+  query<HTMLButtonElement>(root, '[data-role="generate"]').addEventListener('click', () => render(root, ui, locale));
+  query<HTMLButtonElement>(root, '[data-role="calendar"]').addEventListener('click', () => downloadCalendar(createCalendarPlan({ ...readInput(root), referenceDate: todayISO() }), ui));
+  query<HTMLButtonElement>(root, '[data-role="share"]').addEventListener('click', () => { updateUrl(readInput(root)); void copyShareLink(root, window.location.href, ui); });
+  query<HTMLButtonElement>(root, '[data-role="print"]').addEventListener('click', () => window.print());
+  updateRangeLabels(root);
+  render(root, ui, locale);
+}

package/src/tool/seedStratificationCalendar/dom-views.ts

@@ -0,0 +1,130 @@
+import type { SeedStratificationCalendarUI } from './ui';
+import { celsiusToFahrenheit, type CalendarPhase, type CalendarPlan, type SeedPhaseKind, type TemperatureUnit } from './logic';
+import { evaluatePlan } from './evaluator';
+
+interface TimelineViewOptions {
+  container: HTMLElement;
+  plan: CalendarPlan;
+  ui: SeedStratificationCalendarUI;
+  locale: string;
+  today: string;
+  unit: TemperatureUnit;
+}
+
+const phaseLabels = (ui: SeedStratificationCalendarUI): Record<SeedPhaseKind, string> => ({
+  soak: ui.labelSoak,
+  warm: ui.labelWarm,
+  cold: ui.labelCold,
+  sow: ui.labelSow,
+});
+
+function makeElement<K extends keyof HTMLElementTagNameMap>(tag: K, className: string, text?: string): HTMLElementTagNameMap[K] {
+  const element = document.createElement(tag);
+  element.className = className;
+  if (text) element.textContent = text;
+  return element;
+}
+
+function statusLabel(status: string, ui: SeedStratificationCalendarUI): string {
+  if (status === 'complete') return ui.labelComplete;
+  if (status === 'sowing') return ui.labelReady;
+  if (status === 'active') return ui.labelActive;
+  return ui.labelUpcoming;
+}
+
+function makePhaseIcon(kind: SeedPhaseKind): SVGSVGElement {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('aria-hidden', 'true');
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  const paths: Record<SeedPhaseKind, string> = {
+    soak: 'M12 3C9 7 6 10 6 14a6 6 0 0 0 12 0c0-4-3-7-6-11Z',
+    warm: 'M12 4v3M12 17v3M4 12h3M17 12h3M6.3 6.3l2.1 2.1M15.6 15.6l2.1 2.1M17.7 6.3l-2.1 2.1M8.4 15.6l-2.1 2.1M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z',
+    cold: 'M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4',
+    sow: 'M12 21V11M12 15c-4 0-7-3-7-7 4 0 7 3 7 7ZM12 12c0-4 3-7 7-7 0 4-3 7-7 7Z',
+  };
+  path.setAttribute('d', paths[kind]);
+  path.setAttribute('fill', kind === 'soak' ? 'currentColor' : 'none');
+  path.setAttribute('stroke', 'currentColor');
+  path.setAttribute('stroke-linecap', 'round');
+  path.setAttribute('stroke-linejoin', 'round');
+  path.setAttribute('stroke-width', '1.7');
+  svg.append(path);
+  return svg;
+}
+
+function formatDate(value: string, locale: string): string {
+  return new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' }).format(new Date(`${value}T00:00:00Z`));
+}
+
+function temperatureText(phase: CalendarPhase, ui: SeedStratificationCalendarUI, unit: TemperatureUnit): string {
+  if (phase.minTempC === undefined || phase.maxTempC === undefined) return ui.labelSowingDay;
+  const minimumC = Math.round(phase.minTempC * 10) / 10;
+  const maximumC = Math.round(phase.maxTempC * 10) / 10;
+  const celsius = `${minimumC} to ${maximumC} °C`;
+  const fahrenheit = `${Math.round(celsiusToFahrenheit(minimumC))} to ${Math.round(celsiusToFahrenheit(maximumC))} °F`;
+  return `${ui.labelTemperature}: ${unit === 'metric' ? `${celsius} (${fahrenheit})` : `${fahrenheit} (${celsius})`}`;
+}
+
+function renderHeader(container: HTMLElement, plan: CalendarPlan, ui: SeedStratificationCalendarUI, today: string): void {
+  const labels = phaseLabels(ui);
+  const evaluation = evaluatePlan(plan, today, labels);
+  const header = makeElement('div', 'n-calendar-header');
+  const status = makeElement('span', `n-status n-status-${evaluation.status}`, statusLabel(evaluation.status, ui));
+  const action = makeElement('p', 'n-next-action');
+  let dayText = ui.labelUpcoming;
+  if (evaluation.status === 'complete') dayText = ui.labelComplete;
+  if (evaluation.status === 'active' || evaluation.status === 'sowing') dayText = `${ui.labelTodayStatus}: ${evaluation.dayNumber} ${ui.labelDayOf} ${evaluation.durationDays}`;
+  action.append(makeElement('strong', '', ui.labelNextAction), document.createTextNode(` ${evaluation.phaseLabel}, ${dayText}`));
+  header.append(status, action);
+  container.append(header);
+}
+
+function renderSummary(container: HTMLElement, plan: CalendarPlan, ui: SeedStratificationCalendarUI, locale: string): void {
+  const summary = makeElement('div', 'n-calendar-summary');
+  const start = makeElement('div', 'n-summary-major');
+  start.append(makeElement('strong', '', formatDate(plan.startDate, locale)), makeElement('span', '', ui.labelCalendarStarts));
+  const prep = makeElement('div', 'n-summary-stat');
+  prep.append(makeElement('strong', '', `${plan.totalPreparationDays}`), makeElement('span', '', `${ui.labelDuration} ${ui.labelDays}`));
+  const sowing = makeElement('div', 'n-summary-stat');
+  sowing.append(makeElement('strong', '', formatDate(plan.sowingDate, locale)), makeElement('span', '', ui.labelSowingDay));
+  summary.append(start, prep, sowing);
+  container.append(summary);
+}
+
+interface PhaseViewOptions {
+  container: HTMLElement;
+  phase: CalendarPhase;
+  index: number;
+  ui: SeedStratificationCalendarUI;
+  locale: string;
+  unit: TemperatureUnit;
+  currentPhaseIndex: number | null;
+}
+
+function renderGanttSegment(options: PhaseViewOptions): void {
+  const { container, phase, index, ui, locale, unit, currentPhaseIndex } = options;
+  const labels = phaseLabels(ui);
+  const segment = makeElement('div', `n-gantt-segment n-gantt-${phase.kind}${index === currentPhaseIndex ? ' is-active' : ''}`);
+  segment.style.flex = `${phase.durationDays} 1 0`;
+  segment.setAttribute('title', `${labels[phase.kind]}, ${formatDate(phase.startDate, locale)} to ${formatDate(phase.endDate, locale)}`);
+  segment.append(makePhaseIcon(phase.kind));
+  const segmentText = makeElement('div', 'n-gantt-text');
+  segmentText.append(makeElement('strong', '', labels[phase.kind]), makeElement('span', '', `${phase.durationDays} ${ui.labelDays}`));
+  segment.append(segmentText);
+  segment.append(makeElement('p', 'n-phase-detail', `${temperatureText(phase, ui, unit)} · ${ui.labelTechnique}: ${phase.technique}`));
+  container.append(segment);
+}
+
+export function renderTimeline(options: TimelineViewOptions): void {
+  options.container.replaceChildren();
+  renderHeader(options.container, options.plan, options.ui, options.today);
+  renderSummary(options.container, options.plan, options.ui, options.locale);
+  const heading = makeElement('h2', 'n-gantt-heading', options.ui.labelGantt);
+  options.container.append(heading);
+  const gantt = makeElement('div', 'n-gantt');
+  const evaluation = evaluatePlan(options.plan, options.today, phaseLabels(options.ui));
+  const currentPhaseIndex = evaluation.status === 'active' || evaluation.status === 'sowing' ? evaluation.phaseIndex : null;
+  options.plan.phases.forEach((phase, index) => renderGanttSegment({ container: gantt, phase, index, ui: options.ui, locale: options.locale, unit: options.unit, currentPhaseIndex }));
+  options.container.append(gantt);
+}

package/src/tool/seedStratificationCalendar/entry.ts

@@ -0,0 +1,29 @@
+import type { NatureToolEntry, ToolLocaleContent } from '../../types';
+import type { SeedStratificationCalendarUI } from './ui';
+
+export type SeedStratificationCalendarLocaleContent = ToolLocaleContent<SeedStratificationCalendarUI>;
+
+export const seedStratificationCalendar: NatureToolEntry<SeedStratificationCalendarUI> = {
+  id: 'seed-stratification-calendar',
+  icons: {
+    bg: 'mdi:calendar-clock',
+    fg: 'mdi:sprout',
+  },
+  i18n: {
+    de: async () => (await import('./i18n/de')).content,
+    en: async () => (await import('./i18n/en')).content,
+    es: async () => (await import('./i18n/es')).content,
+    fr: async () => (await import('./i18n/fr')).content,
+    id: async () => (await import('./i18n/id')).content,
+    it: async () => (await import('./i18n/it')).content,
+    ja: async () => (await import('./i18n/ja')).content,
+    ko: async () => (await import('./i18n/ko')).content,
+    nl: async () => (await import('./i18n/nl')).content,
+    pl: async () => (await import('./i18n/pl')).content,
+    pt: async () => (await import('./i18n/pt')).content,
+    ru: async () => (await import('./i18n/ru')).content,
+    sv: async () => (await import('./i18n/sv')).content,
+    tr: async () => (await import('./i18n/tr')).content,
+    zh: async () => (await import('./i18n/zh')).content,
+  },
+};

package/src/tool/seedStratificationCalendar/evaluator.ts

@@ -0,0 +1,32 @@
+import type { CalendarPlan } from './logic';
+
+export type CalendarStatus = 'upcoming' | 'active' | 'sowing' | 'complete';
+
+export interface CalendarEvaluation {
+  status: CalendarStatus;
+  phaseIndex: number;
+  phaseLabel: string;
+  dayNumber: number;
+  durationDays: number;
+}
+
+function getStatus(phaseKind: string, today: string, startDate: string): CalendarStatus {
+  if (phaseKind === 'sow') return 'sowing';
+  return today < startDate ? 'upcoming' : 'active';
+}
+
+function phaseDay(startDate: string, today: string, durationDays: number): number {
+  if (today < startDate) return 0;
+  const elapsed = Math.floor((Date.parse(`${today}T00:00:00Z`) - Date.parse(`${startDate}T00:00:00Z`)) / 86_400_000) + 1;
+  return Math.min(elapsed, durationDays);
+}
+
+export function evaluatePlan(plan: CalendarPlan, today: string, labels: Record<string, string>): CalendarEvaluation {
+  if (today > plan.sowingDate) return { status: 'complete', phaseIndex: plan.phases.length - 1, phaseLabel: labels.sow ?? 'Sow seeds', dayNumber: 1, durationDays: 1 };
+  const phaseIndex = plan.phases.findIndex((phase) => phase.startDate <= today && today <= phase.endDate);
+  const resolvedIndex = phaseIndex >= 0 ? phaseIndex : plan.activePhaseIndex;
+  const phase = plan.phases[resolvedIndex];
+  if (!phase) return { status: 'complete', phaseIndex: plan.phases.length - 1, phaseLabel: labels.sow ?? 'Sow seeds', dayNumber: 1, durationDays: 1 };
+  const status = getStatus(phase.kind, today, phase.startDate);
+  return { status, phaseIndex: resolvedIndex, phaseLabel: labels[phase.kind] ?? phase.kind, dayNumber: phaseDay(phase.startDate, today, phase.durationDays), durationDays: phase.durationDays };
+}