@jjlmoya/utils-cooking 1.37.0 → 1.39.0

package/src/tool/leavener-acid-neutralizer/logic.ts

@@ -0,0 +1,57 @@
+export interface AcidIngredient {
+  type: string;
+  weight: number;
+}
+
+export interface NeutralizerInput {
+  acidIngredients: AcidIngredient[];
+  flour: number;
+}
+
+export interface NeutralizerResult {
+  neutralizedBakingSoda: number;
+  requiredBakingPowder: number;
+  providedBakingPowderEquivalent: number;
+  boosterBakingPowder: number;
+  bakingSodaTeaspoons: number;
+  boosterBakingPowderTeaspoons: number;
+}
+
+export const ACID_RATIOS: Record<string, number> = {
+  buttermilk: 1.5 / 120,
+  yogurt: 1.5 / 120,
+  sour_cream: 1.5 / 120,
+  honey: 3 / 340,
+  molasses: 3 / 328,
+  cocoa: 3 / 80,
+  lemon_juice: 1.5 / 15,
+  vinegar: 1.5 / 15,
+};
+
+export class LeavenerLogic {
+  static calculate(input: NeutralizerInput): NeutralizerResult {
+    let neutralizedBakingSoda = 0;
+    for (const ingredient of input.acidIngredients) {
+      const ratio = ACID_RATIOS[ingredient.type] || 0;
+      neutralizedBakingSoda += ingredient.weight * ratio;
+    }
+    
+    neutralizedBakingSoda = parseFloat(neutralizedBakingSoda.toFixed(2));
+    
+    const requiredBakingPowder = parseFloat((input.flour * 0.04).toFixed(2));
+    const providedBakingPowderEquivalent = parseFloat((neutralizedBakingSoda * 4).toFixed(2));
+    const boosterBakingPowder = parseFloat(Math.max(0, requiredBakingPowder - providedBakingPowderEquivalent).toFixed(2));
+    
+    const bakingSodaTeaspoons = parseFloat((neutralizedBakingSoda / 6).toFixed(2));
+    const boosterBakingPowderTeaspoons = parseFloat((boosterBakingPowder / 4.8).toFixed(2));
+    
+    return {
+      neutralizedBakingSoda,
+      requiredBakingPowder,
+      providedBakingPowderEquivalent,
+      boosterBakingPowder,
+      bakingSodaTeaspoons,
+      boosterBakingPowderTeaspoons,
+    };
+  }
+}

package/src/tool/leavener-acid-neutralizer/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { leavenerAcidNeutralizer } from './entry';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await leavenerAcidNeutralizer.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/pectin-jam-setting-calculator/bibliography.astro

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

package/src/tool/pectin-jam-setting-calculator/bibliography.ts

@@ -0,0 +1,10 @@
+export const bibliography = [
+  {
+    name: 'Pectin based gels and their advanced application in food: From hydrogel to emulsion gel',
+    url: 'https://www.sciencedirect.com/science/article/abs/pii/S0268005X24011159',
+  },
+  {
+    name: 'Pectin: Technological and Physiological Properties (Springer)',
+    url: 'https://link.springer.com/book/10.1007/978-3-030-53421-9',
+  },
+];

package/src/tool/pectin-jam-setting-calculator/component.astro

@@ -0,0 +1,170 @@
+---
+import FruitSelector from './components/FruitSelector.astro';
+import CalculatorInputs from './components/CalculatorInputs.astro';
+import DropTestVisualizer from './components/DropTestVisualizer.astro';
+import RecipeResults from './components/RecipeResults.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+
+const fruits = [
+  { id: 'apple', name: 'Apple', pectin: 'high', acidity: 'high', color: '#dc2626' },
+  { id: 'quince', name: 'Quince', pectin: 'high', acidity: 'medium', color: '#ea580c' },
+  { id: 'blackberry', name: 'Blackberry', pectin: 'high', acidity: 'low', color: '#7c3aed' },
+  { id: 'cranberry', name: 'Cranberry', pectin: 'high', acidity: 'high', color: '#be123c' },
+  { id: 'gooseberry', name: 'Gooseberry', pectin: 'high', acidity: 'high', color: '#65a30d' },
+  { id: 'plum', name: 'Plum', pectin: 'medium', acidity: 'medium', color: '#7c3aed' },
+  { id: 'apricot', name: 'Apricot', pectin: 'medium', acidity: 'medium', color: '#d97706' },
+  { id: 'blueberry', name: 'Blueberry', pectin: 'medium', acidity: 'low', color: '#4f46e5' },
+  { id: 'raspberry', name: 'Raspberry', pectin: 'medium', acidity: 'high', color: '#e11d48' },
+  { id: 'peach', name: 'Peach', pectin: 'low', acidity: 'medium', color: '#d97706' },
+  { id: 'strawberry', name: 'Strawberry', pectin: 'low', acidity: 'low', color: '#e11d48' },
+  { id: 'pear', name: 'Pear', pectin: 'low', acidity: 'low', color: '#65a30d' },
+  { id: 'fig', name: 'Fig', pectin: 'low', acidity: 'low', color: '#92400e' },
+  { id: 'cherry', name: 'Cherry', pectin: 'low', acidity: 'high', color: '#be123c' },
+  { id: 'grape', name: 'Grape', pectin: 'low', acidity: 'high', color: '#7c3aed' },
+  { id: 'mango', name: 'Mango', pectin: 'low', acidity: 'medium', color: '#d97706' },
+];
+---
+
+<div class="jam-container">
+  <div class="jam-card">
+    <div class="jam-glow-1"></div>
+    <div class="jam-glow-2"></div>
+    <div class="jam-glow-3"></div>
+
+    <div class="jam-main-grid">
+      <FruitSelector ui={ui} fruits={fruits} />
+      <CalculatorInputs ui={ui} />
+      <DropTestVisualizer ui={ui} />
+      <RecipeResults ui={ui} />
+    </div>
+  </div>
+</div>
+
+<script is:inline define:vars={{ ui }}>
+  const STORAGE_KEY = 'jamcalc_state';
+  let aP = 'HM', aSM = 'auto', aF = 'all';
+  const $ = function(id){ return document.getElementById(id); };
+  const $$ = function(sel){ return document.querySelectorAll(sel); };
+  const fs = $('fruit-scroll'), fw = $('fruit-weight'), sw = $('sugar-weight');
+  const smr = $('sugar-manual-row'), sah = $('sugar-auto-hint'), sh = $('sugar-hint');
+  const jd = $('jam-drop'), jdh = $('jam-drop-highlight'), dst = $('drop-status-text');
+  const ds = $('drop-status'), dsi = $('drop-status-icon'), rs = $('recipe-section');
+
+  const ICONS = {
+  perfect: '<svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2.5"/><path d="M7 12l3 3 7-7" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  warn: '<svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2.5"/><line x1="12" y1="8" x2="12" y2="13" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><circle cx="12" cy="17" r="1.2" fill="currentColor"/></svg>',
+  fail: '<svg width="18" height="18" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2.5"/><line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>'
+};
+
+  function gd(p){ return { id: p.getAttribute('data-fruit'), pectin: p.getAttribute('data-pectin'), acidity: p.getAttribute('data-acidity'), color: p.getAttribute('data-color') }; }
+  function rgb(h){ return parseInt(h.slice(1,3),16)+','+parseInt(h.slice(3,5),16)+','+parseInt(h.slice(5,7),16); }
+  function lc(h,f){ const c=function(i){ return Math.min(255,parseInt(h.slice(i,i+2),16)+Math.round((255-parseInt(h.slice(i,i+2),16))*f)); }; return '#'+c(1).toString(16).padStart(2,'0')+c(3).toString(16).padStart(2,'0')+c(5).toString(16).padStart(2,'0'); }
+  function dc(h,f){ const c=function(i){ return Math.max(0,Math.round(parseInt(h.slice(i,i+2),16)*(1-f))); }; return '#'+c(1).toString(16).padStart(2,'0')+c(3).toString(16).padStart(2,'0')+c(5).toString(16).padStart(2,'0'); }
+
+  function save(){
+    const ae = fs.querySelector('.jam-fruit-pill.active');
+    try { localStorage.setItem(STORAGE_KEY, JSON.stringify({ fruit: ae?ae.getAttribute('data-fruit'):'strawberry', weight: fw.value, pectin: aP, sugarMode: aSM, sugarWeight: sw.value, filter: aF })); } catch {}
+  }
+
+  function setTgl(id, v){ $$('#'+id+' .jam-toggle-btn').forEach(function(b){ b.classList.remove('active'); if(b.getAttribute('data-value')===v) b.classList.add('active'); }); }
+  function setFl(v){ aF=v; $$('#filter-pills .jam-filter-pill').forEach(function(p){ p.classList.remove('active'); if(p.getAttribute('data-filter')===v) p.classList.add('active'); }); $$('.jam-fruit-pill').forEach(function(p){ p.style.display=(v==='all'||p.getAttribute('data-pectin')===v)?'':'none'; }); }
+
+  function restoreFruit(s){
+    if(!s.fruit) return;
+    const t=document.querySelector('.jam-fruit-pill[data-fruit="'+s.fruit+'"]');
+    if(!t) return;
+    $$('.jam-fruit-pill').forEach(function(p){ p.classList.remove('active'); });
+    t.classList.add('active');
+  }
+
+  function applyState(s){
+    if(s.pectin){ setTgl('pectin-toggle',s.pectin); aP=s.pectin; }
+    if(s.sugarMode){ setTgl('sugar-mode-toggle',s.sugarMode); aSM=s.sugarMode; }
+    if(s.filter) setFl(s.filter);
+    if(s.weight) fw.value=s.weight;
+    if(s.sugarWeight) sw.value=s.sugarWeight;
+    if(s.sugarMode==='manual'){ smr.classList.remove('jam-hidden'); sah.style.display='none'; }
+    restoreFruit(s);
+  }
+
+  function restore(){
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY); if(!raw) return;
+      applyState(JSON.parse(raw));
+    } catch {}
+  }
+
+  function gf(){
+    const p = fs.querySelector('.jam-fruit-pill.active');
+    return p ? gd(p) : { id:'strawberry',pectin:'low',acidity:'low',color:'#e11d48' };
+  }
+
+  function cp(fwG, p){ if(p==='high') return 0; const r = p==='medium'?0.003:0.006; return parseFloat((fwG*r).toFixed(1)); }
+  function cc(fwG, a){ if(a==='high') return 0; const r = a==='medium'?0.003:0.008; return parseFloat((fwG*r).toFixed(1)); }
+  function csg(fwG){ if(aSM==='manual') return parseFloat(sw.value)||0; const r=aP==='LM'?0.1:1.0; return parseFloat((fwG*r).toFixed(0)); }
+  function cst(sp, hp, pg){
+    if(aP==='LM'){ if(hp) return 'perfect'; return pg>0?'slightly-thin':'too-thin'; }
+    const t = aSM==='auto'?55:60;
+    if(sp>=t && hp) return 'perfect';
+    if(sp>=50) return 'slightly-thin';
+    return 'too-thin';
+  }
+
+  function calc(){
+    const fr = gf(), fwG = Math.max(10,parseFloat(fw.value)||1000);
+    const pg = cp(fwG, fr.pectin), ca = cc(fwG, fr.acidity);
+    const sg = csg(fwG), cooked = parseFloat((fwG*0.55).toFixed(0));
+    const ty = parseFloat((cooked+sg+pg+ca).toFixed(0));
+    const sp = ty>0?parseFloat(((sg/ty)*100).toFixed(1)):0, spF = parseFloat(((sg/fwG)*100).toFixed(0));
+    const hp = fr.pectin!=='low'||pg>0, st = cst(sp, hp, pg);
+    return { pectinGrams:pg, citricGrams:ca, lemonMl:parseFloat((ca*15).toFixed(0)), sugarGrams:sg, totalYield:ty, sugarPct:sp, sugarPctFruit:spF, status:st, fruitColor:fr.color };
+  }
+
+  function upd(r){
+    $('pectin-val').textContent=r.pectinGrams.toFixed(1); $('citric-val').textContent=r.citricGrams.toFixed(1);
+    $('lemon-val').textContent=ui.lemonJuiceNeeded+': '+r.lemonMl+' ml';
+    $('sugar-val').textContent=r.sugarGrams; $('yield-val').textContent=r.totalYield;
+    $('sugar-pct-val').textContent=r.sugarPct; $('sugar-pct-context').textContent=ui.sugarOfTotal+'  |  '+r.sugarPctFruit+'% '+ui.sugarOfFruit;
+    const bar=$('sugar-bar-fill'); bar.style.width=Math.min(100,Math.max(0,r.sugarPct))+'%';
+    bar.style.setProperty('--fruit-color',r.fruitColor);
+    bar.className='jam-sugar-bar-fill '+(r.status==='perfect'?'good':'warn');
+    sh.textContent = aSM==='auto'?'('+ui.sugarAutoHint+')':'';
+    rs.style.setProperty('--fruit-color',r.fruitColor); rs.style.setProperty('--fruit-color-rgb',rgb(r.fruitColor));
+  }
+
+  function anim(r){
+    const s=$('plate-stage'); s.style.setProperty('--jam-fruit-color',r.fruitColor);
+    s.style.setProperty('--jam-fruit-color-light',lc(r.fruitColor,0.3)); s.style.setProperty('--jam-fruit-color-dark',dc(r.fruitColor,0.3));
+    jd.setAttribute('cy','30'); jd.style.transition='none'; jdh.setAttribute('cy','22'); jdh.style.transition='none';
+    requestAnimationFrame(function(){ requestAnimationFrame(function(){ jd.style.transition='cy 0.5s cubic-bezier(0.25,0.46,0.45,0.94)'; jdh.style.transition='cy 0.5s cubic-bezier(0.25,0.46,0.45,0.94)'; jd.setAttribute('cy','110'); jdh.setAttribute('cy','102'); }); });
+    setTimeout(function(){
+      let cy, txt, cls, ico;
+      if(r.status==='perfect'){ cy='118'; txt=ui.dropTestPerfect; cls='perfect'; ico='perfect'; }
+      else if(r.status==='too-thin'){ cy='145'; txt=ui.dropTestThin; cls='too-thin'; ico='fail'; }
+      else { cy='128'; txt=ui.dropTestThin; cls='slightly-thin'; ico='warn'; }
+      jd.style.transition='cy 0.7s cubic-bezier(0.25,0.1,0.25,1)'; jdh.style.transition='cy 0.7s cubic-bezier(0.25,0.1,0.25,1)';
+      jd.setAttribute('cy',cy); jdh.setAttribute('cy',(parseFloat(cy)-8).toString());
+      dst.textContent=txt; ds.className='jam-drop-status visible '+cls; dsi.innerHTML=ICONS[ico];
+    },500);
+  }
+
+  function ua(){ const r=calc(); upd(r); anim(r); if(aSM==='auto') sw.value=Math.round(r.sugarGrams); save(); }
+
+  fw.addEventListener('input',ua); sw.addEventListener('input',function(){ if(aSM==='manual') ua(); });
+
+  function st(id,cb){ $$('#'+id+' .jam-toggle-btn').forEach(function(b){ b.addEventListener('click',function(){ $$('#'+id+' .jam-toggle-btn').forEach(function(x){ x.classList.remove('active'); }); b.classList.add('active'); cb(b.getAttribute('data-value')); }); }); }
+  st('pectin-toggle',function(v){ aP=v; ua(); });
+  st('sugar-mode-toggle',function(v){ aSM=v; if(v==='manual'){ smr.classList.remove('jam-hidden'); sah.style.display='none'; } else { smr.classList.add('jam-hidden'); sah.style.display=''; } ua(); });
+
+  $$('#filter-pills .jam-filter-pill').forEach(function(p){ p.addEventListener('click',function(){ $$('#filter-pills .jam-filter-pill').forEach(function(x){ x.classList.remove('active'); }); p.classList.add('active'); setFl(p.getAttribute('data-filter')); }); });
+  $$('.jam-fruit-pill').forEach(function(p){ p.addEventListener('click',function(){ $$('.jam-fruit-pill').forEach(function(x){ x.classList.remove('active'); }); p.classList.add('active'); ua(); }); });
+
+  restore();
+  if(!fs.querySelector('.jam-fruit-pill.active')){ const f = fs.querySelector('[data-fruit="strawberry"]'); if(f) f.classList.add('active'); }
+  ua();
+</script>

package/src/tool/pectin-jam-setting-calculator/components/CalculatorInputs.astro

@@ -0,0 +1,44 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="jam-inputs-section">
+  <div class="jam-input-row">
+    <label class="jam-input-label" for="fruit-weight">{ui.weightLabel}</label>
+    <div class="jam-weight-input-wrap">
+      <input type="number" id="fruit-weight" class="jam-weight-input" value="1000" min="10" max="99999"
+      placeholder={ui.weightPlaceholder} />
+      <span class="jam-weight-unit" id="weight-unit-label">{ui.weightUnitMetric}</span>
+    </div>
+  </div>
+
+  <div class="jam-input-row">
+    <label class="jam-input-label">{ui.pectinTypeLabel}</label>
+    <div class="jam-toggle-wrap" id="pectin-toggle">
+      <button class="jam-toggle-btn active" data-value="HM">{ui.pectinHM}</button>
+      <button class="jam-toggle-btn" data-value="LM">{ui.pectinLM}</button>
+    </div>
+  </div>
+
+  <div class="jam-input-row">
+    <label class="jam-input-label">{ui.sugarModeLabel}</label>
+    <div class="jam-toggle-wrap" id="sugar-mode-toggle">
+      <button class="jam-toggle-btn active" data-value="auto">{ui.sugarModeAuto}</button>
+      <button class="jam-toggle-btn" data-value="manual">{ui.sugarModeManual}</button>
+    </div>
+    <span class="jam-sugar-auto-hint" id="sugar-auto-hint">{ui.sugarAutoHint}</span>
+  </div>
+
+  <div class="jam-input-row jam-hidden" id="sugar-manual-row">
+    <label class="jam-input-label" for="sugar-weight">{ui.sugarLabel}</label>
+    <div class="jam-weight-input-wrap">
+      <input type="number" id="sugar-weight" class="jam-weight-input" value="650" min="0" max="99999"
+      placeholder={ui.sugarPlaceholder} />
+      <span class="jam-weight-unit">{ui.weightUnitMetric}</span>
+    </div>
+  </div>
+</div>

package/src/tool/pectin-jam-setting-calculator/components/DropTestVisualizer.astro

@@ -0,0 +1,40 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="jam-visual-section">
+  <div class="jam-section-label">{ui.dropTestTitle}</div>
+  <div class="jam-drop-hint">{ui.dropTestHow}</div>
+  <div class="jam-plate-stage" id="plate-stage">
+    <svg class="jam-plate-svg" viewBox="0 0 240 160" xmlns="http://www.w3.org/2000/svg">
+      <line x1="20" y1="135" x2="220" y2="45" stroke="currentColor" stroke-width="3" stroke-linecap="round"
+      opacity="0.35" class="jam-plate-line" />
+      <line x1="20" y1="130" x2="220" y2="40" stroke="currentColor" stroke-width="1" stroke-linecap="round"
+      opacity="0.12" class="jam-plate-line-bottom" />
+
+      <defs>
+        <radialGradient id="drop-grad" cx="40%" cy="35%">
+          <stop offset="0%" stop-color="var(--jam-fruit-color-light)" />
+          <stop offset="60%" stop-color="var(--jam-fruit-color)" />
+          <stop offset="100%" stop-color="var(--jam-fruit-color-dark)" />
+        </radialGradient>
+        <filter id="drop-shadow">
+          <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.3" />
+        </filter>
+      </defs>
+
+      <ellipse id="jam-drop" class="jam-drop" cx="120" cy="30" rx="18" ry="15" fill="url(#drop-grad)"
+      filter="url(#drop-shadow)" />
+      <ellipse id="jam-drop-highlight" class="jam-drop-highlight" cx="114" cy="22" rx="6" ry="3.5" fill="white"
+      opacity="0.45" />
+    </svg>
+    <div class="jam-drop-status visible perfect" id="drop-status">
+      <span class="jam-drop-status-icon" id="drop-status-icon"></span>
+      <span class="jam-drop-status-text" id="drop-status-text"></span>
+    </div>
+  </div>
+</div>

package/src/tool/pectin-jam-setting-calculator/components/FruitSelector.astro

@@ -0,0 +1,38 @@
+---
+interface Fruit {
+  id: string;
+  name: string;
+  pectin: string;
+  acidity: string;
+  color: string;
+}
+
+interface Props {
+  ui: Record<string, string>;
+  fruits: Fruit[];
+}
+
+const { ui, fruits } = Astro.props;
+---
+
+<div class="jam-selector-section">
+  <div class="jam-section-label">{ui.fruitLabel}</div>
+  <div class="jam-fruit-scroll" id="fruit-scroll">
+    {fruits.map((fruit) => (
+      <button class="jam-fruit-pill"
+        data-fruit={fruit.id} data-pectin={fruit.pectin} data-acidity={fruit.acidity}
+        data-color={fruit.color}
+        style={`--fruit-color:${fruit.color}`}
+        aria-label={fruit.name}>
+        <span class="jam-fruit-dot" style={`background:${fruit.color}`}></span>
+        <span class="jam-fruit-name">{fruit.name}</span>
+      </button>
+    ))}
+  </div>
+  <div class="jam-filter-pills" id="filter-pills">
+    <button class="jam-filter-pill active" data-filter="all">{ui.allFruits}</button>
+    <button class="jam-filter-pill" data-filter="high">{ui.highPectin}</button>
+    <button class="jam-filter-pill" data-filter="medium">{ui.mediumPectin}</button>
+    <button class="jam-filter-pill" data-filter="low">{ui.lowPectin}</button>
+  </div>
+</div>

package/src/tool/pectin-jam-setting-calculator/components/RecipeResults.astro

@@ -0,0 +1,72 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="jam-recipe-section" id="recipe-section">
+  <div class="jam-section-label">{ui.recipeTitle}</div>
+  <div class="jam-recipe-grid">
+    <div class="jam-recipe-item">
+      <div class="jam-recipe-icon">
+        <svg width="20" height="20" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none"
+        stroke="currentColor" stroke-width="2" /><circle cx="12" cy="12" r="3" fill="currentColor" /></svg>
+      </div>
+      <div class="jam-recipe-info">
+        <div class="jam-recipe-val"><span id="pectin-val">0.0</span><span class="jam-recipe-unit"> g</span></div>
+        <div class="jam-recipe-label">{ui.pectinNeeded}</div>
+      </div>
+    </div>
+    <div class="jam-recipe-item">
+      <div class="jam-recipe-icon">
+        <svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
+        fill="none" stroke="currentColor" stroke-width="2" /></svg>
+      </div>
+      <div class="jam-recipe-info">
+        <div class="jam-recipe-val"><span id="citric-val">0.0</span><span class="jam-recipe-unit"> g</span></div>
+        <div class="jam-recipe-label">{ui.citricAcidNeeded}</div>
+        <div class="jam-recipe-sub"><span id="lemon-val">{ui.lemonJuiceNeeded}: 0 ml</span></div>
+      </div>
+    </div>
+    <div class="jam-recipe-item">
+      <div class="jam-recipe-icon">
+        <svg width="20" height="20" viewBox="0 0 24 24"><rect x="4" y="8" width="16" height="12" rx="2" fill="none"
+        stroke="currentColor" stroke-width="2" /><circle cx="12" cy="5" r="3" fill="none" stroke="currentColor"
+        stroke-width="2" /></svg>
+      </div>
+      <div class="jam-recipe-info">
+        <div class="jam-recipe-val"><span id="sugar-val">650</span><span class="jam-recipe-unit"> g</span></div>
+        <div class="jam-recipe-label">{ui.sugarNeeded} <span class="jam-sugar-hint" id="sugar-hint"></span></div>
+      </div>
+    </div>
+    <div class="jam-recipe-item">
+      <div class="jam-recipe-icon">
+        <svg width="20" height="20" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none"
+        stroke="currentColor" stroke-width="2" /><circle cx="12" cy="12" r="6" fill="none" stroke="currentColor"
+        stroke-width="2" /><circle cx="12" cy="12" r="2" fill="currentColor" /></svg>
+      </div>
+      <div class="jam-recipe-info">
+        <div class="jam-recipe-val"><span id="yield-val">1650</span><span class="jam-recipe-unit"> g</span></div>
+        <div class="jam-recipe-label">{ui.totalYield}</div>
+      </div>
+    </div>
+  </div>
+  <div class="jam-sugar-bar-wrap">
+    <div class="jam-sugar-bar-header">
+      <span>{ui.sugarPercent}</span>
+      <span class="jam-sugar-bar-val"><span id="sugar-pct-val">39</span>% <span id="sugar-pct-context"></span></span>
+    </div>
+    <div class="jam-sugar-bar">
+      <div class="jam-sugar-bar-fill" id="sugar-bar-fill" style="width:39%"></div>
+      <div class="jam-sugar-bar-marker" style="left:60%"></div>
+    </div>
+    <div class="jam-sugar-bar-labels">
+      <span>0%</span>
+      <span>{ui.sugarLow}</span>
+      <span class="jam-sugar-bar-ideal">{ui.sugarIdeal}</span>
+      <span>{ui.sugarHigh}</span>
+    </div>
+  </div>
+</div>

package/src/tool/pectin-jam-setting-calculator/entry.ts

@@ -0,0 +1,26 @@
+import type { CookingToolEntry } from '../../types';
+
+export const pectinJam: CookingToolEntry = {
+  id: 'pectin-jam-setting-calculator',
+  icons: {
+    bg: 'mdi:fruit-cherries',
+    fg: 'mdi:beaker-outline',
+  },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    de: () => import('./i18n/de').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+  },
+};