@jjlmoya/utils-nature 1.26.0 → 1.28.0

package/src/tool/seedStratificationCalendar/profile-select.ts

@@ -0,0 +1,43 @@
+import type { SeedStratificationCalendarUI } from './ui';
+import { profileLabels } from './profile-labels';
+
+export interface SelectParts {
+  root: HTMLElement;
+  trigger: HTMLButtonElement;
+  menu: HTMLElement;
+  choose: (id: string) => void;
+}
+
+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;
+}
+
+export function setupSelect(root: HTMLElement, ui: SeedStratificationCalendarUI, initialId: string, onSelect: (id: string) => void): SelectParts {
+  const select = query<HTMLElement>(root, '[data-role="profile-select"]');
+  const trigger = query<HTMLButtonElement>(select, '[data-select-trigger]');
+  const menu = query<HTMLElement>(select, '[data-select-menu]');
+  const labels = profileLabels(ui);
+  const choose = (id: string): void => {
+    select.dataset.value = id;
+    trigger.replaceChildren(document.createTextNode(labels[id] ?? labels.apple ?? ''));
+    const chevron = document.createElement('span');
+    chevron.className = 'n-chevron';
+    chevron.setAttribute('aria-hidden', 'true');
+    trigger.append(chevron);
+    menu.hidden = true;
+    trigger.setAttribute('aria-expanded', 'false');
+    menu.querySelectorAll<HTMLButtonElement>('[data-option]').forEach((option) => {
+      const isActive = option.dataset.option === id;
+      option.classList.toggle('is-active', isActive);
+      option.setAttribute('aria-selected', String(isActive));
+    });
+    onSelect(id);
+  };
+  menu.querySelectorAll<HTMLButtonElement>('[data-option]').forEach((option) => option.addEventListener('click', () => choose(option.dataset.option ?? initialId)));
+  trigger.addEventListener('click', () => { menu.hidden = !menu.hidden; trigger.setAttribute('aria-expanded', String(!menu.hidden)); });
+  document.addEventListener('click', (event) => { if (!select.contains(event.target as Node)) menu.hidden = true; });
+  choose(initialId);
+  return { root: select, trigger, menu, choose };
+}

package/src/tool/seedStratificationCalendar/seed-stratification-calendar.css

@@ -0,0 +1,558 @@
+.n-seed-calendar {
+  --n-ink: #25352d;
+  --n-muted: #607166;
+  --n-paper: #f5f0e6;
+  --n-card: #fffdf7;
+  --n-line: #d8d1c2;
+  --n-moss: #426c4b;
+  --n-moss-soft: #dfeadd;
+  --n-amber: #b56d29;
+  --n-coral: #b65043;
+  --n-shadow: rgba(49, 58, 44, 0.12);
+
+  display: grid;
+  grid-template-columns: minmax(280px, 0.8fr) minmax(340px, 1.2fr);
+  overflow: hidden;
+  color: var(--n-ink);
+  background: var(--n-card);
+  border: 1px solid var(--n-line);
+  border-radius: 22px;
+  box-shadow: 0 18px 42px var(--n-shadow);
+}
+.theme-dark .n-seed-calendar {
+  --n-ink: #f3eee1;
+  --n-muted: #b9c7bb;
+  --n-paper: #1f2924;
+  --n-card: #29342e;
+  --n-line: #536258;
+  --n-moss: #a4ce9d;
+  --n-moss-soft: #384c3d;
+  --n-amber: #e6a35e;
+  --n-coral: #eb8b78;
+  --n-shadow: rgba(0, 0, 0, 0.3);
+}
+.n-calendar-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: clamp(22px, 4vw, 38px);
+  background: var(--n-paper);
+}
+.n-unit-switch {
+ display: grid;
+ gap: 8px;
+}
+.n-unit-options {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ padding: 3px;
+ background: var(--n-card);
+ border: 1px solid var(--n-line);
+ border-radius: 10px;
+}
+.n-unit-button {
+ min-height: 36px;
+ color: var(--n-muted);
+ background: transparent;
+ border: 0;
+ border-radius: 7px;
+ font: inherit;
+ font-size: 0.8rem;
+ font-weight: 750;
+ cursor: pointer;
+}
+.n-unit-button.is-active {
+  color: var(--n-ink);
+  background: var(--n-moss-soft);
+}
+
+.n-mode-switch {
+  display: grid;
+  gap: 8px;
+}
+
+.n-mode-options {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+}
+
+.n-mode-button {
+  min-height: 40px;
+  padding: 0 10px;
+  color: var(--n-muted);
+  background: transparent;
+  border: 1px solid var(--n-line);
+  border-radius: 9px;
+  font: inherit;
+  font-size: 0.78rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.n-mode-button.is-active {
+  color: var(--n-ink);
+  background: var(--n-moss-soft);
+  border-color: var(--n-moss);
+}
+.n-control-block {
+ display: grid;
+ gap: 8px;
+}
+.n-field-label {
+ color: var(--n-muted);
+ font-size: 0.74rem;
+ font-weight: 750;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+.n-field, .n-select-trigger {
+ width: 100%;
+ min-height: 46px;
+ box-sizing: border-box;
+ padding: 0 14px;
+ color: var(--n-ink);
+ background: var(--n-card);
+ border: 1px solid var(--n-line);
+ border-radius: 10px;
+ font: inherit;
+}
+.n-field:focus, .n-select-trigger:focus, .n-range:focus {
+ outline: 3px solid var(--n-moss-soft);
+ outline-offset: 2px;
+ border-color: var(--n-moss);
+}
+.n-custom-select {
+ position: relative;
+}
+.n-select-trigger {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+ text-align: left;
+}
+.n-chevron {
+ width: 8px;
+ height: 8px;
+ border-right: 2px solid currentcolor;
+ border-bottom: 2px solid currentcolor;
+ transform: rotate(45deg) translateY(-2px);
+}
+.n-select-menu {
+ position: absolute;
+ z-index: 2;
+ top: calc(100% + 6px);
+ right: 0;
+ left: 0;
+ padding: 5px;
+ background: var(--n-card);
+ border: 1px solid var(--n-line);
+ border-radius: 12px;
+ box-shadow: 0 15px 30px var(--n-shadow);
+}
+.n-select-menu[hidden] {
+ display: none;
+}
+.n-select-option {
+ display: block;
+ width: 100%;
+ padding: 10px;
+ color: var(--n-ink);
+ background: transparent;
+ border: 0;
+ border-radius: 7px;
+ font: inherit;
+ text-align: left;
+ cursor: pointer;
+}
+.n-select-option:hover, .n-select-option.is-active {
+  background: var(--n-moss-soft);
+}
+
+.n-duration-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px;
+}
+.n-range-block {
+ display: grid;
+ gap: 10px;
+ padding-top: 4px;
+}
+.n-range-heading, .n-range-values, .n-control-actions, .n-calendar-header, .n-phase-date {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+}
+.n-range-values {
+ color: var(--n-moss);
+ font-size: 0.85rem;
+ font-weight: 700;
+}
+.n-range-pair {
+ display: grid;
+ gap: 4px;
+}
+.n-range {
+ width: 100%;
+ accent-color: var(--n-moss);
+}
+.n-edit-hint {
+ margin: -3px 0 0;
+ color: var(--n-muted);
+ font-size: 0.82rem;
+ line-height: 1.45;
+}
+.n-primary-button, .n-quiet-button {
+ min-height: 44px;
+ padding: 0 16px;
+ border-radius: 9px;
+ font: inherit;
+ font-weight: 750;
+ cursor: pointer;
+}
+.n-primary-button {
+ flex: 1;
+ color: #fff;
+ background: var(--n-moss);
+ border: 1px solid var(--n-moss);
+}
+.n-quiet-button {
+ color: var(--n-ink);
+ background: transparent;
+ border: 1px solid var(--n-line);
+}
+.n-error {
+ margin: 0;
+ color: var(--n-coral);
+ font-size: 0.85rem;
+}
+.n-calendar-results {
+  padding: clamp(22px, 4vw, 38px);
+  overflow-x: auto;
+}
+
+.n-empty-state {
+  margin: 0;
+  color: var(--n-muted);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.n-gantt-heading {
+  margin: 0 0 12px;
+  font-size: 0.78rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.n-gantt {
+  display: flex;
+  min-width: 640px;
+  min-height: 154px;
+  overflow: hidden;
+  border: 1px solid var(--n-line);
+  border-radius: 14px;
+}
+
+.n-gantt-segment {
+  display: flex;
+  min-width: 72px;
+  flex-direction: column;
+  gap: 7px;
+  padding: 14px;
+  color: var(--n-ink);
+  border-right: 1px solid var(--n-card);
+}
+
+.n-gantt-segment:last-child {
+  border-right: 0;
+}
+
+.n-gantt-segment svg {
+  width: 22px;
+  height: 22px;
+}
+
+.n-gantt-text {
+  display: grid;
+  gap: 2px;
+}
+
+.n-gantt-text strong {
+  font-size: 0.82rem;
+}
+
+.n-gantt-text span {
+  font-size: 0.7rem;
+  opacity: 0.78;
+}
+
+.n-gantt-segment .n-phase-detail {
+  margin-top: auto;
+  color: inherit;
+  font-size: 0.7rem;
+  line-height: 1.35;
+}
+
+.n-gantt-soak, .n-gantt-warm {
+  background: #f2d19b;
+}
+
+.n-gantt-cold {
+  background: #b9d5e7;
+}
+
+.n-gantt-sow {
+  background: #b9d6a8;
+}
+
+.theme-dark .n-gantt-soak, .theme-dark .n-gantt-warm {
+  color: #2c2418;
+  background: #d6a65e;
+}
+
+.theme-dark .n-gantt-cold {
+  color: #17262e;
+  background: #83b3cc;
+}
+
+.theme-dark .n-gantt-sow {
+  color: #1d2b1d;
+  background: #8fbf7e;
+}
+
+.n-gantt-segment.is-active {
+  outline: 3px solid var(--n-ink);
+  outline-offset: -3px;
+}
+
+.n-calendar-actions {
+  display: flex;
+  grid-column: 1 / -1;
+  align-items: center;
+  gap: 10px;
+  padding: 0 clamp(22px, 4vw, 38px) 22px;
+}
+
+.n-secondary-button {
+  min-height: 38px;
+  padding: 0 12px;
+  color: var(--n-ink);
+  background: transparent;
+  border: 1px solid var(--n-line);
+  border-radius: 8px;
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.n-secondary-button:hover, .n-secondary-button:focus-visible {
+  background: var(--n-moss-soft);
+}
+
+.n-share-status {
+  color: var(--n-moss);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.n-print-label {
+  display: none;
+}
+.n-calendar-header {
+ padding-bottom: 18px;
+ border-bottom: 1px solid var(--n-line);
+}
+.n-status {
+ padding: 6px 9px;
+ border-radius: 999px;
+ font-size: 0.7rem;
+ font-weight: 800;
+ letter-spacing: 0.06em;
+}
+.n-status-upcoming {
+ color: var(--n-amber);
+ background: color-mix(in srgb, var(--n-amber) 16%, transparent);
+}
+.n-status-active, .n-status-sowing {
+ color: var(--n-moss);
+ background: var(--n-moss-soft);
+}
+.n-status-complete {
+ color: var(--n-coral);
+ background: color-mix(in srgb, var(--n-coral) 15%, transparent);
+}
+.n-next-action {
+ margin: 0;
+ color: var(--n-muted);
+ font-size: 0.82rem;
+ text-align: right;
+}
+.n-next-action strong {
+ color: var(--n-ink);
+}
+.n-calendar-summary {
+ display: grid;
+ grid-template-columns: 1.4fr 0.8fr 1fr;
+ gap: 12px;
+ padding: 24px 0;
+}
+.n-summary-major, .n-summary-stat {
+ display: grid;
+ gap: 4px;
+}
+.n-summary-major strong {
+ color: var(--n-moss);
+ font-size: clamp(1.35rem, 3vw, 2rem);
+ line-height: 1;
+}
+.n-summary-stat strong {
+ font-size: 1.05rem;
+}
+.n-summary-major span, .n-summary-stat span {
+ color: var(--n-muted);
+ font-size: 0.76rem;
+ line-height: 1.3;
+}
+.n-phase-list {
+ display: grid;
+ gap: 0;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+.n-phase {
+ position: relative;
+ display: grid;
+ grid-template-columns: 34px 1fr;
+ gap: 12px;
+ padding: 0 0 22px;
+}
+.n-phase:not(:last-child)::after {
+ position: absolute;
+ top: 29px;
+ bottom: 0;
+ left: 16px;
+ width: 1px;
+ background: var(--n-line);
+ content: '';
+}
+.n-phase-marker {
+ position: relative;
+ z-index: 1;
+ display: grid;
+ place-items: center;
+ width: 32px;
+ height: 32px;
+ color: var(--n-muted);
+ background: var(--n-card);
+ border: 1px solid var(--n-line);
+ border-radius: 50%;
+ font-size: 0.8rem;
+ font-weight: 800;
+}
+.n-phase.is-active .n-phase-marker {
+ color: #fff;
+ background: var(--n-moss);
+ border-color: var(--n-moss);
+}
+.n-phase-content {
+ padding: 3px 0 0;
+}
+.n-phase-content h3 {
+ margin: 0;
+ font-size: 1rem;
+}
+.n-phase-date {
+ justify-content: flex-start;
+ margin: 5px 0 0;
+ color: var(--n-moss);
+ font-size: 0.85rem;
+ font-weight: 700;
+}
+.n-phase-detail {
+ margin: 5px 0 0;
+ color: var(--n-muted);
+ font-size: 0.78rem;
+}
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ clip-path: inset(50%);
+ white-space: nowrap;
+}
+
+@media (max-width: 760px) {
+  .n-seed-calendar {
+ grid-template-columns: 1fr;
+}
+  .n-duration-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .n-calendar-actions {
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 420px) {
+  .n-calendar-header {
+ align-items: flex-start;
+ flex-direction: column;
+}
+  .n-next-action {
+ text-align: left;
+}
+  .n-calendar-summary {
+ grid-template-columns: 1fr 1fr;
+}
+  .n-summary-major {
+    grid-column: 1 / -1;
+  }
+}
+
+@media print {
+  @page {
+    size: 340px 208px;
+    margin: 0;
+  }
+
+  body * {
+    visibility: hidden;
+  }
+
+  .n-seed-calendar, .n-seed-calendar * {
+    visibility: visible;
+  }
+
+  .n-seed-calendar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 340px;
+    min-height: 208px;
+    color: #111;
+    background: #fff;
+    border: 1px solid #111;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .n-calendar-controls, .n-calendar-results, .n-calendar-actions {
+    display: none;
+  }
+
+  .n-print-label {
+    display: grid;
+    gap: 4px;
+    padding: 30px;
+    font-size: 12px;
+  }
+}

package/src/tool/seedStratificationCalendar/seo.astro

@@ -0,0 +1,10 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { seedStratificationCalendar } from './index';
+import type { KnownLocale } from '../../types';
+
+const { locale = 'en' } = Astro.props as { locale?: KnownLocale };
+const content = await seedStratificationCalendar.i18n[locale]?.();
+---
+
+{content?.seo?.length ? <SEORenderer content={{ locale, sections: content.seo }} /> : null}

package/src/tool/seedStratificationCalendar/storage.ts

@@ -0,0 +1,27 @@
+import type { CalendarInput, TemperatureUnit } from './logic';
+
+const STORAGE_KEY = 'jjlmoya-seed-stratification-calendar';
+
+export interface CalendarState {
+  input: CalendarInput;
+  unit: TemperatureUnit;
+}
+
+export function loadCalendarState(fallback: CalendarInput): CalendarState {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return { input: fallback, unit: 'metric' };
+    const stored = JSON.parse(raw) as Partial<CalendarState> & Partial<CalendarInput> & { sowingDate?: string };
+    const legacyInput = stored.sowingDate ? { ...fallback, mode: 'sowing-date' as const, anchorDate: stored.sowingDate } : fallback;
+    const input = stored.input ? { ...fallback, ...stored.input } : { ...legacyInput, ...stored };
+    return { input, unit: stored.unit === 'imperial' ? 'imperial' : 'metric' };
+  } catch {
+    return { input: fallback, unit: 'metric' };
+  }
+}
+
+export function saveCalendarState(input: CalendarInput, unit: TemperatureUnit): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify({ input, unit }));
+  } catch {}
+}

package/src/tool/seedStratificationCalendar/ui.ts

@@ -0,0 +1,66 @@
+export interface SeedStratificationCalendarUI extends Record<string, string> {
+  labelProfile: string;
+  labelMode: string;
+  labelModeSowing: string;
+  labelModeReady: string;
+  labelSowingDate: string;
+  labelReadyDate: string;
+  labelSoakDays: string;
+  labelWarmDays: string;
+  labelColdDays: string;
+  labelColdRange: string;
+  labelUnits: string;
+  labelMetric: string;
+  labelImperial: string;
+  labelFrom: string;
+  labelTo: string;
+  labelGenerate: string;
+  labelReset: string;
+  labelAddCalendar: string;
+  labelShare: string;
+  labelCopied: string;
+  labelPrint: string;
+  labelTechnique: string;
+  labelTodayStatus: string;
+  labelDayOf: string;
+  labelGantt: string;
+  labelTimeline: string;
+  labelNextAction: string;
+  labelCalendarStarts: string;
+  labelSowingDay: string;
+  labelDuration: string;
+  labelDays: string;
+  labelTemperature: string;
+  labelReady: string;
+  labelUpcoming: string;
+  labelActive: string;
+  labelComplete: string;
+  labelEditHint: string;
+  labelWarm: string;
+  labelCold: string;
+  labelSoak: string;
+  labelSow: string;
+  noteApple: string;
+  noteLavender: string;
+  noteMilkweed: string;
+  noteRose: string;
+  profileApple: string;
+  profileLavender: string;
+  profileMilkweed: string;
+  profileRose: string;
+  profileStrawberry: string;
+  profilePeach: string;
+  profileCherry: string;
+  profilePear: string;
+  profilePoppy: string;
+  profileSunflower: string;
+  profileTomato: string;
+  profileBasil: string;
+  instructionSoak: string;
+  instructionWarm: string;
+  instructionCold: string;
+  instructionSow: string;
+  emptyState: string;
+  warningDate: string;
+  warningTemperature: string;
+}

package/src/tools.ts

@@ -7,6 +7,7 @@ import { DIGITAL_CARBON_TOOL } from './tool/digitalCarbon/index';
 import { URBAN_GARDEN_PLANNER_TOOL } from './tool/urbanGardenPlanner/index';
 import { COMPOST_BIN_VOLUME_RATIO_CALCULATOR_TOOL } from './tool/compostBinVolumeRatioCalculator/index';
 import { WILDLIFE_CAMERA_TRAP_EFFORT_PLANNER_TOOL } from './tool/wildlifeCameraTrapEffortPlanner/index';
+import { SEED_STRATIFICATION_CALENDAR_TOOL } from './tool/seedStratificationCalendar/index';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   CRICKET_THERMOMETER_TOOL,
@@ -15,5 +16,6 @@ export const ALL_TOOLS: ToolDefinition[] = [
   DIGITAL_CARBON_TOOL,
   URBAN_GARDEN_PLANNER_TOOL,
   COMPOST_BIN_VOLUME_RATIO_CALCULATOR_TOOL,
-  WILDLIFE_CAMERA_TRAP_EFFORT_PLANNER_TOOL
+  WILDLIFE_CAMERA_TRAP_EFFORT_PLANNER_TOOL,
+  SEED_STRATIFICATION_CALENDAR_TOOL
 ];