@jjlmoya/utils-nature 1.25.0 → 1.26.0

package/src/tool/wildlifeCameraTrapEffortPlanner/wildlife-camera-trap-effort-planner.css

@@ -0,0 +1,442 @@
+.wctep-root {
+  --n-ink: #24312d;
+  --n-muted: #64716a;
+  --n-paper: #f5f0e6;
+  --n-surface: #fffdf8;
+  --n-surface-alt: #e9efe7;
+  --n-line: #c9d1c5;
+  --n-accent: #bd5c3d;
+  --n-accent-soft: #f2d9c9;
+  --n-green: #456b55;
+  --n-map: #dce8da;
+  --n-map-line: #a4b9a3;
+  --n-focus: #315e83;
+
+  color: var(--n-ink);
+  font: 1rem Georgia, 'Times New Roman', serif;
+}
+
+.theme-dark .wctep-root {
+  --n-ink: #edf1e9;
+  --n-muted: #b4c0b5;
+  --n-paper: #1b2421;
+  --n-surface: #25302b;
+  --n-surface-alt: #303c35;
+  --n-line: #526158;
+  --n-accent: #e48761;
+  --n-accent-soft: #553a30;
+  --n-green: #9dc39f;
+  --n-map: #2d4135;
+  --n-map-line: #5c8067;
+  --n-focus: #99c8ed;
+}
+
+.wctep-shell {
+  overflow: hidden;
+  border: 1px solid var(--n-line);
+  border-radius: 22px;
+  background: var(--n-paper);
+  box-shadow: 8px 10px 0 var(--n-accent-soft);
+}
+
+.wctep-controls,
+.wctep-reading,
+.wctep-review,
+.wctep-notes {
+  padding: clamp(1.1rem, 3vw, 2rem);
+}
+
+.wctep-controls,
+.wctep-reading,
+.wctep-review {
+  border-bottom: 1px solid var(--n-line);
+}
+
+.wctep-control-topline,
+.wctep-reading-head,
+.wctep-map-key {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.wctep-mark,
+.wctep-section-label,
+.wctep-note-label {
+  color: var(--n-green);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.wctep-unit-switch {
+  display: inline-flex;
+  padding: 3px;
+  border: 1px solid var(--n-line);
+  border-radius: 999px;
+  background: var(--n-surface);
+}
+
+.wctep-unit-switch button,
+.wctep-preset-row button {
+  border: 0;
+  color: var(--n-muted);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.wctep-unit-switch button {
+  padding: 0.4rem 0.7rem;
+  border-radius: 999px;
+  font-size: 0.72rem;
+  font-weight: 800;
+}
+
+.wctep-unit-switch button[aria-pressed='true'] {
+  color: var(--n-surface);
+  background: var(--n-green);
+}
+
+.wctep-fields {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.wctep-field-wide {
+  grid-column: span 2;
+}
+
+.wctep-field {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.wctep-label {
+  min-height: 2.4em;
+  font-size: 0.83rem;
+  font-weight: 750;
+}
+
+.wctep-input-line {
+  display: flex;
+  align-items: center;
+  min-height: 3rem;
+  border-bottom: 2px solid var(--n-green);
+  background: var(--n-surface);
+}
+
+.wctep-input-line input {
+  width: 100%;
+  min-width: 0;
+  padding: 0.7rem 0.75rem;
+  border: 0;
+  outline: 0;
+  color: var(--n-ink);
+  background: transparent;
+  font: 1.05rem Georgia, 'Times New Roman', serif;
+}
+
+.wctep-input-line input:focus-visible,
+.wctep-unit-switch button:focus-visible,
+.wctep-preset-row button:focus-visible {
+  outline: 3px solid var(--n-focus);
+  outline-offset: 2px;
+}
+
+.wctep-input-line > span {
+  padding-right: 0.75rem;
+  color: var(--n-muted);
+  font-size: 0.76rem;
+  white-space: nowrap;
+}
+
+.wctep-help,
+.wctep-caption,
+.wctep-review-copy p,
+.wctep-notes p,
+.wctep-status-note {
+  color: var(--n-muted);
+  font-size: 0.78rem;
+  line-height: 1.5;
+}
+
+.wctep-presets {
+  display: grid;
+  gap: 0.65rem;
+  margin-top: 1.5rem;
+}
+
+.wctep-preset-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+
+.wctep-preset-row button {
+  padding: 0.55rem 0.85rem;
+  border: 1px solid var(--n-line);
+  border-radius: 7px;
+  color: var(--n-ink);
+  background: var(--n-surface);
+  font-size: 0.78rem;
+}
+
+.wctep-preset-row button:hover {
+  border-color: var(--n-accent);
+  color: var(--n-accent);
+}
+
+.wctep-reading {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(15rem, 0.75fr);
+  gap: clamp(1.2rem, 4vw, 2.5rem);
+  background: var(--n-surface);
+}
+
+.wctep-map-column {
+  min-width: 0;
+}
+
+.wctep-status {
+  padding: 0.45rem 0.7rem;
+  border-radius: 99px;
+  color: var(--n-surface);
+  background: var(--n-accent);
+  font-size: 0.72rem;
+  font-weight: 800;
+  text-align: right;
+}
+
+.wctep-map {
+  margin-top: 1rem;
+  border: 1px solid var(--n-map-line);
+  background: var(--n-map);
+}
+
+.wctep-map svg {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1.45;
+}
+
+.wctep-contour,
+.wctep-route {
+  fill: none;
+  stroke: var(--n-map-line);
+  stroke-width: 0.7;
+}
+
+.wctep-route {
+  stroke: var(--n-accent);
+  stroke-dasharray: 2 2;
+  stroke-width: 1.1;
+}
+
+.wctep-cell {
+  fill: var(--n-surface);
+  fill-opacity: 0.5;
+  stroke: var(--n-green);
+  stroke-width: 0.6;
+  stroke-dasharray: 1 1;
+}
+
+.wctep-station-dot {
+  fill: var(--n-accent);
+}
+
+.wctep-station text,
+.wctep-overflow,
+.wctep-north-label {
+  fill: var(--n-ink);
+  font-size: 3px;
+  font-weight: 800;
+}
+
+.wctep-north {
+  fill: none;
+  stroke: var(--n-ink);
+  stroke-width: 0.7;
+}
+
+.wctep-map-key {
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin-top: 0.7rem;
+  color: var(--n-muted);
+  font-size: 0.72rem;
+}
+
+.wctep-map-key strong {
+  margin-left: auto;
+  color: var(--n-accent);
+  font-size: 1rem;
+}
+
+.wctep-key-station,
+.wctep-key-cell {
+  display: inline-block;
+  width: 0.7rem;
+  height: 0.7rem;
+}
+
+.wctep-key-station {
+  border-radius: 50%;
+  background: var(--n-accent);
+}
+
+.wctep-key-cell {
+  border: 1px dashed var(--n-green);
+}
+
+.wctep-caption {
+  margin: 0.7rem 0 0;
+}
+
+.wctep-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-content: start;
+  border-left: 1px solid var(--n-line);
+}
+
+.wctep-metric {
+  display: grid;
+  gap: 0.35rem;
+  padding: 0.85rem 1rem;
+  border-bottom: 1px solid var(--n-line);
+}
+
+.wctep-metric:nth-child(odd) {
+  border-right: 1px solid var(--n-line);
+}
+
+.wctep-metric span {
+  color: var(--n-muted);
+  font-size: 0.7rem;
+  line-height: 1.3;
+}
+
+.wctep-metric strong {
+  overflow-wrap: anywhere;
+  color: var(--n-ink);
+  font-size: clamp(1.25rem, 3vw, 1.8rem);
+}
+
+.wctep-metric-major {
+  grid-column: span 2;
+  background: var(--n-accent-soft);
+}
+
+.wctep-metric-wide {
+  grid-column: span 2;
+}
+
+.wctep-review {
+  display: grid;
+  grid-template-columns: minmax(14rem, 0.75fr) minmax(0, 1.25fr);
+  gap: 2rem;
+  background: var(--n-surface-alt);
+}
+
+.wctep-review-copy p {
+  max-width: 30rem;
+  margin: 0.7rem 0 0;
+}
+
+.wctep-review ol {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.wctep-review li {
+  display: grid;
+  align-content: space-between;
+  min-height: 4.5rem;
+  padding: 0.7rem;
+  border-left: 3px solid var(--n-accent);
+  background: var(--n-surface);
+}
+
+.wctep-review li strong {
+  color: var(--n-ink);
+  font-size: 0.8rem;
+}
+
+.wctep-review li span {
+  color: var(--n-muted);
+  font-size: 0.7rem;
+  line-height: 1.35;
+}
+
+.wctep-notes {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem 2rem;
+}
+
+.wctep-notes p {
+  margin: 0.5rem 0 0;
+}
+
+.wctep-status-note {
+  grid-column: 1 / -1;
+  margin: 0;
+  padding-top: 1rem;
+  border-top: 1px solid var(--n-line);
+  color: var(--n-ink);
+}
+
+@media (max-width: 850px) {
+  .wctep-fields {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .wctep-field-wide {
+    grid-column: span 2;
+  }
+
+  .wctep-reading,
+  .wctep-review {
+    grid-template-columns: 1fr;
+  }
+
+  .wctep-metrics {
+    border-top: 1px solid var(--n-line);
+    border-left: 0;
+  }
+}
+
+@media (max-width: 520px) {
+  .wctep-control-topline,
+  .wctep-reading-head {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .wctep-fields,
+  .wctep-notes {
+    grid-template-columns: 1fr;
+  }
+
+  .wctep-field-wide,
+  .wctep-status-note {
+    grid-column: auto;
+  }
+
+  .wctep-status {
+    text-align: left;
+  }
+
+  .wctep-review ol {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

package/src/tools.ts

@@ -6,6 +6,7 @@ import { RAIN_HARVESTER_TOOL } from './tool/rainHarvester/index';
 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';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   CRICKET_THERMOMETER_TOOL,
@@ -13,5 +14,6 @@ export const ALL_TOOLS: ToolDefinition[] = [
   RAIN_HARVESTER_TOOL,
   DIGITAL_CARBON_TOOL,
   URBAN_GARDEN_PLANNER_TOOL,
-  COMPOST_BIN_VOLUME_RATIO_CALCULATOR_TOOL
+  COMPOST_BIN_VOLUME_RATIO_CALCULATOR_TOOL,
+  WILDLIFE_CAMERA_TRAP_EFFORT_PLANNER_TOOL
 ];

package/src/types.ts

@@ -1,5 +1,6 @@
 import type { SEOSection } from '@jjlmoya/utils-shared';
 import type { WithContext, Thing } from 'schema-dts';
+import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
 
 export type { SEOSection };
 
@@ -46,7 +47,7 @@ export type LocaleLoader<T> = () => Promise<T>;
 
 export type LocaleMap<T> = Partial<Record<KnownLocale, LocaleLoader<T>>>;
 
-export interface NatureToolEntry<TUI = Record<string, string>> {
+export interface NatureToolEntry<TUI = unknown> {
   id: string;
   icons: {
     bg: string;
@@ -57,14 +58,14 @@ export interface NatureToolEntry<TUI = Record<string, string>> {
 
 export interface NatureCategoryEntry {
   icon: string;
-  tools: NatureToolEntry<Record<string, string>>[];
+  tools: NatureToolEntry[];
   i18n: LocaleMap<CategoryLocaleContent>;
 }
 
 export interface ToolDefinition {
   entry: NatureToolEntry;
-  Component: unknown;
-  SEOComponent: unknown;
-  BibliographyComponent: unknown;
+  Component: () => Promise<{ default: AstroComponentFactory }>;
+  SEOComponent: () => Promise<{ default: AstroComponentFactory }>;
+  BibliographyComponent: () => Promise<{ default: AstroComponentFactory }>;
 }