@jjlmoya/utils-pets 1.29.0 → 1.30.0

package/package.json

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

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] };
+}

package/src/tool/petCollarSizeCalculator/i18n/de.ts

@@ -0,0 +1,44 @@
+import { bibliography } from '../bibliography';
+import type { FAQPage, HowTo, SoftwareApplication, WithContext } from 'schema-dts';
+import type { PetCollarSizeCalculatorLocaleContent } from '../entry';
+import type { PetCollarSizeCalculatorUI } from '../ui';
+
+const slug = 'halsband-groesse-haustier-berechnen';
+const title = 'Halsbandgröße für Haustiere berechnen';
+const description = 'Messen Sie den Halsumfang, addieren Sie Bewegungsfreiheit und finden Sie einen verstellbaren Halsbandbereich für die Handprüfung.';
+const ui: PetCollarSizeCalculatorUI = {
+  neckCircumferenceLabel: 'Halsumfang', unitLabel: 'Anzeige', centimetres: 'Zentimeter', inches: 'Zoll', allowanceLabel: 'Bewegungsfreiheit', collarTypeLabel: 'Halsbandtyp', flatCollar: 'Flach', breakawayCollar: 'Sicherheitsverschluss', martingaleCollar: 'Martingale', statusTight: 'Mehr Raum einplanen', statusBalanced: 'Bereit zur Prüfung', statusLoose: 'Sicherheit prüfen', statusTightDetail: 'Mehr Raum einplanen.', statusBalancedDetail: 'Diesen Bereich von Hand prüfen.', statusLooseDetail: 'Prüfen, dass es nicht abrutschen kann.', fitStudyLabel: 'Halsband-Passformstudie', fitWindowLabel: 'Diesen Bereich suchen', measuredLabel: 'Gemessener Hals', roomLabel: 'Bewegungsfreiheit', checkLabel: 'Prüfung von Hand', sceneAria: 'Passformstudie mit Halsring und verstellbarem Halsbandbereich', neckMarker: 'Hals', easeMarker: 'Raum', rangeMarker: 'Halsbandbereich', minimumMarker: 'Start', maximumMarker: 'Ende', checkFlat: 'Bequem, sicher, ohne Reibung.', checkBreakaway: 'Bequeme Passform und korrekte Auslösevorrichtung prüfen.', checkMartingale: 'Die Zugschlaufe darf den Hals nicht einengen.', invalidInput: 'Geben Sie einen gültigen Halsumfang und Bewegungsraum ein.',
+};
+const faq: PetCollarSizeCalculatorLocaleContent['faq'] = [
+  { question: 'Wie messe ich den Halsumfang meines Tieres?', answer: 'Legen Sie ein flexibles Maßband dort um den Hals, wo das Halsband sitzen soll. Halten Sie es gerade und nah am Fell, ohne Haut oder Fell zusammenzudrücken. Messen Sie erneut, wenn sich die Position, das Fell oder die Haltung des Tieres ändert.' },
+  { question: 'Warum zeigt der Rechner einen Bereich statt einer Groesse?', answer: 'Verstellbare Halsbaender haben unterschiedliche Einstellbereiche und Hersteller verwenden keine einheitlichen Groessen. Der Rechner addiert Ihren gewaehlten Bewegungsraum und gibt einen kleinen Einkaufsbereich aus. Danach muss das konkrete Halsband am Tier geprueft werden.' },
+  { question: 'Wie viel Bewegungsfreiheit soll ich einplanen?', answer: 'Es gibt keinen universellen Zentimeterwert. Fell, Halsbandbreite, Bauform und Nutzung verändern die passende Einstellung. Verwenden Sie den Wert als sichtbare Annahme und bestätigen Sie die Passform anschließend mit einer ruhigen Handprüfung.' },
+  { question: 'Gilt die Rechnung auch fuer Martingale-Halsbaender?', answer: 'Die erste Groessenschaetzung beginnt mit demselben Halsumfang. Bei einem Martingale-Halsband ist die Sicherheitspruefung jedoch anders: Die Zugschlaufe muss begrenzt sein und darf den Hals nicht einengen. Beachten Sie immer die Herstellerangaben.' },
+  { question: 'Kann ich den Bereich bei einem jungen Tier verwenden?', answer: 'Ja, als Momentaufnahme. Junge Tiere wachsen und verändern ihr Fell, deshalb sollte die Messung regelmäßig wiederholt werden. Ein heutiger Bereich ersetzt keine spätere Kontrolle.' },
+];
+const howTo: PetCollarSizeCalculatorLocaleContent['howTo'] = [
+  { name: 'Hals messen', text: 'Messen Sie den ruhigen, natuerlich stehenden Hals dort, wo das Halsband liegen wird. Das Massband soll flach und nicht straff sein.' },
+  { name: 'Bewegungsraum waehlen', text: 'Stellen Sie den Raum zwischen Hals und Halsband als sichtbaren Eingabewert ein. Zwei Zentimeter sind nur ein leicht lesbares Beispiel.' },
+  { name: 'Halsbandtyp auswaehlen', text: 'Waehlen Sie Flach, Sicherheitsverschluss oder Martingale, damit die abschliessende Pruefung zum Verschluss passt.' },
+  { name: 'Einstellbereich vergleichen', text: 'Suchen Sie ein verstellbares Halsband, das den gesamten Bereich abdeckt, und pruefen Sie es anschliessend am Tier.' },
+];
+const seo: PetCollarSizeCalculatorLocaleContent['seo'] = [
+  { type: 'summary', title: 'Vom Halsmass zum passenden Einkaufsbereich', items: ['Messen Sie dort, wo das Halsband wirklich sitzen wird.', 'Machen Sie den Bewegungsraum sichtbar statt nach Rasse oder Gewicht zu raten.', 'Vergleichen Sie den Bereich mit der echten Verstellspanne des Produkts.', 'Beenden Sie die Auswahl mit einer ruhigen Handpruefung.'] },
+  { type: 'title', text: 'Was diese Halsbandberechnung entscheidet', level: 2 },
+  { type: 'paragraph', html: 'Eine Groessentabelle ist oft unklar, wenn ein Tier zwischen zwei Groessen liegt, dichtes Fell hat oder noch waechst. Dieser Rechner beginnt mit einem Messwert, den Sie selbst kontrollieren: dem Umfang an der Stelle, an der das Halsband liegen soll. Dazu kommt der Bewegungsraum, den Sie bewusst waehlen. Das Ergebnis ist kein Marketinglabel wie klein, mittel oder gross, sondern ein konkreter Bereich, den Sie mit Produktangaben vergleichen koennen.' },
+  { type: 'paragraph', html: 'Der Bereich bleibt absichtlich klein. Verstellbare Halsbaender werden nicht nach einer weltweit einheitlichen Norm gefertigt, und die nutzbare Laenge kann sich von der Bezeichnung auf einer Produktseite unterscheiden. Ein Produkt passt erst dann in die Auswahl, wenn seine Verstellung den ganzen Bereich abdeckt. Danach pruefen Sie Kanten, Verschluss, Fell, Bewegung und die Angaben des Herstellers.' },
+  { type: 'title', text: 'So messen Sie vor dem Einkauf', level: 2 },
+  { type: 'list', items: ['Messen Sie, wenn das Tier ruhig steht und normal atmet.', 'Halten Sie das Band gerade und druecken Sie Fell oder Haut nicht zusammen.', 'Wiederholen Sie die Messung, wenn das Halsband hoeher oder tiefer sitzen soll.', 'Bei jungen Tieren das Datum notieren und die Passform regelmaessig neu pruefen.'] },
+  { type: 'paragraph', html: 'Der Bewegungsraum ist eine Annahme, keine Sicherheitsgarantie. Fell, Halsbandbreite, Material, Verschluss und Aktivitaet beeinflussen die richtige Einstellung. Eine allgemeine Fingerpruefung kann helfen, ersetzt aber keine Beobachtung des individuellen Tieres. Wenn Reiben, Husten, Schmerzen, Atemprobleme oder Stress auftreten, nehmen Sie das Halsband ab und holen Sie fachkundige Hilfe.' },
+  { type: 'title', text: 'Die Signale im Passformrad lesen', level: 2 },
+  { type: 'table', headers: ['Signal', 'Bedeutung', 'Naechster Schritt'], rows: [['Gemessener Hals', 'Der Umfang vor dem Bewegungsraum.', 'Messung bei Bedarf wiederholen.'], ['Start', 'Halsumfang plus Ihr Bewegungsraum.', 'Als untere Grenze der Verstellung verwenden.'], ['Ende', 'Ein kleiner Vergleichsbereich oberhalb des Starts.', 'Produkt suchen, das ihn vollstaendig abdeckt.'], ['Pruefung', 'Hinweis auf die gewaehlte Annahme.', 'Am Tier von Hand bestaetigen.']] },
+  { type: 'title', text: 'Der Halsbandtyp ändert die letzte Prüfung', level: 2 },
+  { type: 'paragraph', html: 'Ein flaches Halsband braucht eine andere Handprüfung als ein Sicherheitsverschluss oder ein Martingale-Modell. Achten Sie auf die Kante, die Schnalle und die Begrenzung der Zugschlaufe. Die Zahl hilft bei der Auswahl; das ruhige Tier und die Herstellerangaben entscheiden über die tatsächliche Verwendung.' },
+  { type: 'tip', title: 'Leise Handpruefung', html: 'Legen Sie das Halsband an, wenn das Tier ruhig ist. Es soll sich bewegen, atmen, fressen und trinken koennen, ohne dass das Halsband scheuert oder ueber den Kopf rutscht. Nach Fellpflege, Wachstum, Gewichtsveraenderung oder einer neuen Position erneut pruefen.' },
+];
+const schemas: PetCollarSizeCalculatorLocaleContent['schemas'] = [
+  { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: title, description, applicationCategory: 'LifestyleApplication', operatingSystem: 'Web', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' } } as WithContext<SoftwareApplication>,
+  { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: faq.map((item) => ({ '@type': 'Question', name: item.question, acceptedAnswer: { '@type': 'Answer', text: item.answer } })) } as WithContext<FAQPage>,
+  { '@context': 'https://schema.org', '@type': 'HowTo', name: title, step: howTo.map((step) => ({ '@type': 'HowToStep', name: step.name, text: step.text })) } as WithContext<HowTo>,
+];
+export const content: PetCollarSizeCalculatorLocaleContent = { slug, title, description, ui, seo, faq, bibliography, howTo, schemas };