@jjlmoya/utils-pets 1.17.0 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-pets",
-    "version": "1.17.0",
+    "version": "1.19.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -1,10 +1,12 @@
 import type { PetCategoryEntry } from '../types';
 import { petAge } from '../tool/petAge/entry';
 import { petRation } from '../tool/petRation/entry';
+import { petGestation } from '../tool/petGestation/entry';
+import { petToxicity } from '../tool/petToxicity/entry';
 
 export const petsCategory: PetCategoryEntry = {
   icon: 'mdi:paw',
-  tools: [petAge, petRation],
+  tools: [petAge, petRation, petGestation, petToxicity],
   i18n: {
     en: () => import('./i18n/en').then((m) => m.content),
     es: () => import('./i18n/es').then((m) => m.content),

package/src/data.ts

@@ -1,9 +1,13 @@
 export { petsCategory } from './category';
 export { petAge } from './tool/petAge';
 export { petRation } from './tool/petRation';
+export { petGestation } from './tool/petGestation';
+export { petToxicity } from './tool/petToxicity';
 
 export type { PetAgeUI, PetAgeLocaleContent } from './tool/petAge';
 export type { PetRationUI, PetRationLocaleContent } from './tool/petRation';
+export type { PetGestationUI, PetGestationLocaleContent } from './tool/petGestation';
+export type { PetToxicityUI, PetToxicityLocaleContent } from './tool/petToxicity';
 
 export type {
   KnownLocale,

package/src/entries.ts

@@ -2,7 +2,11 @@ export { petAge } from './tool/petAge/entry';
 export type { PetAgeUI, PetAgeLocaleContent } from './tool/petAge/entry';
 export { petRation } from './tool/petRation/entry';
 export type { PetRationUI, PetRationLocaleContent } from './tool/petRation/entry';
+export { petToxicity } from './tool/petToxicity/entry';
+export type { PetToxicityUI, PetToxicityLocaleContent } from './tool/petToxicity/entry';
 export { petsCategory } from './category';
 import { petAge } from './tool/petAge/entry';
 import { petRation } from './tool/petRation/entry';
-export const ALL_ENTRIES = [petAge, petRation];
+import { petGestation } from './tool/petGestation/entry';
+import { petToxicity } from './tool/petToxicity/entry';
+export const ALL_ENTRIES = [petAge, petRation, petGestation, petToxicity];

package/src/index.ts

@@ -1,5 +1,6 @@
-export * from './tool/petAge';
-export * from './tool/petRation';
+export { petAge, PET_AGE_TOOL } from './tool/petAge';
+export { petRation, PET_RATION_TOOL } from './tool/petRation';
+export { petGestation, PET_GESTATION_TOOL } from './tool/petGestation';
 
 export { petsCategory } from './category';
 export const PetsCategorySEO = () => import('./category/seo.astro').then((m) => m.default);

package/src/layouts/PreviewLayout.astro

@@ -87,7 +87,9 @@ const {
   }
 
   main {
+    min-width: 0;
     padding: 0 2rem;
+    width: 100%;
   }
 
   .page-wrapper {

package/src/pages/[locale]/[slug].astro

@@ -15,7 +15,8 @@ export async function getStaticPaths() {
   const paths = [];
 
   for (const { entry, Component: lazyComp } of ALL_TOOLS) {
-    const { default: Component } = await lazyComp();
+    const componentLoader = lazyComp as () => Promise<{ default: ToolComponent }>;
+    const { default: Component } = await componentLoader();
     const localeEntries = Object.entries(entry.i18n) as [
       KnownLocale,
       () => Promise<ToolLocaleContent>,
@@ -71,7 +72,7 @@ interface NavItem {
 }
 
 interface Props {
-  Component: unknown;
+  Component: ToolComponent;
   locale: KnownLocale;
   content: ToolLocaleContent;
   localeUrls: Partial<Record<KnownLocale, string>>;
@@ -79,11 +80,14 @@ interface Props {
   englishSlug: string;
 }
 
-const { Component, locale, content, localeUrls, allToolsNav, englishSlug } = Astro.props;
+type ToolComponent = (props: { ui: Record<string, string> }) => unknown;
+
+const { Component, locale, content, localeUrls, allToolsNav, englishSlug } = Astro.props as Props;
 
 const cssFiles = import.meta.glob("../../tool/*/*.css", { query: "?raw", import: "default" });
 const cssKey = Object.keys(cssFiles).find((k) => k.endsWith(`/${englishSlug}.css`));
-const toolCss = cssKey ? await cssFiles[cssKey]() as string : "";
+const cssLoader = cssKey ? cssFiles[cssKey] : undefined;
+const toolCss = cssLoader ? await cssLoader() as string : "";
 
 const seoContent: UtilitySEOContent = { locale, sections: content.seo ?? [] };
 
@@ -132,7 +136,7 @@ const titleBase = words.slice(1).join(" ") || "";
     </section>
 
     <section class="section-faq">
-      <FAQSection items={content.faq} inLanguage={locale} title={content.faqTitle} />
+      <FAQSection items={content.faq} />
     </section>
 
     <section class="section-bibliography">
@@ -146,17 +150,22 @@ const titleBase = words.slice(1).join(" ") || "";
     display: flex;
     flex-direction: column;
     gap: 2rem;
+    min-width: 0;
+    width: 100%;
   }
 
   .section-tool {
     max-width: 1200px;
     margin: 0 auto;
+    min-width: 0;
     width: 100%;
   }
 
   .section-seo,
   .section-faq,
   .section-bibliography {
+    min-width: 0;
+    width: 100%;
     padding-top: 2rem;
     border-top: 1px solid var(--border-color);
   }

package/src/tests/diacritics_density.test.ts

@@ -96,7 +96,7 @@ describe('Diacritics density validation', () => {
           if (!loader) return;
 
           const content = await loader();
-          const text = normalizeText(translatableContent(content as Record<string, unknown>));
+          const text = normalizeText(translatableContent(content as unknown as Record<string, unknown>));
           const rule = DIACRITIC_RULES[typedLocale];
           const letters = letterCount(text);
           const matches = diacriticCount(text, typedLocale);

package/src/tests/faq_count.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import * as DATA from '../data';
 
-const TOOLS = [DATA.petAge, DATA.petRation];
+const TOOLS = [DATA.petAge, DATA.petRation, DATA.petGestation, DATA.petToxicity];
 
 describe('FAQ Content Validation', () => {
   TOOLS.forEach((entry) => {

package/src/tests/inverted_punctuation.test.ts

@@ -60,7 +60,7 @@ describe('Inverted punctuation validation', () => {
 
           const rule = INVERTED_PUNCTUATION_LOCALES[typedLocale];
           const content = await loader();
-          const strings = translatableStrings(content as Record<string, unknown>);
+          const strings = translatableStrings(content as unknown as Record<string, unknown>);
           const missingQuestions = strings.flatMap((text) =>
             findMissingInvertedMarks(text, rule.questionStart, rule.questionEnd)
           );

package/src/tests/locale_completeness.test.ts

@@ -26,7 +26,6 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(2);
+    expect(ALL_TOOLS.length).toBe(4);
   });
 });
-

package/src/tests/script_density.test.ts

@@ -73,7 +73,7 @@ describe('Native script density validation', () => {
 
           const content = await loader();
           const rule = SCRIPT_RULES[typedLocale];
-          const text = normalizeText(translatableContent(content as Record<string, unknown>));
+          const text = normalizeText(translatableContent(content as unknown as Record<string, unknown>));
           const letters = letterCount(text);
           const matches = scriptCount(text, typedLocale);
           const ratio = scriptRatio(text, typedLocale);

package/src/tests/seo_translation_completeness.test.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+
+const ASIAN_LOCALES = ['ja', 'ko', 'zh'];
+
+function getSimpleSectionLength(section: any): number {
+  if (section.type === 'title') return section.text ? section.text.length : 0;
+  if (section.type === 'paragraph') return section.html ? section.html.replace(/<[^>]*>/g, '').length : 0;
+  if (section.type === 'list') return section.items ? section.items.join('').length : 0;
+  return 0;
+}
+
+function getComplexSectionLength(section: any): number {
+  if (section.type === 'diagnostic' || section.type === 'tip') {
+    return (section.title ? section.title.length : 0) + (section.html ? section.html.replace(/<[^>]*>/g, '').length : 0);
+  }
+  if (section.type === 'table') {
+    return ((section.headers || []).join('').length) + ((section.rows || []).flat().join('').length);
+  }
+  return 0;
+}
+
+function getSectionLength(section: any): number {
+  return getSimpleSectionLength(section) || getComplexSectionLength(section);
+}
+
+function calculateSeoTextLength(seoSections: any[]): number {
+  return seoSections.reduce((acc, section) => acc + getSectionLength(section), 0);
+}
+
+function checkLocaleSeoLength(toolId: string, locale: string, localeLen: number, enLen: number): void {
+  const isAsian = ASIAN_LOCALES.includes(locale);
+  const minLength = Math.floor(enLen * (isAsian ? 0.25 : 0.70));
+  const msgType = isAsian ? 'suspiciously short' : 'truncated/lazy';
+
+  expect(
+    localeLen,
+    `[LAZY SEO TRANSLATION] Tool "${toolId}" locale "${locale}" SEO text is ${msgType} (${localeLen} chars vs EN ${enLen} chars, expected min ${minLength})`,
+  ).toBeGreaterThanOrEqual(minLength);
+}
+
+async function auditSingleLocale(toolId: string, locale: string, loader: any, enSeoLength: number): Promise<void> {
+  if (locale === 'en' || !loader) return;
+  const content = await loader();
+  if (!content.seo || !Array.isArray(content.seo)) return;
+
+  checkLocaleSeoLength(toolId, locale, calculateSeoTextLength(content.seo), enSeoLength);
+}
+
+describe('SEO Translation Completeness & Laziness Audit', () => {
+  ALL_TOOLS.forEach(({ entry }) => {
+    describe(`Tool: ${entry.id}`, () => {
+      it('should not have lazy or truncated SEO content compared to English reference', async () => {
+        const enLoader = entry.i18n['en' as keyof typeof entry.i18n];
+        if (!enLoader) return;
+
+        const enContent = await enLoader();
+        if (!enContent.seo || !Array.isArray(enContent.seo)) return;
+
+        const enSeoLength = calculateSeoTextLength(enContent.seo);
+
+        for (const [locale, loader] of Object.entries(entry.i18n)) {
+          await auditSingleLocale(entry.id, locale, loader, enSeoLength);
+        }
+      });
+    });
+  });
+});
+

package/src/tests/title_quality.test.ts

@@ -41,6 +41,7 @@ describe('Project Titles - Separator Validation', () => {
       let match;
       while ((match = pattern.exec(content)) !== null) {
         const title = match[1];
+        if (!title) continue;
         if (title.includes('|') || title.includes('-')) {
           findings.push(title);
         }

package/src/tests/tool_validation.test.ts

@@ -71,7 +71,7 @@ describe('Tool Validation Suite', () => {
               expect(content.slug).toMatch(/^[a-z0-9]+(-[a-z0-9]+)*$/);
 
               if (locale === 'es') {
-                const validSlugs = ['calculadora-edad-mascotas', 'calculadora-racion-diaria-mascotas'];
+                const validSlugs = ['calculadora-edad-mascotas', 'calculadora-racion-diaria-mascotas', 'calculadora-gestacion-mascotas', 'buscador-alimentos-toxicos-perros-gatos'];
                 expect(validSlugs).toContain(content.slug);
               }
             });
@@ -96,12 +96,12 @@ describe('Tool Validation Suite', () => {
   });
 
   describe('Library Registration', () => {
-    it('should have 2 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(2);
+    it('should have 4 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(4);
     });
 
     it('should have all tools in petsCategory', () => {
-      expect(petsCategory.tools.length).toBe(2);
+      expect(petsCategory.tools.length).toBe(4);
       ALL_TOOLS.forEach(({ entry }) => {
         const exists = petsCategory.tools.some((t: any) => t.id === entry.id);
         expect(exists).toBe(true);

package/src/tests/translation_copy.test.ts

@@ -91,6 +91,19 @@ function copySimilarity(left: string, right: string): number {
   return (2 * shared) / (leftTotal + rightTotal);
 }
 
+function findViolations(locales: string[], corpora: Map<string, string>): string[] {
+  const violations: string[] = [];
+  for (let leftIndex = 0; leftIndex < locales.length; leftIndex += 1) {
+    for (let rightIndex = leftIndex + 1; rightIndex < locales.length; rightIndex += 1) {
+      const left = locales[leftIndex] ?? '';
+      const right = locales[rightIndex] ?? '';
+      const similarity = copySimilarity(corpora.get(left) ?? '', corpora.get(right) ?? '');
+      if (similarity >= COPY_THRESHOLD) violations.push(`${left} ↔ ${right}: ${(similarity * 100).toFixed(1)}%`);
+    }
+  }
+  return violations;
+}
+
 describe('Locales must not copy another locale wholesale', () => {
   ALL_ENTRIES.forEach((entry) => {
     it(`${entry.id} is not at least ${COPY_THRESHOLD * 100}% identical to another locale`, async () => {
@@ -102,23 +115,9 @@ describe('Locales must not copy another locale wholesale', () => {
       }
 
       const locales = [...corpora.keys()];
-      const violations: string[] = [];
-
-      for (let leftIndex = 0; leftIndex < locales.length; leftIndex += 1) {
-        for (let rightIndex = leftIndex + 1; rightIndex < locales.length; rightIndex += 1) {
-          const left = locales[leftIndex];
-          const right = locales[rightIndex];
-          const similarity = copySimilarity(corpora.get(left) ?? '', corpora.get(right) ?? '');
-
-          if (similarity >= COPY_THRESHOLD) {
-            violations.push(`${left} ↔ ${right}: ${(similarity * 100).toFixed(1)}%`);
-          }
-        }
-      }
+      const violations = findViolations(locales, corpora);
 
       expect(violations, `Locale copy threshold exceeded in ${entry.id}`).toEqual([]);
     });
   });
 });
-
-

package/src/tool/petAge/index.ts

@@ -1,3 +1,4 @@
+import type { ToolDefinition } from '../../types';
 import { petAge } from './entry';
 export * from './entry';
 export const PET_AGE_TOOL: ToolDefinition = {

package/src/tool/petGestation/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/petGestation/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'MSD Veterinary Manual: Whelping and Queening in Bitches and Queens',
+    url: 'https://www.msdvetmanual.com/management-and-nutrition/management-of-reproduction-dogs-and-cats/whelping-and-queening-in-bitches-and-queens',
+  },
+  {
+    name: 'MSD Veterinary Manual: Approximate Gestation Periods',
+    url: 'https://www.msdvetmanual.com/veterinary/multimedia/table/approximate-gestation-periods',
+  },
+];

package/src/tool/petGestation/component.astro

@@ -0,0 +1,68 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { PetGestationUI } from './index';
+
+interface Props {
+  ui: PetGestationUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="pet-gestation-tool" data-gestation-root>
+  <script is:inline type="application/json" data-gestation-ui set:html={JSON.stringify(ui)}></script>
+  <div class="gestation-tool-intro">
+    <p class="gestation-journey">{ui.journeyHint}</p>
+    <p class="gestation-instant-hint">{ui.instantHint}</p>
+  </div>
+  <div class="gestation-form">
+    <fieldset class="gestation-species-fieldset">
+      <legend>{ui.speciesLegend}</legend>
+      <div class="gestation-species-grid">
+        <button type="button" data-species="dog" aria-pressed="true"><Icon name="mdi:dog-side" /><span>{ui.speciesDog}</span><small>{ui.speciesDogMeta}</small></button>
+        <button type="button" data-species="cat" aria-pressed="false"><Icon name="mdi:cat" /><span>{ui.speciesCat}</span><small>{ui.speciesCatMeta}</small></button>
+        <button type="button" data-species="rabbit" aria-pressed="false"><Icon name="mdi:rabbit" /><span>{ui.speciesRabbit}</span><small>{ui.speciesRabbitMeta}</small></button>
+        <button type="button" data-species="ferret" aria-pressed="false"><Icon name="mdi:rodent" /><span>{ui.speciesFerret}</span><small>{ui.speciesFerretMeta}</small></button>
+      </div>
+    </fieldset>
+    <div class="gestation-date-block">
+      <label for="gestation-mating-date">{ui.matingDateLabel}</label>
+      <input id="gestation-mating-date" data-mating-date type="date" required />
+      <span>{ui.matingDateHint}</span>
+      <div class="gestation-presets" aria-label="Quick dates">
+        <button type="button" data-offset="0">{ui.presetToday}</button>
+        <button type="button" data-offset="-7">{ui.presetWeekAgo}</button>
+        <button type="button" data-offset="-14">{ui.presetFortnightAgo}</button>
+      </div>
+    </div>
+    <p class="gestation-error" data-error role="alert"></p>
+  </div>
+  <section class="gestation-result" data-result aria-live="polite">
+    <div class="gestation-result-ribbon">{ui.sampleLabel}</div>
+    <div class="gestation-scene" data-scene>
+      <div class="gestation-scene-placeholder">{ui.resultEmpty}</div>
+    </div>
+    <div class="gestation-result-copy">
+      <p class="gestation-eyebrow">{ui.resultEyebrow}</p>
+      <p class="gestation-status" data-status></p>
+      <p class="gestation-status-detail" data-status-detail></p>
+      <div class="gestation-facts">
+        <div><span>{ui.dueDateLabel}</span><strong data-due-date></strong></div>
+        <div><span>{ui.windowLabel}</span><strong data-window-date></strong></div>
+        <div><span>{ui.remainingLabel}</span><strong data-remaining></strong></div>
+        <div><span>{ui.elapsedLabel}</span><strong data-elapsed></strong></div>
+      </div>
+    </div>
+  </section>
+  <aside class="gestation-note">
+    <strong>{ui.noteTitle}</strong>
+    <span>{ui.noteText}</span>
+  </aside>
+  <p class="gestation-source-note"><strong>{ui.sourceTitle}</strong> {ui.sourceText}</p>
+</div>
+
+<script>
+  import { initGestationController } from './controller';
+  const root = document.querySelector<HTMLElement>('[data-gestation-root]');
+  if (root) initGestationController(root);
+</script>

package/src/tool/petGestation/controller.ts

@@ -0,0 +1,69 @@
+import { calculateGestation, getDateOffset, type GestationSpecies } from './logic';
+import { renderEvaluation, renderScene } from './dom-views';
+import { loadGestationState, saveGestationState } from './storage';
+import type { PetGestationUI } from './ui';
+
+interface ControllerState {
+  species: GestationSpecies;
+  matingDate: string;
+}
+
+function readUI(root: HTMLElement): PetGestationUI {
+  const script = root.querySelector<HTMLScriptElement>('[data-gestation-ui]');
+  return JSON.parse(script?.textContent || '{}') as PetGestationUI;
+}
+
+function setSpecies(root: HTMLElement, species: GestationSpecies): void {
+  root.querySelectorAll<HTMLButtonElement>('[data-species]').forEach((button) => {
+    const active = button.dataset.species === species;
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+}
+
+function calculate(root: HTMLElement, state: ControllerState, ui: PetGestationUI): void {
+  const dateInput = root.querySelector<HTMLInputElement>('[data-mating-date]');
+  const error = root.querySelector<HTMLElement>('[data-error]');
+  if (!dateInput?.value) {
+    if (error) error.textContent = ui.invalidDate;
+    return;
+  }
+  try {
+    state.matingDate = dateInput.value;
+    const result = calculateGestation(state);
+    saveGestationState(state);
+    if (error) error.textContent = '';
+    renderScene(root.querySelector<HTMLElement>('[data-scene]') as HTMLElement, result, ui);
+    renderEvaluation(root, result, ui);
+  } catch {
+    if (error) error.textContent = ui.invalidDate;
+  }
+}
+
+export function initGestationController(root: HTMLElement): void {
+  const ui = readUI(root);
+  const stored = loadGestationState();
+  const state: ControllerState = {
+    species: stored.species || 'dog',
+    matingDate: stored.matingDate || '',
+  };
+  const dateInput = root.querySelector<HTMLInputElement>('[data-mating-date]');
+  setSpecies(root, state.species);
+  if (dateInput) dateInput.value = state.matingDate || getDateOffset(-14);
+  root.querySelectorAll<HTMLButtonElement>('[data-species]').forEach((button) => {
+    button.addEventListener('click', () => {
+      state.species = (button.dataset.species || 'dog') as GestationSpecies;
+      setSpecies(root, state.species);
+      saveGestationState(state);
+      calculate(root, state, ui);
+    });
+  });
+  root.querySelectorAll<HTMLButtonElement>('[data-offset]').forEach((button) => {
+    button.addEventListener('click', () => {
+      if (dateInput) dateInput.value = getDateOffset(Number(button.dataset.offset || 0));
+      calculate(root, state, ui);
+    });
+  });
+  dateInput?.addEventListener('input', () => calculate(root, state, ui));
+  calculate(root, state, ui);
+}

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

@@ -0,0 +1,60 @@
+import type { GestationResult } from './logic';
+import type { PetGestationUI } from './ui';
+import { evaluateGestation } from './evaluator';
+
+function escapeText(value: string): string {
+  return value.replace(/[&<>"']/g, (character) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[character] || character));
+}
+
+function formatDate(value: string): string {
+  return new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' }).format(new Date(`${value}T00:00:00Z`));
+}
+
+function sceneMarkup(result: GestationResult, ui: PetGestationUI): string {
+  const markerY = 142 - Math.round(result.progress * 94);
+  const windowTop = 142 - Math.min(94, Math.round(result.progress * 94) + 14);
+  return `<svg viewBox="0 0 280 190" role="img" aria-label="${escapeText(ui.sceneToday)}" class="gestation-nest-scene">
+    <path class="scene-reed" d="M140 151 C136 126 144 101 137 77 C132 58 142 38 140 27" />
+    <path class="scene-window" d="M125 ${windowTop} Q140 ${windowTop - 5} 155 ${windowTop} L155 ${Math.min(143, windowTop + 22)} Q140 ${Math.min(148, windowTop + 27)} 125 ${Math.min(143, windowTop + 22)} Z" />
+    <circle class="scene-marker" cx="140" cy="${markerY}" r="7" />
+    <circle class="scene-marker-ring" cx="140" cy="${markerY}" r="12" />
+    <path class="scene-nest" d="M66 145 Q140 177 214 145 Q207 174 140 181 Q73 174 66 145 Z" />
+    <path class="scene-nest-line" d="M83 153 Q140 169 197 153 M94 162 Q140 175 186 162" />
+    <ellipse class="scene-egg scene-egg-left" cx="123" cy="151" rx="13" ry="18" />
+    <ellipse class="scene-egg scene-egg-right" cx="157" cy="151" rx="13" ry="18" />
+    <text x="140" y="18" class="scene-label">${escapeText(ui.sceneMating)}</text>
+    <text x="179" y="58" class="scene-label scene-label-accent scene-label-right">${escapeText(ui.sceneDue)}</text>
+    <text x="140" y="104" class="scene-day">${result.elapsedDays < 0 ? '0' : result.elapsedDays}</text>
+    <text x="140" y="117" class="scene-caption">${escapeText(ui.elapsedLabel)}</text>
+  </svg>`;
+}
+
+export function renderScene(element: HTMLElement, result: GestationResult, ui: PetGestationUI): void {
+  element.innerHTML = sceneMarkup(result, ui);
+}
+
+function setText(root: HTMLElement, selector: string, value: string): void {
+  const element = root.querySelector<HTMLElement>(selector);
+  if (element) element.textContent = value;
+}
+
+function setStatus(root: HTMLElement, result: GestationResult, ui: PetGestationUI): void {
+  const evaluation = evaluateGestation(result, ui);
+  const status = root.querySelector<HTMLElement>('[data-status]');
+  if (!status) return;
+  status.textContent = evaluation.label;
+  status.dataset.tone = evaluation.tone;
+  setText(root, '[data-status-detail]', evaluation.detail);
+}
+
+export function renderEvaluation(root: HTMLElement, result: GestationResult, ui: PetGestationUI): void {
+  const remainingUnit = result.remainingDays === 1 ? ui.dayLabel : ui.daysLabel;
+  const elapsedUnit = result.elapsedDays === 1 ? ui.dayLabel : ui.daysLabel;
+  setText(root, '[data-due-date]', formatDate(result.dueDate));
+  setText(root, '[data-window-date]', `${formatDate(result.windowStart)} to ${formatDate(result.windowEnd)}`);
+  setText(root, '[data-remaining]', `${Math.max(0, result.remainingDays)} ${remainingUnit}`);
+  setText(root, '[data-elapsed]', `${Math.max(0, result.elapsedDays)} ${elapsedUnit}`);
+  setStatus(root, result, ui);
+  const resultPanel = root.querySelector<HTMLElement>('[data-result]');
+  if (resultPanel) resultPanel.hidden = false;
+}

package/src/tool/petGestation/entry.ts

@@ -0,0 +1,31 @@
+import type { PetToolEntry, ToolLocaleContent } from '../../types';
+import type { PetGestationUI } from './ui';
+
+export type { PetGestationUI } from './ui';
+
+export type PetGestationLocaleContent = ToolLocaleContent<PetGestationUI>;
+
+export const petGestation: PetToolEntry<PetGestationUI> = {
+  id: 'pet-gestation',
+  icons: {
+    bg: 'mdi:paw',
+    fg: 'mdi:calendar-heart',
+  },
+  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/petGestation/evaluator.ts

@@ -0,0 +1,28 @@
+import type { PetGestationUI } from './ui';
+import { GESTATION_PROFILES, type GestationResult } from './logic';
+
+export interface GestationEvaluation {
+  label: string;
+  detail: string;
+  tone: 'future' | 'quiet' | 'ready' | 'late';
+}
+
+function dayText(value: number, ui: PetGestationUI): string {
+  const absolute = Math.abs(value);
+  const unit = absolute === 1 ? ui.dayLabel : ui.daysLabel;
+  return `${absolute} ${unit}`;
+}
+
+export function evaluateGestation(result: GestationResult, ui: PetGestationUI): GestationEvaluation {
+  if (result.state === 'future') {
+    return { label: ui.statusFuture, detail: `${dayText(result.elapsedDays, ui)} before the mating date`, tone: 'future' };
+  }
+  if (result.state === 'waiting') {
+    return { label: ui.statusWaiting, detail: `${dayText(result.remainingDays, ui)} until the typical due date`, tone: 'quiet' };
+  }
+  if (result.state === 'window') {
+    return { label: ui.statusWindow, detail: 'The expected delivery window is open', tone: 'ready' };
+  }
+  const outerEstimate = GESTATION_PROFILES[result.species].maxDays;
+  return { label: ui.statusLate, detail: `${dayText(result.elapsedDays - outerEstimate, ui)} beyond the outer estimate`, tone: 'late' };
+}