@jjlmoya/utils-cooking 1.36.0 → 1.38.0

package/src/tool/brix-sorbet-density-calculator/logic.ts

@@ -0,0 +1,180 @@
+import type { BrixState } from './helpers';
+import { getUnitLabel, formatWeight, formatWeightVal, cToF, getTempStatusDash } from './helpers';
+
+export type { BrixState, SorbetInputs, SorbetResult } from './helpers';
+export { SorbetLogic } from './helpers';
+
+const STORAGE_KEY = 'bsdc-v1';
+
+const LOAD_FIELDS = [
+  { key: 'fw', elId: 'bsdc-fruit-weight' },
+  { key: 'fb', elId: 'bsdc-fruit-brix' },
+  { key: 'sw', elId: 'bsdc-sugar-weight' },
+  { key: 'dw', elId: 'bsdc-dextrose-weight' },
+  { key: 'ww', elId: 'bsdc-water-weight' },
+  { key: 'tb', elId: 'bsdc-target-brix' },
+] as const;
+
+function updateDisplayValues(state: BrixState): void {
+  const { elements: el, activeUnit } = state;
+  el.fruitWeightVal.textContent = String(formatWeightVal(parseFloat(el.fruitWeight.value) || 0, state));
+  el.fruitBrixVal.textContent = el.fruitBrix.value;
+  el.sugarWeightVal.textContent = String(formatWeightVal(parseFloat(el.sugarWeight.value) || 0, state));
+  el.dextroseWeightVal.textContent = String(formatWeightVal(parseFloat(el.dextroseWeight.value) || 0, state));
+  el.waterWeightVal.textContent = String(formatWeightVal(parseFloat(el.waterWeight.value) || 0, state));
+  el.targetBrixVal.textContent = el.targetBrix.value;
+
+  const labelText = getUnitLabel(state);
+  document.querySelectorAll('.bsdc-weight-unit').forEach((el2) => { el2.textContent = labelText; });
+
+  const labelsEl = document.getElementById('bsdc-temp-labels');
+  if (labelsEl) {
+    labelsEl.innerHTML = activeUnit === 'imperial'
+      ? '<span>-13°F</span><span>-4°F</span><span>5°F</span><span>14°F</span><span>23°F</span>'
+      : '<span>-25°C</span><span>-20°C</span><span>-15°C</span><span>-10°C</span><span>-5°C</span>';
+  }
+}
+
+export function updatePresetDropdownUI(state: BrixState): void {
+  const { selectOptions, selectedIcon, selectedName } = state.elements;
+  selectOptions.forEach((opt) => {
+    const isSelected = opt.getAttribute('data-value') === state.activePreset;
+    opt.classList.toggle('selected', isSelected);
+    if (!isSelected) return;
+    selectedIcon.innerHTML = (opt.querySelector('.bsdc-preset-icon') as HTMLElement).innerHTML;
+    const nameSpan = opt.querySelector('span:not(.bsdc-preset-icon)');
+    if (nameSpan) selectedName.textContent = nameSpan.textContent;
+  });
+}
+
+function updateBadge(brix: number, state: BrixState): void {
+  const card = document.querySelector('.bsdc-card');
+  if (card) card.classList.remove('status-hard', 'status-soft', 'status-optimal');
+  const { statusBadge } = state.elements;
+  const s = state.ui;
+  if (brix < 25) {
+    statusBadge.textContent = s.statusHard;
+    statusBadge.className = 'bsdc-badge hard';
+    if (card) card.classList.add('status-hard');
+  } else if (brix > 30) {
+    statusBadge.textContent = s.statusSoft;
+    statusBadge.className = 'bsdc-badge soft';
+    if (card) card.classList.add('status-soft');
+  } else {
+    statusBadge.textContent = s.statusOptimal;
+    statusBadge.className = 'bsdc-badge optimal';
+    if (card) card.classList.add('status-optimal');
+  }
+}
+
+function updateTempMarker(tMin: number, tMax: number): void {
+  const marker = document.getElementById('bsdc-temp-marker');
+  if (!marker) return;
+  marker.classList.remove('out-of-range-cold', 'out-of-range-warm');
+  if (tMin < -25) {
+    marker.style.left = '0%';
+    marker.style.width = '12%';
+    marker.classList.add('out-of-range-cold');
+  } else if (tMax > -5) {
+    marker.style.left = '88%';
+    marker.style.width = '12%';
+    marker.classList.add('out-of-range-warm');
+  } else {
+    const pMin = Math.max(0, Math.min(100, ((tMin + 25) / 20) * 100));
+    const pMax = Math.max(0, Math.min(100, ((tMax + 25) / 20) * 100));
+    marker.style.left = pMin.toFixed(1) + '%';
+    marker.style.width = Math.max(8, pMax - pMin).toFixed(1) + '%';
+  }
+}
+
+function updateTempGauge(totalPAC: number, state: BrixState): void {
+  const tIdeal = -(totalPAC / 18);
+  const tMin = tIdeal - 2.5;
+  const tMax = tIdeal + 2.5;
+  updateTempMarker(tMin, tMax);
+
+  const rangeVal = document.getElementById('bsdc-temp-range-val');
+  if (rangeVal) {
+    if (state.activeUnit === 'imperial') {
+      const fIdeal = cToF(tIdeal);
+      rangeVal.textContent = (fIdeal - 4.5).toFixed(0) + '°F to ' + (fIdeal + 4.5).toFixed(0) + '°F';
+    } else {
+      rangeVal.textContent = tMin.toFixed(0) + '°C to ' + tMax.toFixed(0) + '°C';
+    }
+  }
+
+  const tempStatus = document.getElementById('bsdc-temp-status');
+  if (tempStatus) {
+    const st = getTempStatusDash(tIdeal);
+    tempStatus.textContent = st.text;
+    tempStatus.className = st.className;
+  }
+}
+
+function calculate(state: BrixState): void {
+  const { elements: el } = state;
+  const fw = parseFloat(el.fruitWeight.value) || 0;
+  const fb = parseFloat(el.fruitBrix.value) || 0;
+  const sw = parseFloat(el.sugarWeight.value) || 0;
+  const dw = parseFloat(el.dextroseWeight.value) || 0;
+  const ww = parseFloat(el.waterWeight.value) || 0;
+  const tb = parseFloat(el.targetBrix.value) || 28;
+  const fruitSugar = fw * (fb / 100);
+  const totalWeight = fw + ww + sw + dw;
+  const brix = totalWeight > 0 ? ((fruitSugar + sw + dw) / totalWeight) * 100 : 0;
+  const totalPAC = fruitSugar * 1.9 + sw + dw * 1.9;
+  el.totalBrixDisp.textContent = brix.toFixed(1) + '%';
+  el.totalWeightDisp.textContent = formatWeight(totalWeight, state);
+  el.totalPacDisp.textContent = totalPAC.toFixed(1);
+  el.lens.style.transform = `translateY(-${Math.min(50, (brix / 50) * 50) * 0.5}%)`;
+  updateBadge(brix, state);
+  updateTempGauge(totalPAC, state);
+  const recSugar = Math.max(0, fw * (2 * (tb / 100) - fb / 100));
+  const recWater = Math.max(0, fw - recSugar);
+  el.recSugarDisp.textContent = formatWeight(recSugar, state);
+  el.recWaterDisp.textContent = formatWeight(recWater, state);
+}
+
+function save(state: BrixState): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({
+      fw: state.elements.fruitWeight.value,
+      fb: state.elements.fruitBrix.value,
+      sw: state.elements.sugarWeight.value,
+      dw: state.elements.dextroseWeight.value,
+      ww: state.elements.waterWeight.value,
+      tb: state.elements.targetBrix.value,
+      pr: state.activePreset,
+      un: state.activeUnit,
+    }));
+  } catch {}
+}
+
+export function load(state: BrixState): void {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return;
+    const data = JSON.parse(raw) as Record<string, string>;
+    if (data.un) state.activeUnit = data.un;
+    if (data.pr) state.activePreset = data.pr;
+    LOAD_FIELDS.forEach(({ key, elId }) => {
+      if (data[key] !== undefined) {
+        const el = document.getElementById(elId) as HTMLInputElement;
+        if (el) el.value = data[key];
+      }
+    });
+  } catch {}
+}
+
+export function refresh(state: BrixState): void {
+  updateDisplayValues(state);
+  calculate(state);
+  save(state);
+}
+
+export function toggleUnit(unit: string, state: BrixState): void {
+  state.activeUnit = unit;
+  state.elements.unitMetricBtn.classList.toggle('active', unit === 'metric');
+  state.elements.unitImperialBtn.classList.toggle('active', unit === 'imperial');
+  refresh(state);
+}

package/src/tool/brix-sorbet-density-calculator/script.ts

@@ -0,0 +1,114 @@
+import type { BrixState } from './logic';
+import { toggleUnit, load, updatePresetDropdownUI, refresh } from './logic';
+
+function createElements() {
+  const g = (id: string) => document.getElementById(id);
+  return {
+    selectTrigger: g('bsdc-select-trigger')!,
+    selectDropdown: g('bsdc-select-dropdown')!,
+    selectOptions: document.querySelectorAll('.bsdc-select-option'),
+    selectedIcon: g('bsdc-selected-icon')!,
+    selectedName: g('bsdc-selected-name')!,
+    fruitWeight: g('bsdc-fruit-weight') as HTMLInputElement,
+    fruitBrix: g('bsdc-fruit-brix') as HTMLInputElement,
+    sugarWeight: g('bsdc-sugar-weight') as HTMLInputElement,
+    dextroseWeight: g('bsdc-dextrose-weight') as HTMLInputElement,
+    waterWeight: g('bsdc-water-weight') as HTMLInputElement,
+    targetBrix: g('bsdc-target-brix') as HTMLInputElement,
+    fruitWeightVal: g('bsdc-fruit-weight-val')!,
+    fruitBrixVal: g('bsdc-fruit-brix-val')!,
+    sugarWeightVal: g('bsdc-sugar-weight-val')!,
+    dextroseWeightVal: g('bsdc-dextrose-weight-val')!,
+    waterWeightVal: g('bsdc-water-weight-val')!,
+    targetBrixVal: g('bsdc-target-brix-val')!,
+    totalBrixDisp: g('bsdc-total-brix')!,
+    totalWeightDisp: g('bsdc-total-weight')!,
+    totalPacDisp: g('bsdc-total-pac')!,
+    statusBadge: g('bsdc-status-badge')!,
+    lens: g('bsdc-lens')!,
+    recSugarDisp: g('bsdc-rec-sugar')!,
+    recWaterDisp: g('bsdc-rec-water')!,
+    unitMetricBtn: g('bsdc-unit-metric')!, unitImperialBtn: g('bsdc-unit-imperial')!,
+  };
+}
+
+function bindSelectDropdown(el: BrixState['elements']): void {
+  el.selectTrigger.addEventListener('click', (e) => {
+    e.stopPropagation();
+    el.selectTrigger.classList.toggle('open');
+    el.selectDropdown.classList.toggle('open');
+  });
+  document.addEventListener('click', (e) => {
+    if (!el.selectTrigger.contains(e.target as Node) && !el.selectDropdown.contains(e.target as Node)) {
+      el.selectTrigger.classList.remove('open');
+      el.selectDropdown.classList.remove('open');
+    }
+  });
+}
+
+function bindSelectOptions(state: BrixState): void {
+  const { elements: el } = state;
+  el.selectOptions.forEach((opt) => {
+    opt.addEventListener('click', () => {
+      const val = opt.getAttribute('data-value')!;
+      state.activePreset = val;
+      if (val !== 'custom') el.fruitBrix.value = val;
+      el.selectTrigger.classList.remove('open');
+      el.selectDropdown.classList.remove('open');
+      updatePresetDropdownUI(state);
+      refresh(state);
+    });
+  });
+}
+
+function bindAdjusters(state: BrixState): void {
+  document.querySelectorAll('.bsdc-adjuster-btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const targetId = btn.getAttribute('data-target')!;
+      const slider = document.getElementById(targetId) as HTMLInputElement;
+      if (!slider) return;
+      const step = parseFloat(slider.getAttribute('step') || '1');
+      const cur = parseFloat(slider.value) || 0;
+      const dir = btn.getAttribute('data-dir');
+      slider.value = String(Math.max(parseFloat(slider.min), Math.min(parseFloat(slider.max), cur + (dir === 'up' ? step : -step))));
+      if (targetId === 'bsdc-fruit-brix') {
+        state.activePreset = 'custom';
+        updatePresetDropdownUI(state);
+      }
+      refresh(state);
+    });
+  });
+}
+
+function bindSliderInputs(state: BrixState): void {
+  const { elements: el } = state;
+  el.fruitWeight.addEventListener('input', () => refresh(state));
+  el.fruitBrix.addEventListener('input', () => {
+    state.activePreset = 'custom';
+    updatePresetDropdownUI(state);
+    refresh(state);
+  });
+  el.sugarWeight.addEventListener('input', () => refresh(state));
+  el.dextroseWeight.addEventListener('input', () => refresh(state));
+  el.waterWeight.addEventListener('input', () => refresh(state));
+  el.targetBrix.addEventListener('input', () => refresh(state));
+}
+
+function bindEvents(state: BrixState): void {
+  const { elements: el } = state;
+  el.unitMetricBtn.addEventListener('click', () => toggleUnit('metric', state));
+  el.unitImperialBtn.addEventListener('click', () => toggleUnit('imperial', state));
+  bindSelectDropdown(el);
+  bindSelectOptions(state);
+  bindAdjusters(state);
+  bindSliderInputs(state);
+}
+
+export function initBrixCalculator(ui: Record<string, string>): void {
+  const elements = createElements();
+  const state: BrixState = { activeUnit: 'metric', activePreset: '14', ui, elements };
+  bindEvents(state);
+  load(state);
+  updatePresetDropdownUI(state);
+  toggleUnit(state.activeUnit, state);
+}

package/src/tool/brix-sorbet-density-calculator/seo.astro

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

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

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

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

@@ -0,0 +1,10 @@
+export const bibliography = [
+  {
+    name: 'Changing chemical leavening to improve the structural, textural and sensory properties of functional cakes with blackcurrant pomace',
+    url: 'https://www.sciencedirect.com/science/article/abs/pii/S0023643820303674',
+  },
+  {
+    name: 'Understanding Baking Soda vs. Baking Powder',
+    url: 'https://www.utas.edu.au/about/news-and-stories/articles/2025/whats-the-difference-between-baking-powder-and-baking-soda-its-subtle,-but-significant',
+  },
+];

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

@@ -0,0 +1,335 @@
+---
+import './leavener-acid-neutralizer.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="leavener-container">
+  <div class="leavener-card">
+    <div class="recipe-setup-card">
+      <div class="top-row">
+        <div class="luxury-title-group">
+          <span class="luxury-badge">{ui.stoichiometryBadge}</span>
+        </div>
+        <div class="unit-selector">
+          <button id="unit-metric-btn" class="unit-btn active">{ui.metricUnit}</button>
+          <button id="unit-imperial-btn" class="unit-btn">{ui.imperialUnit}</button>
+        </div>
+      </div>
+      
+      <div class="flour-slider-group">
+        <div class="flour-header">
+          <span class="flour-title-label">{ui.flourLabel}</span>
+          <span id="flour-val-display" class="flour-val-num">150g</span>
+        </div>
+        <input type="range" id="flour-slider" min="50" max="1000" step="10" value="150" class="premium-range-slider" />
+      </div>
+    </div>
+    
+    <div class="main-workspace-layout">
+      <div class="control-panel-card">
+        <h4 class="panel-subtitle">Select Acidic Ingredients</h4>
+        <div class="ingredients-pills">
+          <button class="pill-btn" data-type="buttermilk" data-name={ui.acid_buttermilk}>{ui.acid_buttermilk}</button>
+          <button class="pill-btn active" data-type="yogurt" data-name={ui.acid_yogurt}>{ui.acid_yogurt}</button>
+          <button class="pill-btn" data-type="sour_cream" data-name={ui.acid_sour_cream}>{ui.acid_sour_cream}</button>
+          <button class="pill-btn" data-type="honey" data-name={ui.acid_honey}>{ui.acid_honey}</button>
+          <button class="pill-btn" data-type="molasses" data-name={ui.acid_molasses}>{ui.acid_molasses}</button>
+          <button class="pill-btn" data-type="cocoa" data-name={ui.acid_cocoa}>{ui.acid_cocoa}</button>
+          <button class="pill-btn" data-type="lemon_juice" data-name={ui.acid_lemon_juice}>{ui.acid_lemon_juice}</button>
+          <button class="pill-btn" data-type="vinegar" data-name={ui.acid_vinegar}>{ui.acid_vinegar}</button>
+        </div>
+        
+        <div id="active-sliders-container" class="active-sliders-list"></div>
+      </div>
+      
+      <div class="analysis-panel-card">
+        <h4 class="panel-subtitle">{ui.scaleBalanceTitle}</h4>
+        
+        <div class="linear-ph-scale-card">
+          <div class="ph-track">
+            <div class="ph-zone acid-zone"></div>
+            <div class="ph-zone neutral-zone"></div>
+            <div class="ph-zone alkaline-zone"></div>
+            <div id="ph-pointer-orb" class="ph-pointer-orb"></div>
+          </div>
+          <div class="ph-labels">
+            <span>{ui.statusAcidic}</span>
+            <span class="neutral-label">{ui.statusBalanced}</span>
+            <span>{ui.statusAlkaline}</span>
+          </div>
+        </div>
+        
+        <div class="simulation-adjuster">
+          <div class="slider-header-row">
+            <span class="adjuster-label">{ui.simulateSodaLabel}</span>
+            <div class="adjuster-controls">
+              <span id="simulator-val" class="adjuster-val">3.00g</span>
+              <button id="auto-balance-btn" class="btn-auto-balance">{ui.autoBalanceBtn}</button>
+            </div>
+          </div>
+          <input type="range" id="simulator-slider" min="0" max="10" step="0.05" value="3.0" class="premium-range-slider" />
+        </div>
+        
+        <div class="perfect-recipe-card">
+          <h4 class="recipe-title">{ui.resultsTitle}</h4>
+          
+          <div class="recipe-stat-row">
+            <div class="recipe-stat-info">
+              <span class="stat-main-label">{ui.bakingSodaNeeded}</span>
+              <span class="stat-sub-label">Required to neutralize all acid</span>
+            </div>
+            <div class="recipe-stat-numbers">
+              <span id="formula-soda-g" class="num-large">0.00g</span>
+              <span id="formula-soda-tsp" class="num-small">0.00 tsp</span>
+            </div>
+          </div>
+          
+          <div class="recipe-stat-row">
+            <div class="recipe-stat-info">
+              <span class="stat-main-label">{ui.boosterBakingPowder}</span>
+              <span class="stat-sub-label">Additional booster for leavening</span>
+            </div>
+            <div class="recipe-stat-numbers">
+              <span id="formula-booster-g" class="num-large">0.00g</span>
+              <span id="formula-booster-tsp" class="num-small">0.00 tsp</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script is:inline define:vars={{ ui }}>
+  const flourSlider = document.getElementById('flour-slider');
+  const flourValDisplay = document.getElementById('flour-val-display');
+  const unitMetricBtn = document.getElementById('unit-metric-btn');
+  const unitImperialBtn = document.getElementById('unit-imperial-btn');
+  const pillBtns = document.querySelectorAll('.pill-btn');
+  const activeSlidersContainer = document.getElementById('active-sliders-container');
+  
+  const phPointerOrb = document.getElementById('ph-pointer-orb');
+  const simulatorSlider = document.getElementById('simulator-slider');
+  const simulatorVal = document.getElementById('simulator-val');
+  const autoBalanceBtn = document.getElementById('auto-balance-btn');
+  
+  const formulaSodaG = document.getElementById('formula-soda-g');
+  const formulaSodaTsp = document.getElementById('formula-soda-tsp');
+  const formulaBoosterG = document.getElementById('formula-booster-g');
+  const formulaBoosterTsp = document.getElementById('formula-booster-tsp');
+  
+  let currentUnit = 'metric';
+  let targetRecommendedSoda = 3.0;
+  
+  const activeIngredients = {
+    yogurt: 240
+  };
+  
+  const ACID_RATIOS = {
+    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
+  };
+  
+  const MAX_LIMITS = {
+    buttermilk: 500,
+    yogurt: 500,
+    sour_cream: 500,
+    honey: 400,
+    molasses: 400,
+    cocoa: 100,
+    lemon_juice: 100,
+    vinegar: 100
+  };
+  
+  unitMetricBtn.addEventListener('click', () => {
+    if (currentUnit !== 'metric') {
+      const oldFlour = parseFloat(flourSlider.value) || 0;
+      flourSlider.min = "50";
+      flourSlider.max = "1000";
+      flourSlider.step = "10";
+      flourSlider.value = (oldFlour * 28.3495).toFixed(0);
+      
+      for (const key in activeIngredients) {
+        activeIngredients[key] = parseFloat((activeIngredients[key] * 28.3495).toFixed(0));
+      }
+      
+      const oldSlider = parseFloat(simulatorSlider.value);
+      simulatorSlider.value = (oldSlider * 28.3495).toFixed(2);
+      
+      currentUnit = 'metric';
+      unitMetricBtn.classList.add('active');
+      unitImperialBtn.classList.remove('active');
+      renderSliders();
+      update();
+    }
+  });
+  
+  unitImperialBtn.addEventListener('click', () => {
+    if (currentUnit !== 'imperial') {
+      const oldFlour = parseFloat(flourSlider.value) || 0;
+      flourSlider.min = "2";
+      flourSlider.max = "36";
+      flourSlider.step = "0.5";
+      flourSlider.value = (oldFlour / 28.3495).toFixed(1);
+      
+      for (const key in activeIngredients) {
+        activeIngredients[key] = parseFloat((activeIngredients[key] / 28.3495).toFixed(1));
+      }
+      
+      const oldSlider = parseFloat(simulatorSlider.value);
+      simulatorSlider.value = (oldSlider / 28.3495).toFixed(3);
+      
+      currentUnit = 'imperial';
+      unitImperialBtn.classList.add('active');
+      unitMetricBtn.classList.remove('active');
+      renderSliders();
+      update();
+    }
+  });
+  
+  pillBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const type = btn.getAttribute('data-type');
+      if (activeIngredients[type] !== undefined) {
+        delete activeIngredients[type];
+        btn.classList.remove('active');
+      } else {
+        activeIngredients[type] = currentUnit === 'metric' ? 100 : 3.5;
+        btn.classList.add('active');
+      }
+      renderSliders();
+      update();
+    });
+  });
+  
+  function createSliderElement(key, isMetric, unitText) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'slider-wrapper-card';
+    const maxVal = isMetric ? MAX_LIMITS[key] : parseFloat((MAX_LIMITS[key] / 28.3495).toFixed(1));
+    const stepVal = isMetric ? 5 : 0.1;
+    wrapper.innerHTML = `<div class="slider-header-row"><span class="slider-label-name">${ui[`acid_${key}`] || key}</span><span class="slider-value-num">${activeIngredients[key]}${unitText}</span></div><input type="range" class="premium-range-slider" min="0" max="${maxVal}" stroke-linecap="round" step="${stepVal}" value="${activeIngredients[key]}" />`;
+    wrapper.querySelector('input').addEventListener('input', (e) => {
+      activeIngredients[key] = parseFloat(e.target.value) || 0;
+      wrapper.querySelector('.slider-value-num').textContent = `${activeIngredients[key]}${unitText}`;
+      update();
+    });
+    return wrapper;
+  }
+  
+  function renderSliders() {
+    activeSlidersContainer.innerHTML = '';
+    const isMetric = currentUnit === 'metric';
+    const unitText = isMetric ? 'g' : 'oz';
+    
+    for (const key in activeIngredients) {
+      const element = createSliderElement(key, isMetric, unitText);
+      activeSlidersContainer.appendChild(element);
+    }
+  }
+  
+  autoBalanceBtn.addEventListener('click', () => {
+    const isMetric = currentUnit === 'metric';
+    if (isMetric) {
+      simulatorSlider.value = targetRecommendedSoda.toFixed(2);
+    } else {
+      simulatorSlider.value = (targetRecommendedSoda / 28.3495).toFixed(3);
+    }
+    update();
+  });
+  
+  function getNeutralizedSoda(multiplier) {
+    let neutralized = 0;
+    for (const key in activeIngredients) {
+      const weightGrams = activeIngredients[key] * multiplier;
+      const ratio = ACID_RATIOS[key] || 0;
+      neutralized += weightGrams * ratio;
+    }
+    return neutralized;
+  }
+  
+  function updatePointer(diff, neutralizedSoda, simulatedSoda) {
+    let leftPercent = 50;
+    if (neutralizedSoda > 0) {
+      const ratio = simulatedSoda / neutralizedSoda;
+      if (ratio > 1) {
+        leftPercent = 50 + Math.min(45, (ratio - 1) * 35);
+      } else if (ratio < 1) {
+        leftPercent = 50 - Math.min(45, (1 - ratio) * 50);
+      }
+    } else {
+      leftPercent = simulatedSoda > 0 ? 95 : 50;
+    }
+    
+    phPointerOrb.style.left = `${leftPercent}%`;
+    
+    if (Math.abs(diff) <= 0.15) {
+      phPointerOrb.style.backgroundColor = '#10b981';
+      phPointerOrb.style.boxShadow = '0 0 20px #10b981';
+    } else if (diff > 0.15) {
+      phPointerOrb.style.backgroundColor = '#3b82f6';
+      phPointerOrb.style.boxShadow = '0 0 20px #3b82f6';
+    } else {
+      phPointerOrb.style.backgroundColor = '#ec4899';
+      phPointerOrb.style.boxShadow = '0 0 20px #ec4899';
+    }
+  }
+  
+  function updateOutputs(data) {
+    const isMetric = data.isMetric;
+    const neutralizedSoda = data.neutralizedSoda;
+    const boosterPowder = data.boosterPowder;
+    const simulatedSoda = data.simulatedSoda;
+    const sodaTsp = (neutralizedSoda / 6);
+    const boosterTsp = (boosterPowder / 4.8);
+
+    if (isMetric) {
+      formulaSodaG.textContent = `${neutralizedSoda.toFixed(2)}${ui.gramsUnit}`;
+      formulaBoosterG.textContent = `${boosterPowder.toFixed(2)}${ui.gramsUnit}`;
+      simulatorVal.textContent = `${simulatedSoda.toFixed(2)}${ui.gramsUnit}`;
+      formulaSodaTsp.style.display = 'none';
+      formulaBoosterTsp.style.display = 'none';
+      sodaSliderLabel.textContent = `${ui.sodaAddedLabel} (${ui.gramsUnit})`;
+    } else {
+      formulaSodaG.textContent = `${(neutralizedSoda / 28.3495).toFixed(3)}${ui.ouncesUnit}`;
+      formulaBoosterG.textContent = `${(boosterPowder / 28.3495).toFixed(3)}${ui.ouncesUnit}`;
+      simulatorVal.textContent = `${(simulatedSoda / 28.3495).toFixed(3)}${ui.ouncesUnit}`;
+      formulaSodaTsp.style.display = 'block';
+      formulaBoosterTsp.style.display = 'block';
+      formulaSodaTsp.textContent = `${sodaTsp.toFixed(2)} ${ui.teaspoonsUnit}`;
+      formulaBoosterTsp.textContent = `${boosterTsp.toFixed(2)} ${ui.teaspoonsUnit}`;
+      sodaSliderLabel.textContent = `${ui.sodaAddedLabel} (${ui.ouncesUnit})`;
+    }
+  }
+  
+  function update() {
+    const isMetric = currentUnit === 'metric';
+    const multiplier = isMetric ? 1 : 28.3495;
+    const flourVal = parseFloat(flourSlider.value) || 0;
+    flourValDisplay.textContent = `${flourVal}${isMetric ? 'g' : 'oz'}`;
+    const neutralizedSoda = getNeutralizedSoda(multiplier);
+    targetRecommendedSoda = neutralizedSoda;
+    const requiredPowder = flourVal * multiplier * 0.04;
+    const boosterPowder = Math.max(0, requiredPowder - (neutralizedSoda * 4));
+    simulatorSlider.max = Math.max(10, Math.ceil((neutralizedSoda / multiplier) * 2)).toString();
+    const simulatedSoda = parseFloat(simulatorSlider.value) * multiplier;
+    updateOutputs({ isMetric, neutralizedSoda, requiredPowder, boosterPowder, simulatedSoda });
+    updatePointer(simulatedSoda - neutralizedSoda, neutralizedSoda, simulatedSoda);
+  }
+  
+  flourSlider.addEventListener('input', update);
+  simulatorSlider.addEventListener('input', update);
+  
+  renderSliders();
+  update();
+</script>