@jjlmoya/utils-pets 1.28.0 → 1.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-pets",
-    "version": "1.28.0",
+    "version": "1.30.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -36,7 +36,7 @@
         "postinstall": "node scripts/postinstall.mjs",
         "predev": "node scripts/postinstall.mjs",
         "prestart": "node scripts/postinstall.mjs",
-        "prebuild": "node scripts/postinstall.mjs",
+        "prebuild": "node scripts/postinstall.mjs && node scripts/validate-icons.mjs",
         "qa": "npm run lint && npm run test && npm run build",
         "cf:dry-run": "npm run build && wrangler deploy --dry-run",
         "cf:preview": "npm run build && wrangler deploy --config wrangler.staging.jsonc",

package/scripts/validate-icons.mjs

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+
+import { createRequire } from 'node:module';
+import { readFileSync, readdirSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const packageJsonPath = require.resolve('@iconify-json/mdi/package.json');
+const packageRoot = dirname(packageJsonPath);
+const iconSet = JSON.parse(readFileSync(join(packageRoot, 'icons.json'), 'utf8'));
+const availableIcons = new Set([
+  ...Object.keys(iconSet.icons ?? {}),
+  ...Object.keys(iconSet.aliases ?? {}),
+]);
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const sourceRoot = resolve(repoRoot, 'src');
+const extensions = new Set(['.astro', '.js', '.mjs', '.ts', '.tsx']);
+const iconPattern = /\bmdi:([a-z0-9-]+)\b/g;
+const failures = [];
+let references = 0;
+
+function walk(directory) {
+  const entries = readdirSync(directory, { withFileTypes: true });
+  for (const entry of entries) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name !== 'node_modules' && entry.name !== 'dist' && entry.name !== 'tests') {
+        walk(path);
+      }
+      continue;
+    }
+    if (!extensions.has(path.slice(path.lastIndexOf('.')))) continue;
+
+    const source = readFileSync(path, 'utf8');
+    for (const match of source.matchAll(iconPattern)) {
+      references += 1;
+      const iconName = match[1];
+      if (availableIcons.has(iconName)) continue;
+
+      const line = source.slice(0, match.index).split('\n').length;
+      failures.push(`${relative(repoRoot, path)}:${line} — mdi:${iconName}`);
+    }
+  }
+}
+
+walk(sourceRoot);
+
+if (failures.length > 0) {
+  console.error('Invalid MDI icons found:');
+  for (const failure of failures) console.error(`- ${failure}`);
+  console.error(`Checked ${references} MDI icon references against @iconify-json/mdi.`);
+  process.exitCode = 1;
+} else {
+  console.log(`MDI icon validation passed: ${references} references checked.`);
+}

package/src/category/index.ts

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

package/src/data.ts

@@ -4,12 +4,14 @@ export { petRation } from './tool/petRation';
 export { petGestation } from './tool/petGestation';
 export { petToxicity } from './tool/petToxicity';
 export { petMedicationSchedulePlanner } from './tool/petMedicationSchedulePlanner';
+export { petCollarSizeCalculator } from './tool/petCollarSizeCalculator';
 
 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 { PetMedicationSchedulePlannerUI, PetMedicationSchedulePlannerLocaleContent } from './tool/petMedicationSchedulePlanner';
+export type { PetCollarSizeCalculatorUI, PetCollarSizeCalculatorLocaleContent } from './tool/petCollarSizeCalculator';
 
 export type {
   KnownLocale,

package/src/entries.ts

@@ -10,6 +10,8 @@ export { petCarrierCrateSizePlanner } from './tool/petCarrierCrateSizePlanner/en
 export type { PetCarrierCrateSizePlannerUI, PetCarrierCrateSizePlannerLocaleContent } from './tool/petCarrierCrateSizePlanner/entry';
 export { petMedicationSchedulePlanner } from './tool/petMedicationSchedulePlanner/entry';
 export type { PetMedicationSchedulePlannerUI, PetMedicationSchedulePlannerLocaleContent } from './tool/petMedicationSchedulePlanner/entry';
+export { petCollarSizeCalculator } from './tool/petCollarSizeCalculator/entry';
+export type { PetCollarSizeCalculatorUI, PetCollarSizeCalculatorLocaleContent } from './tool/petCollarSizeCalculator/entry';
 export { petsCategory } from './category';
 import { petAge } from './tool/petAge/entry';
 import { petRation } from './tool/petRation/entry';
@@ -18,4 +20,5 @@ import { petToxicity } from './tool/petToxicity/entry';
 import { petWaterIntake } from './tool/petWaterIntake/entry';
 import { petCarrierCrateSizePlanner } from './tool/petCarrierCrateSizePlanner/entry';
 import { petMedicationSchedulePlanner } from './tool/petMedicationSchedulePlanner/entry';
-export const ALL_ENTRIES = [petAge, petRation, petGestation, petToxicity, petWaterIntake, petCarrierCrateSizePlanner, petMedicationSchedulePlanner];
+import { petCollarSizeCalculator } from './tool/petCollarSizeCalculator/entry';
+export const ALL_ENTRIES = [petAge, petRation, petGestation, petToxicity, petWaterIntake, petCarrierCrateSizePlanner, petMedicationSchedulePlanner, petCollarSizeCalculator];

package/src/index.ts

@@ -3,6 +3,7 @@ export { petRation, PET_RATION_TOOL } from './tool/petRation';
 export { petGestation, PET_GESTATION_TOOL } from './tool/petGestation';
 export { petCarrierCrateSizePlanner, PET_CARRIER_CRATE_SIZE_PLANNER_TOOL } from './tool/petCarrierCrateSizePlanner';
 export { petMedicationSchedulePlanner, PET_MEDICATION_SCHEDULE_PLANNER_TOOL } from './tool/petMedicationSchedulePlanner';
+export { petCollarSizeCalculator, PET_COLLAR_SIZE_CALCULATOR_TOOL } from './tool/petCollarSizeCalculator';
 
 export { petsCategory } from './category';
 export const PetsCategorySEO = () => import('./category/seo.astro').then((m) => m.default);

package/src/tests/i18n_coverage.test.ts

@@ -4,7 +4,7 @@ import { ALL_TOOLS } from '../tools';
 const EXPECTED_LOCALES = [
   'de', 'en', 'es', 'fr', 'id', 'it', 'ja', 'ko', 'nl', 'pl', 'pt', 'ru', 'sv', 'tr', 'zh'
 ];
-const ENGLISH_FIRST_TOOLS = new Set(['pet-carrier-crate-size-planner']);
+const ENGLISH_FIRST_TOOLS = new Set(['pet-carrier-crate-size-planner', 'pet-collar-size-calculator']);
 
 describe('I18n Coverage Validation', () => {
   it('all tools should be registered', () => {

package/src/tests/locale_completeness.test.ts

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

package/src/tests/mfe_assets_contract.test.ts

@@ -0,0 +1,54 @@
+import { existsSync, readdirSync, statSync } from 'node:fs';
+import { basename, join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { CATEGORY_OG_IMAGE, getUtilityOgImage } from '../mfe/assets';
+
+const categoryImageMatch = CATEGORY_OG_IMAGE.match(
+  /^(\/_utilities\/[^/]+\/images)\/([^/]+\.webp)\?version=(.+)$/,
+);
+
+if (!categoryImageMatch) {
+  throw new Error(`Unexpected CATEGORY_OG_IMAGE format: ${CATEGORY_OG_IMAGE}`);
+}
+
+const [, matchedImageUrlRoot, matchedCategoryImage, matchedAssetVersion] = categoryImageMatch;
+if (!matchedImageUrlRoot || !matchedCategoryImage || !matchedAssetVersion) {
+  throw new Error('Unexpected CATEGORY_OG_IMAGE capture groups');
+}
+const imageUrlRoot = matchedImageUrlRoot;
+const categoryImage = matchedCategoryImage;
+const assetVersion = matchedAssetVersion;
+const assetRoot = join(process.cwd(), 'public', imageUrlRoot.slice(1));
+const categorySlug = basename(categoryImage, '.webp');
+
+describe('MFE asset contract', () => {
+  it('has one non-empty English-slug OG image per category and registered tool', async () => {
+    const expectedSlugs = new Set([categorySlug]);
+
+    for (const { entry } of ALL_TOOLS) {
+      const englishLoader = entry.i18n.en;
+      if (!englishLoader) throw new Error(`Missing English locale for ${entry.id}`);
+
+      const englishContent = await englishLoader();
+      expectedSlugs.add(englishContent.slug);
+    }
+
+    const actualSlugs = new Set(
+      readdirSync(assetRoot)
+        .filter((filename) => filename.endsWith('.webp'))
+        .map((filename) => filename.slice(0, -'.webp'.length)),
+    );
+
+    expect(actualSlugs).toEqual(expectedSlugs);
+
+    for (const slug of expectedSlugs) {
+      const imagePath = join(assetRoot, `${slug}.webp`);
+      expect(existsSync(imagePath), `${imagePath} should exist`).toBe(true);
+      expect(statSync(imagePath).size, `${imagePath} should not be empty`).toBeGreaterThan(0);
+      expect(getUtilityOgImage(slug)).toBe(
+        `${imageUrlRoot}/${slug}.webp?version=${assetVersion}`,
+      );
+    }
+  }, 30000);
+});

package/src/tests/tool_validation.test.ts

@@ -73,7 +73,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', 'calculadora-gestacion-mascotas', 'buscador-alimentos-toxicos-perros-gatos', 'calculadora-agua-diaria-perros-gatos', 'planificador-dimensiones-transportin-mascotas', 'planificador-horario-medicacion-mascota'];
+                const validSlugs = ['calculadora-edad-mascotas', 'calculadora-racion-diaria-mascotas', 'calculadora-gestacion-mascotas', 'buscador-alimentos-toxicos-perros-gatos', 'calculadora-agua-diaria-perros-gatos', 'planificador-dimensiones-transportin-mascotas', 'planificador-horario-medicacion-mascota', 'calculadora-talla-collar-mascotas'];
                 expect(validSlugs).toContain(content.slug);
               }
             });
@@ -99,11 +99,11 @@ describe('Tool Validation Suite', () => {
 
   describe('Library Registration', () => {
     it('should have 7 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(7);
+      expect(ALL_TOOLS.length).toBe(8);
     });
 
     it('should have all tools in petsCategory', () => {
-      expect(petsCategory.tools.length).toBe(7);
+      expect(petsCategory.tools.length).toBe(8);
       ALL_TOOLS.forEach(({ entry }) => {
         const exists = petsCategory.tools.some((t: any) => t.id === entry.id);
         expect(exists).toBe(true);

package/src/tool/petCollarSizeCalculator/bibliography.astro

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

package/src/tool/petCollarSizeCalculator/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'PDSA: How can I be a responsible dog owner?',
+    url: 'https://www.pdsa.org.uk/what-we-do/blog/vet-qa-how-can-i-be-a-responsible-dog-owner',
+  },
+  {
+    name: 'Deutscher Tierschutzbund: Hunde richtig halten',
+    url: 'https://www.tierschutzbund.de/tiere-themen/haustiere/hunde/hundehaltung/',
+  },
+];

package/src/tool/petCollarSizeCalculator/component.astro

@@ -0,0 +1,65 @@
+---
+import './pet-collar-size-calculator.css';
+import { calculatePetCollarSize } from './logic';
+import { renderResult, renderScene } from './dom-views';
+import { petCollarSizeCalculator } from './entry';
+
+const content = await petCollarSizeCalculator.i18n.en?.();
+if (!content) return null;
+const { ui } = content;
+const initialResult = calculatePetCollarSize({
+  neckCircumference: 32,
+  allowance: 2,
+  unit: 'cm',
+  collarType: 'flat',
+});
+const config = { ui };
+---
+
+<section class="pet-collar-size-calculator" data-pet-collar-root aria-label={content.title}>
+  <div class="pet-collar-atelier">
+    <aside class="pet-collar-atelier-rail" aria-hidden="true">
+      <span class="pet-collar-rail-index">01</span>
+      <span class="pet-collar-rail-word">fit study</span>
+      <span class="pet-collar-rail-mark"></span>
+    </aside>
+    <div class="pet-collar-atelier-body">
+      <header class="pet-collar-atelier-header">
+        <span class="pet-collar-kicker">{ui.fitStudyLabel}</span>
+        <fieldset class="pet-collar-type-field">
+          <legend>{ui.collarTypeLabel}</legend>
+          <div class="pet-collar-type-options">
+            <label><input type="radio" name="pet-collar-type" data-collar-type="flat" value="flat" checked /><span>{ui.flatCollar}</span></label>
+            <label><input type="radio" name="pet-collar-type" data-collar-type="breakaway" value="breakaway" /><span>{ui.breakawayCollar}</span></label>
+            <label><input type="radio" name="pet-collar-type" data-collar-type="martingale" value="martingale" /><span>{ui.martingaleCollar}</span></label>
+          </div>
+        </fieldset>
+      </header>
+      <div class="pet-collar-scene" data-collar-scene set:html={renderScene(initialResult, ui)}></div>
+      <form class="pet-collar-controls" data-collar-form onsubmit="return false;">
+        <div class="pet-collar-control pet-collar-control-neck">
+          <label for="pet-collar-neck-input">{ui.neckCircumferenceLabel}</label>
+          <div class="pet-collar-number-wrap"><input id="pet-collar-neck-input" data-neck-input type="number" value="32" min="5" max="250" step="0.5" inputmode="decimal" /><span data-unit-suffix>cm</span></div>
+        </div>
+        <div class="pet-collar-control pet-collar-control-room">
+          <label for="pet-collar-allowance-range">{ui.allowanceLabel}</label>
+          <div class="pet-collar-range-row"><input id="pet-collar-allowance-range" data-allowance-range type="range" value="2" min="0.5" max="10" step="0.5" aria-label={ui.allowanceLabel} /><output data-allowance-output for="pet-collar-allowance-range">2 <span data-unit-suffix>cm</span></output></div>
+        </div>
+        <div class="pet-collar-control pet-collar-control-unit">
+          <span class="pet-collar-label">{ui.unitLabel}</span>
+          <div class="pet-collar-unit-switch" role="group" aria-label={ui.unitLabel}><button type="button" data-unit-choice="cm" aria-label={ui.centimetres} aria-pressed="true" class="is-active">cm</button><button type="button" data-unit-choice="in" aria-label={ui.inches} aria-pressed="false">in</button></div>
+        </div>
+      </form>
+      <div class="pet-collar-result" data-collar-result aria-live="polite" set:html={renderResult(initialResult, ui)}></div>
+    </div>
+  </div>
+</section>
+
+<script is:inline type="application/json" data-pet-collar-config set:html={JSON.stringify(config)}></script>
+<script>
+  import { mountPetCollarSizeCalculator } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-pet-collar-root]');
+  const configElement = document.querySelector<HTMLScriptElement>('[data-pet-collar-config]');
+  if (root && configElement?.textContent) mountPetCollarSizeCalculator(root, JSON.parse(configElement.textContent));
+</script>

package/src/tool/petCollarSizeCalculator/controller.ts

@@ -0,0 +1,160 @@
+import { calculatePetCollarSize, fromCentimetres, toCentimetres, type CollarType, type CollarUnit } from './logic';
+import { renderResult, renderScene } from './dom-views';
+import { loadCollarState, saveCollarState } from './storage';
+import type { PetCollarSizeCalculatorUI } from './ui';
+
+interface ControllerConfig {
+  ui: PetCollarSizeCalculatorUI;
+}
+
+function toNumber(value: string | undefined, fallback: number): number {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+function setUnitConstraints(root: HTMLElement, unit: CollarUnit): void {
+  const neck = root.querySelector<HTMLInputElement>('[data-neck-input]');
+  const allowanceRange = root.querySelector<HTMLInputElement>('[data-allowance-range]');
+  if (!neck || !allowanceRange) return;
+
+  const constraints = unit === 'in'
+    ? { neckMin: '2', neckMax: '98.4', neckStep: '0.1', allowanceMin: '0.2', allowanceMax: '3.9', allowanceStep: '0.1' }
+    : { neckMin: '5', neckMax: '250', neckStep: '0.5', allowanceMin: '0.5', allowanceMax: '10', allowanceStep: '0.5' };
+  neck.min = constraints.neckMin;
+  neck.max = constraints.neckMax;
+  neck.step = constraints.neckStep;
+  allowanceRange.min = constraints.allowanceMin;
+  allowanceRange.max = constraints.allowanceMax;
+  allowanceRange.step = constraints.allowanceStep;
+}
+
+function updateAllowanceOutput(root: HTMLElement, value: string, unit: CollarUnit): void {
+  const output = root.querySelector<HTMLOutputElement>('[data-allowance-output]');
+  if (!output) return;
+  output.firstChild?.replaceWith(document.createTextNode(value));
+  output.querySelector('[data-unit-suffix]')?.replaceChildren(document.createTextNode(unit === 'in' ? 'in' : 'cm'));
+}
+
+function selectUnit(root: HTMLElement, unit: CollarUnit): void {
+  root.querySelectorAll<HTMLElement>('[data-unit-choice]').forEach((button) => {
+    const active = button.dataset.unitChoice === unit;
+    button.classList.toggle('is-active', active);
+    button.setAttribute('aria-pressed', String(active));
+  });
+  root.querySelectorAll<HTMLElement>('[data-unit-suffix]').forEach((suffix) => {
+    suffix.textContent = unit === 'in' ? 'in' : 'cm';
+  });
+}
+
+export function mountPetCollarSizeCalculator(root: HTMLElement, config: ControllerConfig): void {
+  const elements = getMountElements(root);
+  if (!elements) return;
+  const state = prepareInitialState(root, elements);
+  const update = createUpdater({ ...elements, config, state });
+  bindTypeInputs(root, state, update);
+  bindValueInputs({ root, neck: elements.neck, allowanceRange: elements.allowanceRange, unit: () => state.unit, update });
+  bindUnitButtons({ root, ...elements, state, update });
+  update();
+}
+
+interface MountElements {
+  neck: HTMLInputElement;
+  allowanceRange: HTMLInputElement;
+  scene: HTMLElement;
+  resultView: HTMLElement;
+}
+
+function getMountElements(root: HTMLElement): MountElements | null {
+  const neck = root.querySelector<HTMLInputElement>('[data-neck-input]');
+  const allowanceRange = root.querySelector<HTMLInputElement>('[data-allowance-range]');
+  const scene = root.querySelector<HTMLElement>('[data-collar-scene]');
+  const resultView = root.querySelector<HTMLElement>('[data-collar-result]');
+  if (!neck || !allowanceRange || !scene || !resultView) return null;
+  return { neck, allowanceRange, scene, resultView };
+}
+
+function prepareInitialState(root: HTMLElement, elements: MountElements): { unit: CollarUnit; collarType: CollarType } {
+  const stored = loadCollarState();
+  const state = { unit: stored.unit ?? 'cm', collarType: stored.collarType ?? 'flat' };
+  setUnitConstraints(root, state.unit);
+  elements.neck.value = String(stored.neckCircumference ?? 32);
+  elements.allowanceRange.value = String(stored.allowance ?? 2);
+  root.querySelector<HTMLInputElement>(`[data-collar-type="${state.collarType}"]`)?.setAttribute('checked', '');
+  selectUnit(root, state.unit);
+  updateAllowanceOutput(root, elements.allowanceRange.value, state.unit);
+  return state;
+}
+
+interface UpdaterArgs {
+  neck: HTMLInputElement;
+  allowanceRange: HTMLInputElement;
+  scene: HTMLElement;
+  resultView: HTMLElement;
+  config: ControllerConfig;
+  state: { unit: CollarUnit; collarType: CollarType };
+}
+
+function createUpdater(args: UpdaterArgs): () => void {
+  return () => {
+    const result = calculatePetCollarSize({
+      neckCircumference: toNumber(args.neck.value, 0),
+      allowance: toNumber(args.allowanceRange.value, 0),
+      unit: args.state.unit,
+      collarType: args.state.collarType,
+    });
+    args.scene.innerHTML = renderScene(result, args.config.ui);
+    args.resultView.innerHTML = renderResult(result, args.config.ui);
+    saveCollarState({
+      neckCircumference: toNumber(args.neck.value, 0),
+      allowance: toNumber(args.allowanceRange.value, 0),
+      unit: args.state.unit,
+      collarType: args.state.collarType,
+    });
+  };
+}
+
+function bindTypeInputs(root: HTMLElement, state: { collarType: CollarType }, update: () => void): void {
+  root.querySelectorAll<HTMLInputElement>('[data-collar-type]').forEach((input) => input.addEventListener('change', () => {
+    if (input.checked) state.collarType = input.value as CollarType;
+    update();
+  }));
+}
+
+interface ValueBindingArgs {
+  root: HTMLElement;
+  neck: HTMLInputElement;
+  allowanceRange: HTMLInputElement;
+  unit: () => CollarUnit;
+  update: () => void;
+}
+
+function bindValueInputs(args: ValueBindingArgs): void {
+  args.neck.addEventListener('input', args.update);
+  args.allowanceRange.addEventListener('input', () => {
+    updateAllowanceOutput(args.root, args.allowanceRange.value, args.unit());
+    args.update();
+  });
+}
+
+interface UnitBindingArgs {
+  root: HTMLElement;
+  neck: HTMLInputElement;
+  allowanceRange: HTMLInputElement;
+  state: { unit: CollarUnit };
+  update: () => void;
+}
+
+function bindUnitButtons(args: UnitBindingArgs): void {
+  args.root.querySelectorAll<HTMLElement>('[data-unit-choice]').forEach((button) => button.addEventListener('click', () => {
+    const nextUnit = button.dataset.unitChoice as CollarUnit;
+    const neckCm = toCentimetres(toNumber(args.neck.value, 0), args.state.unit);
+    const allowanceCm = toCentimetres(toNumber(args.allowanceRange.value, 0), args.state.unit);
+    args.state.unit = nextUnit;
+    setUnitConstraints(args.root, nextUnit);
+    args.neck.value = String(Number(fromCentimetres(neckCm, nextUnit).toFixed(1)));
+    args.allowanceRange.value = String(Number(fromCentimetres(allowanceCm, nextUnit).toFixed(1)));
+    selectUnit(args.root, nextUnit);
+    updateAllowanceOutput(args.root, args.allowanceRange.value, nextUnit);
+    args.update();
+  }));
+}

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

@@ -0,0 +1,111 @@
+import type { PetCollarSizeCalculatorUI } from './ui';
+import type { CollarType, CollarUnit, PetCollarSizeResult } from './logic';
+import { getFitReview } from './evaluator';
+
+function escapeHtml(value: string): string {
+  return value.replace(/[&<>"']/g, (character) => ({
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+  })[character] ?? character);
+}
+
+export function formatMeasurement(valueCm: number, unit: CollarUnit): string {
+  const value = unit === 'in' ? valueCm / 2.54 : valueCm;
+  return value.toFixed(1).replace(/\.0$/, '');
+}
+
+function unitLabel(unit: CollarUnit, ui: PetCollarSizeCalculatorUI): string {
+  return unit === 'in' ? ui.inches : ui.centimetres;
+}
+
+function collarTypeLabel(type: CollarType, ui: PetCollarSizeCalculatorUI): string {
+  return { flat: ui.flatCollar, breakaway: ui.breakawayCollar, martingale: ui.martingaleCollar }[type];
+}
+
+function collarCheckText(type: CollarType, ui: PetCollarSizeCalculatorUI): string {
+  return { flat: ui.checkFlat, breakaway: ui.checkBreakaway, martingale: ui.checkMartingale }[type];
+}
+
+function point(cx: number, cy: number, radius: number, degrees: number): { x: number; y: number } {
+  const radians = (degrees * Math.PI) / 180;
+  return { x: cx + Math.cos(radians) * radius, y: cy + Math.sin(radians) * radius };
+}
+
+interface ArcPathArgs {
+  cx: number;
+  cy: number;
+  radius: number;
+  start: number;
+  end: number;
+}
+
+function arcPath(args: ArcPathArgs): string {
+  const first = point(args.cx, args.cy, args.radius, args.start);
+  const last = point(args.cx, args.cy, args.radius, args.end);
+  const largeArc = Math.abs(args.end - args.start) > 180 ? 1 : 0;
+  return `M${first.x.toFixed(1)} ${first.y.toFixed(1)}A${args.radius} ${args.radius} 0 ${largeArc} 1 ${last.x.toFixed(1)} ${last.y.toFixed(1)}`;
+}
+
+function renderWheelTicks(): string {
+  const ticks = Array.from({ length: 12 }, (_, index) => {
+    const angle = index * 30;
+    const inner = point(196, 204, 153, angle);
+    const outer = point(196, 204, index % 3 === 0 ? 166 : 160, angle);
+    return `<line class="pet-collar-wheel-tick" x1="${inner.x.toFixed(1)}" y1="${inner.y.toFixed(1)}" x2="${outer.x.toFixed(1)}" y2="${outer.y.toFixed(1)}" />`;
+  });
+  return ticks.join('');
+}
+
+function renderBuckle(): string {
+  return '<path class="pet-collar-wheel-buckle" d="M325 82h27v45h-27m0-35h19m-19 25h19" />';
+}
+
+function renderWheel(result: PetCollarSizeResult, ui: PetCollarSizeCalculatorUI): string {
+  const roomOffset = Math.min(30, Math.max(2, result.allowanceCm * 3));
+  const collarStart = 104 + roomOffset;
+  const collarEnd = collarStart + 24;
+  const neckPath = arcPath({ cx: 196, cy: 204, radius: 80, start: 205, end: 505 });
+  const spanPath = arcPath({ cx: 196, cy: 204, radius: collarStart, start: 205, end: 505 });
+  const endPath = arcPath({ cx: 196, cy: 204, radius: collarEnd, start: 205, end: 505 });
+  const roomPoint = point(196, 204, 92, 252);
+  const spanPoint = point(196, 204, collarEnd + 10, 318);
+  return `<svg class="pet-collar-fit-wheel" viewBox="0 0 720 420" role="img" aria-label="${escapeHtml(ui.sceneAria)}">
+    <circle class="pet-collar-wheel-paper" cx="196" cy="204" r="173" />
+    ${renderWheelTicks()}
+    <path class="pet-collar-wheel-neck" d="${neckPath}" />
+    <path class="pet-collar-wheel-band" d="${spanPath}" />
+    <path class="pet-collar-wheel-edge" d="${endPath}" />
+    ${renderBuckle()}
+    <circle class="pet-collar-wheel-center" cx="196" cy="204" r="5" />
+    <path class="pet-collar-wheel-leader pet-collar-wheel-leader-room" d="M${roomPoint.x.toFixed(1)} ${roomPoint.y.toFixed(1)}L92 342H36" />
+    <path class="pet-collar-wheel-leader pet-collar-wheel-leader-span" d="M${spanPoint.x.toFixed(1)} ${spanPoint.y.toFixed(1)}L446 286H516" />
+    <text class="pet-collar-wheel-label pet-collar-wheel-label-neck" x="196" y="198" text-anchor="middle">${escapeHtml(ui.neckMarker)}</text>
+    <text class="pet-collar-wheel-sublabel" x="196" y="220" text-anchor="middle">fit circle</text>
+    <text class="pet-collar-wheel-label" x="36" y="362">${escapeHtml(ui.easeMarker)}</text>
+    <text class="pet-collar-wheel-sublabel" x="36" y="381">+${escapeHtml(formatMeasurement(result.allowanceCm, result.unit))} ${escapeHtml(unitLabel(result.unit, ui))}</text>
+    <text class="pet-collar-wheel-label pet-collar-wheel-label-span" x="516" y="306">${escapeHtml(ui.rangeMarker)}</text>
+    <text class="pet-collar-wheel-sublabel" x="516" y="325">${escapeHtml(ui.minimumMarker)} to ${escapeHtml(ui.maximumMarker)}</text>
+  </svg>`;
+}
+
+function renderReading(result: PetCollarSizeResult, ui: PetCollarSizeCalculatorUI): string {
+  const unit = unitLabel(result.unit, ui);
+  return `<div class="pet-collar-reading"><span class="pet-collar-reading-label">${escapeHtml(ui.fitWindowLabel)}</span><strong>${escapeHtml(formatMeasurement(result.minimumCm, result.unit))} <small>to</small> ${escapeHtml(formatMeasurement(result.maximumCm, result.unit))}<em>${escapeHtml(unit)}</em></strong><div class="pet-collar-reading-metrics"><div><span>${escapeHtml(ui.measuredLabel)}</span><b>${escapeHtml(formatMeasurement(result.neckCm, result.unit))} ${escapeHtml(unit)}</b></div><div><span>${escapeHtml(ui.roomLabel)}</span><b>+${escapeHtml(formatMeasurement(result.allowanceCm, result.unit))} ${escapeHtml(unit)}</b></div></div></div>`;
+}
+
+export function renderScene(result: PetCollarSizeResult, ui: PetCollarSizeCalculatorUI): string {
+  if (!result.valid) return `<div class="pet-collar-invalid" role="status">${escapeHtml(ui.invalidInput)}</div>`;
+  return `<div class="pet-collar-stage"><div class="pet-collar-wheel-wrap">${renderWheel(result, ui)}<span class="pet-collar-stage-index">fit / 01</span></div>${renderReading(result, ui)}</div>`;
+}
+
+export function renderResult(result: PetCollarSizeResult, ui: PetCollarSizeCalculatorUI): string {
+  if (!result.valid) return `<div class="pet-collar-result-invalid" role="status">${escapeHtml(ui.invalidInput)}</div>`;
+  const review = getFitReview(result);
+  const statusLabel = ui[review.labelKey];
+  const statusDetail = ui[review.detailKey];
+  const collarType = collarTypeLabel(result.collarType, ui);
+  return `<div class="pet-collar-guidance"><div class="pet-collar-guidance-main"><span class="pet-collar-status pet-collar-status-${review.status}">${escapeHtml(statusLabel)}</span><span>${escapeHtml(statusDetail)}</span></div><p><span>${escapeHtml(ui.checkLabel)}</span><strong>${escapeHtml(collarType)}</strong>${escapeHtml(collarCheckText(result.collarType, ui))}</p></div>`;
+}

package/src/tool/petCollarSizeCalculator/entry.ts

@@ -0,0 +1,32 @@
+import type { PetToolEntry, ToolLocaleContent } from '../../types';
+import type { PetCollarSizeCalculatorUI } from './ui';
+
+export type { PetCollarSizeCalculatorUI } from './ui';
+export type PetCollarSizeCalculatorLocaleContent = ToolLocaleContent<PetCollarSizeCalculatorUI>;
+
+export const petCollarSizeCalculator: PetToolEntry<PetCollarSizeCalculatorUI> = {
+  id: 'pet-collar-size-calculator',
+  icons: {
+    bg: 'mdi:paw',
+    fg: 'mdi:link-variant',
+  },
+  i18n: {
+    de: () => import('./i18n/de').then((module) => module.content),
+    en: () => import('./i18n/en').then((module) => module.content),
+    es: () => import('./i18n/es').then((module) => module.content),
+    fr: () => import('./i18n/fr').then((module) => module.content),
+    id: () => import('./i18n/id').then((module) => module.content),
+    it: () => import('./i18n/it').then((module) => module.content),
+    ja: () => import('./i18n/ja').then((module) => module.content),
+    ko: () => import('./i18n/ko').then((module) => module.content),
+    nl: () => import('./i18n/nl').then((module) => module.content),
+    pl: () => import('./i18n/pl').then((module) => module.content),
+    pt: () => import('./i18n/pt').then((module) => module.content),
+    ru: () => import('./i18n/ru').then((module) => module.content),
+    sv: () => import('./i18n/sv').then((module) => module.content),
+    tr: () => import('./i18n/tr').then((module) => module.content),
+    zh: () => import('./i18n/zh').then((module) => module.content),
+  },
+};
+
+export { bibliography } from './bibliography';

package/src/tool/petCollarSizeCalculator/evaluator.ts

@@ -0,0 +1,18 @@
+import type { AllowanceStatus, CollarType, PetCollarSizeResult } from './logic';
+
+export interface FitReview {
+  status: AllowanceStatus;
+  collarType: CollarType;
+  labelKey: 'statusTight' | 'statusBalanced' | 'statusLoose';
+  detailKey: 'statusTightDetail' | 'statusBalancedDetail' | 'statusLooseDetail';
+}
+
+export function getFitReview(result: PetCollarSizeResult): FitReview {
+  const keys = {
+    tight: { labelKey: 'statusTight', detailKey: 'statusTightDetail' },
+    balanced: { labelKey: 'statusBalanced', detailKey: 'statusBalancedDetail' },
+    loose: { labelKey: 'statusLoose', detailKey: 'statusLooseDetail' },
+  } as const;
+
+  return { status: result.status, collarType: result.collarType, ...keys[result.status] };
+}