@jjlmoya/utils-cooking 1.39.0 → 1.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-cooking",
-    "version": "1.39.0",
+    "version": "1.40.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/scripts/fix-translations.js

@@ -0,0 +1,51 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+const i18nDir = 'd:/code/jjlmoya-utils-cooking/src/tool/sous-vide-pasteurization-curves/i18n';
+const files = fs.readdirSync(i18nDir).filter(f => f.endsWith('.ts'));
+
+const replacements = [
+  { search: /\u2013/g, replace: '-' },
+  { search: /\u2014/g, replace: ' - ' },
+  { search: /\u2026/g, replace: '...' },
+  { search: /\u201C/g, replace: '"' },
+  { search: /\u201D/g, replace: '"' },
+  { search: /\u2018/g, replace: "'" },
+  { search: /\u2019/g, replace: "'" },
+  { search: /\u200B/g, replace: '' },
+  { search: /\u201E/g, replace: '"' },
+  { search: / : /g, replace: ': ' }
+];
+
+files.forEach(file => {
+  const filePath = path.join(i18nDir, file);
+  let content = fs.readFileSync(filePath, 'utf-8');
+
+  replacements.forEach(rep => {
+    content = content.replace(rep.search, rep.replace);
+  });
+
+  if (file === 'es.ts') {
+    content = content.replace("slug: 'sous-vide-pasteurization-curves'", "slug: 'curvas-pasteurizacion-sous-vide'");
+  } else if (file === 'nl.ts') {
+    content = content.replace("slug: 'sous-vide-pasteurization-curves'", "slug: 'sous-vide-pasteurisatiecurven'");
+  } else if (file === 'id.ts') {
+    content = content.replace("slug: 'sous-vide-pasteurization-curves'", "slug: 'kurva-pasteurisasi-sous-vide'");
+  } else if (file === 'sv.ts') {
+    content = content.replace("slug: 'sous-vide-pasteurization-curves-sv'", "slug: 'sous-vide-pasteuriseringskurvor'");
+  } else if (file === 'tr.ts') {
+    content = content.replace("slug: 'sous-vide-pasteurization-curves-tr'", "slug: 'sous-vide-pastorizasyon-egrileri'");
+  } else if (file === 'ru.ts') {
+    content = content.replace("slug: 'sous-vide-pasteurization-curves-ru'", "slug: 'kalkulyator-pasterizacii-su-vid'");
+    content = content.replace("Калькулятор Кривых Пастеризации Су-Вид", "Калькулятор Кривых Пастеризации Су Вид");
+    content = content.replace("Кривые Пастеризации Су-Вид", "Кривые Пастеризации Су Вид");
+  } else if (file === 'pl.ts') {
+    content = content.replace("slug: 'sous-vide-pasteurization-curves-pl'", "slug: 'krzywe-pasteryzacji-sous-vide'");
+  } else if (file === 'de.ts') {
+    content = content.replace("Sous Vide Pasteurisierungs-Kurvenrechner", "Sous Vide Pasteurisierungs Kurvenrechner");
+    content = content.replace("Sous Vide Pasteurisierungs-Kurven", "Sous Vide Pasteurisierungs Kurven");
+    content = content.replace("Thermische Letalitätskinetik und Kerntemperatur-Kompensation", "Thermische Letalitätskinetik und Kerntemperatur Kompensation");
+  }
+
+  fs.writeFileSync(filePath, content, 'utf-8');
+});

package/src/category/index.ts

@@ -23,6 +23,7 @@ import { brixSorbetDensity } from '../tool/brix-sorbet-density-calculator/entry'
 import { oilSmokePoint } from '../tool/oil-smoke-point-tracker/entry';
 import { leavenerAcidNeutralizer } from '../tool/leavener-acid-neutralizer/entry';
 import { pectinJam } from '../tool/pectin-jam-setting-calculator/entry';
+import { sousVidePasteurization } from '../tool/sous-vide-pasteurization-curves/entry';
 
 export const cookingCategory: CookingCategoryEntry = {
   icon: 'mdi:chef-hat',
@@ -51,8 +52,10 @@ export const cookingCategory: CookingCategoryEntry = {
     oilSmokePoint,
     leavenerAcidNeutralizer,
     pectinJam,
+    sousVidePasteurization,
   ],
 
+
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -23,6 +23,7 @@ export { botulismCanningSafety } from './tool/botulism-canning-safety/entry';
 export { oilSmokePoint } from './tool/oil-smoke-point-tracker/entry';
 export { leavenerAcidNeutralizer } from './tool/leavener-acid-neutralizer/entry';
 export { pectinJam } from './tool/pectin-jam-setting-calculator/entry';
+export { sousVidePasteurization } from './tool/sous-vide-pasteurization-curves/entry';
 export { cookingCategory } from './category';
 import { americanKitchenConverter } from './tool/american-kitchen-converter/entry';
 import { bananaCare } from './tool/banana-ripeness/entry';
@@ -49,5 +50,7 @@ import { brixSorbetDensity } from './tool/brix-sorbet-density-calculator/entry';
 import { oilSmokePoint } from './tool/oil-smoke-point-tracker/entry';
 import { leavenerAcidNeutralizer } from './tool/leavener-acid-neutralizer/entry';
 import { pectinJam } from './tool/pectin-jam-setting-calculator/entry';
-export const ALL_ENTRIES = [americanKitchenConverter, bananaCare, brine, cookwareGuide, eggTimer, ingredientRescaler, kitchenTimer, meringuePeak, moldScaler, pizza, rouxGuide, sourdoughCalculator, yeastConverter, lactoFermentationSalt, spherificationBath, iceCreamPacPod, botulismCanningSafety, meatBinder, carryOverCooking, maillardReaction, macaronDrying, brixSorbetDensity, oilSmokePoint, leavenerAcidNeutralizer, pectinJam];
+import { sousVidePasteurization } from './tool/sous-vide-pasteurization-curves/entry';
+export const ALL_ENTRIES = [americanKitchenConverter, bananaCare, brine, cookwareGuide, eggTimer, ingredientRescaler, kitchenTimer, meringuePeak, moldScaler, pizza, rouxGuide, sourdoughCalculator, yeastConverter, lactoFermentationSalt, spherificationBath, iceCreamPacPod, botulismCanningSafety, meatBinder, carryOverCooking, maillardReaction, macaronDrying, brixSorbetDensity, oilSmokePoint, leavenerAcidNeutralizer, pectinJam, sousVidePasteurization];
+
 

package/src/index.ts

@@ -26,6 +26,8 @@ export { BRIX_SORBET_DENSITY_CALCULATOR_TOOL } from './tool/brix-sorbet-density-
 export { OIL_SMOKE_POINT_TRACKER_TOOL } from './tool/oil-smoke-point-tracker';
 export { LEAVENER_ACID_NEUTRALIZER_TOOL } from './tool/leavener-acid-neutralizer';
 export { PECTIN_JAM_SETTING_TOOL } from './tool/pectin-jam-setting-calculator';
+export { SOUS_VIDE_PASTEURIZATION_TOOL } from './tool/sous-vide-pasteurization-curves';
+
 
 
 export type {

package/src/tests/i18n-titles.test.ts

@@ -34,9 +34,9 @@ describe("i18n titles for FAQ", () => {
     }
   });
 
-  it("should have 18 tools with complete i18n setup", async () => {
+  it("should have 19 tools with complete i18n setup", async () => {
     const completeTools = ALL_TOOLS.filter((t) => Object.keys(t.entry.i18n).length > 1);
-    expect(completeTools.length).toBe(25);
+    expect(completeTools.length).toBe(26);
   });
 
   it("tool IDs should be correctly registered", () => {

package/src/tests/locale_completeness.test.ts

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

package/src/tests/sous-vide-pasteurization-curves.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest';
+import { SousVideLogic } from '../tool/sous-vide-pasteurization-curves/logic';
+
+describe('Sous Vide Pasteurization Curves Logic', () => {
+  it('calculates correct heating time for slab, cylinder and sphere', () => {
+    const slabRes = SousVideLogic.calculate({
+      bathTemp: 60,
+      thickness: 25,
+      shape: 'slab',
+      pathogen: 'salmonella'
+    });
+    expect(slabRes.heatingMinutes).toBe(75);
+
+    const cylRes = SousVideLogic.calculate({
+      bathTemp: 60,
+      thickness: 25,
+      shape: 'cylinder',
+      pathogen: 'salmonella'
+    });
+    expect(cylRes.heatingMinutes).toBe(29.4);
+
+    const sphereRes = SousVideLogic.calculate({
+      bathTemp: 60,
+      thickness: 25,
+      shape: 'sphere',
+      pathogen: 'salmonella'
+    });
+    expect(sphereRes.heatingMinutes).toBe(18.8);
+  });
+
+  it('calculates correct pathogen lethality times', () => {
+    const salmRes = SousVideLogic.calculate({
+      bathTemp: 60,
+      thickness: 25,
+      shape: 'slab',
+      pathogen: 'salmonella'
+    });
+    expect(salmRes.lethalityMinutes).toBe(9);
+
+    const listRes = SousVideLogic.calculate({
+      bathTemp: 60,
+      thickness: 25,
+      shape: 'slab',
+      pathogen: 'listeria'
+    });
+    expect(listRes.lethalityMinutes).toBe(18);
+  });
+
+  it('correctly identifies safe vs danger zone temperatures', () => {
+    const dangerRes = SousVideLogic.calculate({
+      bathTemp: 52,
+      thickness: 25,
+      shape: 'slab',
+      pathogen: 'salmonella'
+    });
+    expect(dangerRes.isDangerZone).toBe(true);
+
+    const safeRes = SousVideLogic.calculate({
+      bathTemp: 55,
+      thickness: 25,
+      shape: 'slab',
+      pathogen: 'salmonella'
+    });
+    expect(safeRes.isDangerZone).toBe(false);
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { cookingCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 25 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(25);
+    it('should have 26 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(26);
     });
 
 

package/src/tool/sous-vide-pasteurization-curves/bibliography.astro

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

package/src/tool/sous-vide-pasteurization-curves/bibliography.ts

@@ -0,0 +1,10 @@
+export const bibliography = [
+  {
+    name: 'A Practical Guide to Sous Vide Cooking (Douglas Baldwin)',
+    url: 'https://douglasbaldwin.com/sous-vide.html',
+  },
+  {
+    name: 'USDA FSIS Compliance Guidelines for Meeting Lethality Performance Standards',
+    url: 'https://www.canr.msu.edu/smprv/uploads/files/Appendix_A_and_Compliance_Guidelines.pdf'
+  },
+];

package/src/tool/sous-vide-pasteurization-curves/component.astro

@@ -0,0 +1,275 @@
+---
+import Controls from './components/Controls.astro';
+import ResultsDisplay from './components/ResultsDisplay.astro';
+import LethalityChart from './components/LethalityChart.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="sv-container">
+  <div class="sv-dashboard">
+    <div class="sv-bg-particles" id="sv-particles-container"></div>
+    
+    <div class="sv-row-top">
+      <LethalityChart ui={ui} />
+    </div>
+    
+    <div class="sv-row-bottom">
+      <Controls ui={ui} />
+      <ResultsDisplay ui={ui} />
+    </div>
+  </div>
+  
+  <p class="sv-disclaimer">{ui.disclaimer}</p>
+</div>
+
+<script>
+  import { SousVideLogic } from './logic';
+
+  const $ = (id: string) => document.getElementById(id);
+  const $$ = (sel: string) => document.querySelectorAll(sel);
+
+  const STORAGE_KEY = 'sous_vide_pasteurization_state';
+
+  let system: 'metric' | 'imperial' = 'metric';
+  let bathTemp = 56.0;
+  let thickness = 25;
+  let shape: 'slab' | 'cylinder' | 'sphere' = 'slab';
+  let pathogen: 'salmonella' | 'listeria' = 'salmonella';
+
+  const tempSlider = $('sv-temp-slider') as HTMLInputElement;
+  const tempBadge = $('sv-temp-badge');
+  const thicknessSlider = $('sv-thickness-slider') as HTMLInputElement;
+  const thicknessBadge = $('sv-thickness-badge');
+  const systemButtons = $$('#sv-system-toggle .sv-toggle-btn');
+  const shapeButtons = $$('#sv-shape-toggle .sv-toggle-btn');
+  const pathogenButtons = $$('#sv-pathogen-toggle .sv-toggle-btn');
+  const heatingVal = $('sv-heating-val');
+  const lethalityVal = $('sv-lethality-val');
+  const totalVal = $('sv-total-val');
+  const dangerAlert = $('sv-danger-alert');
+  const curveLine = $('sv-curve-line');
+  const yGrid = $('sv-y-grid');
+  const xGrid = $('sv-x-grid');
+  const particlesContainer = $('sv-particles-container');
+
+  function initParticles() {
+    if (!particlesContainer) return;
+    particlesContainer.innerHTML = '';
+    const numParticles = 15;
+    for (let i = 0; i < numParticles; i++) {
+      const bubble = document.createElement('div');
+      bubble.className = 'sv-bg-bubble';
+      const size = Math.random() * 8 + 4;
+      bubble.style.width = `${size}px`;
+      bubble.style.height = `${size}px`;
+      bubble.style.left = `${Math.random() * 100}%`;
+      bubble.style.animationDelay = `${Math.random() * 8}s`;
+      particlesContainer.appendChild(bubble);
+    }
+  }
+
+  function updateParticlesSpeed() {
+    const bubbles = $$('.sv-bg-bubble') as NodeListOf<HTMLElement>;
+    const speedFactor = Math.max(0.5, (bathTemp - 50) / 10);
+    bubbles.forEach(b => {
+      const duration = 8 / speedFactor;
+      b.style.animationDuration = `${duration}s`;
+    });
+  }
+
+  function drawGrid(totalMinutes: number) {
+    if (!yGrid || !xGrid) return;
+    
+    let yHTML = '';
+    for (let i = 0; i <= 7; i++) {
+      const y = 170 - (i * (140 / 7));
+      yHTML += `<line x1="50" y1="${y}" x2="360" y2="${y}" class="sv-grid-line" />`;
+      yHTML += `<text x="40" y="${y + 4}" class="sv-axis-text" text-anchor="end">${i}D</text>`;
+    }
+    yGrid.innerHTML = yHTML;
+
+    let xHTML = '';
+    const intervals = 5;
+    const intervalMinutes = totalMinutes / intervals;
+    for (let i = 0; i <= intervals; i++) {
+      const x = 50 + (i * (310 / intervals));
+      const label = Math.round(i * intervalMinutes);
+      xHTML += `<line x1="${x}" y1="30" x2="${x}" y2="170" class="sv-grid-line" />`;
+      xHTML += `<text x="${x}" y="188" class="sv-axis-text" text-anchor="middle">${label}</text>`;
+    }
+    xGrid.innerHTML = xHTML;
+  }
+
+  function updateChart(heatingMinutes: number, totalMinutes: number) {
+    if (!curveLine) return;
+    
+    const xStart = 50;
+    const xEnd = 360;
+    const yStart = 170;
+    const yEnd = 30;
+
+    const heatRatio = totalMinutes > 0 ? (heatingMinutes / totalMinutes) : 0;
+    const xMid = xStart + (xEnd - xStart) * heatRatio;
+    const yMid = yStart - 5;
+
+    let d = `M ${xStart} ${yStart}`;
+    d += ` Q ${(xStart + xMid) / 2} ${yStart}, ${xMid} ${yMid}`;
+    d += ` Q ${(xMid + xEnd) / 2} ${yMid}, ${xEnd} ${yEnd}`;
+    
+    curveLine.setAttribute('d', d);
+  }
+
+  function save() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({
+        system,
+        sliderTemp: tempSlider.value,
+        sliderThick: thicknessSlider.value,
+        shape,
+        pathogen
+      }));
+    } catch {}
+  }
+
+  function restoreSystem(sys: string) {
+    system = sys;
+    systemButtons.forEach(b => {
+      b.classList.remove('active');
+      if (b.getAttribute('data-value') === system) b.classList.add('active');
+    });
+    if (system === 'metric') {
+      tempSlider.min = '50'; tempSlider.max = '70'; tempSlider.step = '0.5';
+      thicknessSlider.min = '5'; thicknessSlider.max = '100'; thicknessSlider.step = '1';
+    } else {
+      tempSlider.min = '122'; tempSlider.max = '158'; tempSlider.step = '1';
+      thicknessSlider.min = '0.2'; thicknessSlider.max = '4.0'; thicknessSlider.step = '0.1';
+    }
+  }
+
+  function restore() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return;
+      const data = JSON.parse(raw);
+      if (data.system) restoreSystem(data.system);
+      if (data.sliderTemp) tempSlider.value = data.sliderTemp;
+      if (data.sliderThick) thicknessSlider.value = data.sliderThick;
+    } catch {}
+  }
+
+  function readSliders() {
+    if (system === 'metric') {
+      bathTemp = parseFloat(tempSlider.value);
+      thickness = parseFloat(thicknessSlider.value);
+      if (tempBadge) tempBadge.textContent = bathTemp.toFixed(1) + uniTemp;
+      if (thicknessBadge) thicknessBadge.textContent = thickness + uniThick;
+    } else {
+      const f = parseFloat(tempSlider.value);
+      const inch = parseFloat(thicknessSlider.value);
+      bathTemp = (f - 32) / 1.8;
+      thickness = inch * 25.4;
+      if (tempBadge) tempBadge.textContent = f.toFixed(0) + uniTemp;
+      if (thicknessBadge) thicknessBadge.textContent = inch.toFixed(1) + uniThick;
+    }
+  }
+
+  function showResults(result: ReturnType<typeof SousVideLogic.calculate>) {
+    if (heatingVal) heatingVal.textContent = result.heatingMinutes + ' min';
+    if (lethalityVal) lethalityVal.textContent = result.lethalityMinutes + ' min';
+    if (totalVal) totalVal.textContent = String(result.totalMinutes);
+    if (dangerAlert) dangerAlert.style.display = result.isDangerZone ? 'flex' : 'none';
+    drawGrid(result.totalMinutes);
+    updateChart(result.heatingMinutes, result.totalMinutes);
+    updateParticlesSpeed();
+  }
+
+  function update() {
+    readSliders();
+    const result = SousVideLogic.calculate({ bathTemp, thickness, shape, pathogen });
+    showResults(result);
+    save();
+  }
+
+  function handleSystemChange(newSystem: 'metric' | 'imperial') {
+    if (system === newSystem) return;
+
+    const oldSliderTemp = parseFloat(tempSlider.value);
+    const oldSliderThick = parseFloat(thicknessSlider.value);
+
+    system = newSystem;
+
+    if (system === 'metric') {
+      const tempC = (oldSliderTemp - 32) / 1.8;
+      tempSlider.min = '50';
+      tempSlider.max = '70';
+      tempSlider.step = '0.5';
+      tempSlider.value = Math.max(50, Math.min(70, tempC)).toFixed(1);
+
+      const thickMm = oldSliderThick * 25.4;
+      thicknessSlider.min = '5';
+      thicknessSlider.max = '100';
+      thicknessSlider.step = '1';
+      thicknessSlider.value = Math.max(5, Math.min(100, thickMm)).toFixed(0);
+    } else {
+      const tempF = oldSliderTemp * 1.8 + 32;
+      tempSlider.min = '122';
+      tempSlider.max = '158';
+      tempSlider.step = '1';
+      tempSlider.value = Math.max(122, Math.min(158, tempF)).toFixed(0);
+
+      const thickIn = oldSliderThick / 25.4;
+      thicknessSlider.min = '0.2';
+      thicknessSlider.max = '4.0';
+      thicknessSlider.step = '0.1';
+      thicknessSlider.value = Math.max(0.2, Math.min(4.0, thickIn)).toFixed(1);
+    }
+
+    update();
+  }
+
+  if (tempSlider) {
+    tempSlider.addEventListener('input', update);
+  }
+
+  if (thicknessSlider) {
+    thicknessSlider.addEventListener('input', update);
+  }
+
+  systemButtons.forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      systemButtons.forEach(b => b.classList.remove('active'));
+      const target = e.currentTarget as HTMLButtonElement;
+      target.classList.add('active');
+      handleSystemChange(target.getAttribute('data-value') as 'metric' | 'imperial');
+    });
+  });
+
+  shapeButtons.forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      shapeButtons.forEach(b => b.classList.remove('active'));
+      const target = e.currentTarget as HTMLButtonElement;
+      target.classList.add('active');
+      shape = target.getAttribute('data-value') as 'slab' | 'cylinder' | 'sphere';
+      update();
+    });
+  });
+
+  pathogenButtons.forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      pathogenButtons.forEach(b => b.classList.remove('active'));
+      const target = e.currentTarget as HTMLButtonElement;
+      target.classList.add('active');
+      pathogen = target.getAttribute('data-value') as 'salmonella' | 'listeria';
+      update();
+    });
+  });
+
+  restore();
+  initParticles();
+  update();
+</script>

package/src/tool/sous-vide-pasteurization-curves/components/Controls.astro

@@ -0,0 +1,90 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="sv-controls-panel">
+  <div class="sv-glass-card">
+    <div class="sv-input-group">
+      <span class="sv-label">{ui.systemLabel}</span>
+      <div id="sv-system-toggle" class="sv-toggle-grid">
+        <button type="button" class="sv-toggle-btn active" data-value="metric">
+          {ui.systemMetric}
+        </button>
+        <button type="button" class="sv-toggle-btn" data-value="imperial">
+          {ui.systemImperial}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="sv-glass-card">
+    <div class="sv-input-group">
+      <div class="sv-label-container">
+        <label for="sv-temp-slider" class="sv-label">{ui.bathTempLabel}</label>
+        <span id="sv-temp-badge" class="sv-value-badge">56.0{ui.tempUnitC}</span>
+      </div>
+      <input
+        type="range"
+        id="sv-temp-slider"
+        class="sv-slider"
+        min="50"
+        max="70"
+        step="0.5"
+        value="56.0"
+      />
+    </div>
+  </div>
+
+  <div class="sv-glass-card">
+    <div class="sv-input-group">
+      <div class="sv-label-container">
+        <label for="sv-thickness-slider" class="sv-label">{ui.thicknessLabel}</label>
+        <span id="sv-thickness-badge" class="sv-value-badge">25{ui.mmUnit}</span>
+      </div>
+      <input
+        type="range"
+        id="sv-thickness-slider"
+        class="sv-slider"
+        min="5"
+        max="100"
+        step="1"
+        value="25"
+      />
+    </div>
+  </div>
+
+  <div class="sv-glass-card">
+    <div class="sv-input-group">
+      <span class="sv-label">{ui.shapeLabel}</span>
+      <div id="sv-shape-toggle" class="sv-toggle-grid">
+        <button type="button" class="sv-toggle-btn active" data-value="slab">
+          {ui.shapeSlab.split(' ')[0]}
+        </button>
+        <button type="button" class="sv-toggle-btn" data-value="cylinder">
+          {ui.shapeCylinder.split(' ')[0]}
+        </button>
+        <button type="button" class="sv-toggle-btn" data-value="sphere">
+          {ui.shapeSphere.split(' ')[0]}
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div class="sv-glass-card">
+    <div class="sv-input-group">
+      <span class="sv-label">{ui.pathogenLabel}</span>
+      <div id="sv-pathogen-toggle" class="sv-pathogen-grid sv-toggle-grid">
+        <button type="button" class="sv-toggle-btn active" data-value="salmonella">
+          {ui.pathogenSalmonella.split(' ')[0]}
+        </button>
+        <button type="button" class="sv-toggle-btn" data-value="listeria">
+          Listeria
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/tool/sous-vide-pasteurization-curves/components/LethalityChart.astro

@@ -0,0 +1,28 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="sv-chart-panel">
+  <h3 class="sv-chart-title">{ui.chartTitle}</h3>
+  
+  <svg class="sv-svg-chart" viewBox="0 0 400 220" id="sv-chart-svg">
+    <line x1="40" y1="20" x2="40" y2="180" stroke="rgba(226,232,240,0.2)" stroke-width="1.5" />
+    <line x1="40" y1="180" x2="380" y2="180" stroke="rgba(226,232,240,0.2)" stroke-width="1.5" />
+    
+    <g id="sv-y-grid"></g>
+    <g id="sv-x-grid"></g>
+    
+    <text x="15" y="100" class="sv-axis-text" transform="rotate(-90 15 100)" text-anchor="middle">
+      {ui.chartYLabel}
+    </text>
+    <text x="210" y="210" class="sv-axis-text" text-anchor="middle">
+      {ui.chartXLabel}
+    </text>
+    
+    <path id="sv-curve-line" class="sv-curve-path" d="" />
+  </svg>
+</div>

package/src/tool/sous-vide-pasteurization-curves/components/ResultsDisplay.astro

@@ -0,0 +1,36 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="sv-glass-card sv-results-panel">
+  <h3 class="sv-chart-title">{ui.resultsTitle}</h3>
+  
+  <div class="sv-results-hero">
+    <div class="sv-hero-ring">
+      <span id="sv-total-val" class="sv-hero-value">--</span>
+      <span class="sv-hero-unit">{ui.minutesUnit}</span>
+    </div>
+    <span class="sv-hero-label">{ui.totalTime}</span>
+  </div>
+
+  <div class="sv-results-grid">
+    <div class="sv-result-card">
+      <span class="sv-card-metric-label">{ui.heatingTime}</span>
+      <span id="sv-heating-val" class="sv-card-metric-value">--</span>
+    </div>
+    
+    <div class="sv-result-card">
+      <span class="sv-card-metric-label">{ui.lethalityTime}</span>
+      <span id="sv-lethality-val" class="sv-card-metric-value">--</span>
+    </div>
+  </div>
+
+  <div id="sv-danger-alert" class="sv-danger-alert" style="display: none;">
+    <h4 class="sv-danger-title">{ui.dangerZoneTitle}</h4>
+    <p class="sv-danger-desc">{ui.dangerZoneDesc}</p>
+  </div>
+</div>