@jjlmoya/utils-cooking 1.35.0 → 1.37.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/macaron-drying-predictor/bibliography.astro

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

package/src/tool/macaron-drying-predictor/bibliography.ts

@@ -0,0 +1,14 @@
+export const bibliography = [
+  {
+    name: 'Les Petits Macarons: Colorful French Confections to Make at Home - Kathryn Gordon, Anne E. McBride',
+    url: 'https://www.scribd.com/document/484527225/Les-Petits-Macarons-Colorful-French-Confections-to-Make-at-Home-PDFDrive-pdf',
+  },
+  {
+    name: 'Macarons: The definitive guide to mastering the basics',
+    url: 'https://michellesmacarons.com/french-macaron-recipe/',
+  },
+  {
+    name: 'The Science Behind Macarons',
+    url: 'https://docmacaron.com/492/science-behind-macarons/',
+  },
+];

package/src/tool/macaron-drying-predictor/component.astro

@@ -0,0 +1,319 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="md">
+  <div class="md-card">
+    <div class="md-unit-row">
+      <button type="button" id="md-unit-metric" class="md-unit-btn active">Metric</button>
+      <button type="button" id="md-unit-imperial" class="md-unit-btn">Imperial</button>
+    </div>
+    <div class="md-body">
+      <div class="md-controls">
+        <div class="md-input-row">
+          <div class="md-input-group">
+            <label class="md-label" for="md-humidity">{ui.humidityLabel}</label>
+            <div class="md-slider-wrap">
+              <input type="range" id="md-humidity" class="md-slider" min="20" max="90" value="50" />
+              <span class="md-value"><span id="md-humidity-val">50</span><span class="md-unit">{ui.humidityUnit}</span></span>
+            </div>
+            <span id="md-humidity-tag" class="md-tag md-tag-humid-normal">{ui.humidityTagNormal}</span>
+          </div>
+        </div>
+        <div class="md-input-row">
+          <div class="md-input-group">
+            <label class="md-label" for="md-temp">{ui.tempLabel}</label>
+            <div class="md-slider-wrap">
+              <input type="range" id="md-temp" class="md-slider" min="15" max="35" value="22" />
+              <span class="md-value"><span id="md-temp-val">22</span><span class="md-unit" id="md-temp-unit">{ui.tempUnit}</span></span>
+            </div>
+            <span id="md-temp-tag" class="md-tag md-tag-temp-ideal">{ui.tempTagIdeal}</span>
+          </div>
+        </div>
+        <div class="md-input-row">
+          <div class="md-input-group">
+            <label class="md-label" for="md-size">{ui.sizeLabel}</label>
+            <div class="md-slider-wrap">
+              <input type="range" id="md-size" class="md-slider" min="2" max="6" step="0.5" value="3" />
+              <span class="md-value"><span id="md-size-val">3</span><span class="md-unit" id="md-size-unit">{ui.sizeUnit}</span></span>
+            </div>
+            <span id="md-size-tag" class="md-tag md-tag-size-standard">{ui.sizeTagStandard}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="md-result" id="md-result">
+        <div class="md-macaron-visual">
+          <svg viewBox="0 0 200 160" class="md-macaron-svg">
+            <defs>
+              <radialGradient id="md-shell-top" cx="50%" cy="40%" r="50%">
+                <stop offset="0%" stop-color="#f9a8d4" />
+                <stop offset="100%" stop-color="#ec4899" />
+              </radialGradient>
+              <radialGradient id="md-shell-top-dry" cx="50%" cy="40%" r="50%">
+                <stop offset="0%" stop-color="#fce7f3" />
+                <stop offset="100%" stop-color="#f9a8d4" />
+              </radialGradient>
+              <radialGradient id="md-shell-top-overdry" cx="50%" cy="40%" r="50%">
+                <stop offset="0%" stop-color="#f1f5f9" />
+                <stop offset="100%" stop-color="#e2e8f0" />
+              </radialGradient>
+              <filter id="md-shell-glow">
+                <feGaussianBlur stdDeviation="3" result="blur" />
+                <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
+              </filter>
+            </defs>
+            <ellipse id="md-shell-bottom" cx="100" cy="100" rx="70" ry="22" fill="#be185d" />
+            <ellipse id="md-shell-bottom-inner" cx="100" cy="96" rx="60" ry="16" fill="#fce7f3" />
+            <rect id="md-shell-feet" x="25" y="88" width="150" height="14" rx="7" fill="#9d174d" opacity="0.3" />
+            <ellipse id="md-shell-top" cx="100" cy="68" rx="65" ry="36" fill="url(#md-shell-top)" filter="url(#md-shell-glow)" />
+            <text id="md-minutes-display" x="100" y="74" text-anchor="middle" class="md-macaron-minutes">30</text>
+            <text x="100" y="92" text-anchor="middle" class="md-macaron-unit">{ui.minutesUnit}</text>
+          </svg>
+        </div>
+
+        <div class="md-stats-row">
+          <div class="md-stat">
+            <span class="md-stat-label">{ui.readinessLabel}</span>
+            <span id="md-readiness-val" class="md-stat-value">75%</span>
+          </div>
+          <div id="md-skin-badge" class="md-skin-badge ready">{ui.skinStatusReady}</div>
+        </div>
+
+        <div id="md-humidity-desc" class="md-info-card"></div>
+        <div id="md-humidity-note" class="md-info-note"></div>
+      </div>
+    </div>
+
+    <div class="md-footer" id="md-footer">
+      <div class="md-footer-row">
+        <div class="md-footer-chip md-footer-chip-time">
+          <svg width="16" height="16" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/><polyline points="12,6 12,12 16,14" fill="none" stroke="currentColor" stroke-width="2"/></svg>
+          <span id="md-footer-time">30 min</span>
+        </div>
+        <div class="md-footer-chip md-footer-chip-humidity">
+          <svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 2C12 2 4 12 4 16a8 8 0 0 0 16 0C20 12 12 2 12 2z" fill="currentColor"/></svg>
+          <span id="md-footer-humidity">50%</span>
+        </div>
+        <div class="md-footer-chip md-footer-chip-temp">
+          <svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 2v6a4 4 0 1 0 0 8v6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+          <span id="md-footer-temp">22°C</span>
+        </div>
+        <div class="md-footer-chip md-footer-chip-size">
+          <svg width="16" height="16" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="currentColor"/><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
+          <span id="md-footer-size">3cm</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script is:inline define:vars={{ ui }}>
+  const $ = (id) => document.getElementById(id);
+
+  const humidity = $('md-humidity');
+  const temp = $('md-temp');
+  const size = $('md-size');
+  const hVal = $('md-humidity-val');
+  const tVal = $('md-temp-val');
+  const sVal = $('md-size-val');
+  const hTag = $('md-humidity-tag');
+  const tTag = $('md-temp-tag');
+  const sTag = $('md-size-tag');
+  const result = $('md-result');
+  const minutesDisp = $('md-minutes-display');
+  const readinessVal = $('md-readiness-val');
+  const skinBadge = $('md-skin-badge');
+  const humidityDesc = $('md-humidity-desc');
+  const humidityNote = $('md-humidity-note');
+  const footerTime = $('md-footer-time');
+  const footerHumidity = $('md-footer-humidity');
+  const footerTemp = $('md-footer-temp');
+  const footerSize = $('md-footer-size');
+  const footer = $('md-footer');
+  const shellTop = $('md-shell-top');
+  const unitMetric = $('md-unit-metric');
+  const unitImperial = $('md-unit-imperial');
+  const tUnit = $('md-temp-unit');
+  const sUnit = $('md-size-unit');
+
+  let unit = 'metric';
+
+  function cToF(c) { return c * 9/5 + 32; }
+  function fToC(f) { return (f - 32) * 5/9; }
+  function cmToIn(cm) { return cm / 2.54; }
+  function inToCm(inch) { return inch * 2.54; }
+
+  function getTempUnit() { return unit === 'imperial' ? ui.tempUnitF : ui.tempUnit; }
+  function getSizeUnit() { return unit === 'imperial' ? ui.sizeUnitIn : ui.sizeUnit; }
+
+  function setTempBounds(isImp) {
+    temp.setAttribute('min', isImp ? '59' : '15');
+    temp.setAttribute('max', isImp ? '95' : '35');
+    temp.setAttribute('step', '1');
+  }
+
+  function setSizeBounds(isImp) {
+    size.setAttribute('min', isImp ? '0.8' : '2');
+    size.setAttribute('max', isImp ? '2.4' : '6');
+    size.setAttribute('step', isImp ? '0.2' : '0.5');
+  }
+
+  function switchUnit(to) {
+    if (unit === to) return;
+    const tv = parseInt(temp.value) || 22;
+    const sv = parseFloat(size.value) || 3;
+    unit = to;
+    unitMetric.classList.toggle('active', to === 'metric');
+    unitImperial.classList.toggle('active', to === 'imperial');
+
+    const isImp = to === 'imperial';
+    setTempBounds(isImp);
+    setSizeBounds(isImp);
+    temp.value = isImp ? Math.round(cToF(tv)).toString() : tv.toString();
+    size.value = isImp ? cmToIn(sv).toFixed(1) : sv.toString();
+
+    tUnit.textContent = getTempUnit();
+    sUnit.textContent = getSizeUnit();
+    refresh();
+  }
+
+  function getTempC() {
+    const tv = parseInt(temp.value) || 22;
+    return unit === 'imperial' ? fToC(tv) : tv;
+  }
+
+  function getSizeCm() {
+    const sv = parseFloat(size.value) || 3;
+    return unit === 'imperial' ? inToCm(sv) : sv;
+  }
+
+  function formatTemp(tc) { return unit === 'imperial' ? Math.round(cToF(tc)).toString() : tc.toString(); }
+  function formatSize(sc) { return unit === 'imperial' ? cmToIn(sc).toFixed(1) : sc.toString(); }
+
+  function updateHumidityTag(hv) {
+    if (hv >= 65) {
+      hTag.textContent = ui.humidityTagHigh; hTag.className = 'md-tag md-tag-humid-high';
+      humidityDesc.className = 'md-info-card md-info-high';
+      humidityDesc.innerHTML = '<svg class="md-info-svg" viewBox="0 0 24 24"><path d="M12 2C12 2 4 12 4 16a8 8 0 0 0 16 0C20 12 12 2 12 2z" fill="currentColor"/><path d="M12 6v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg><span>' + ui.humidityDescHigh + '</span>';
+    } else if (hv <= 35) {
+      hTag.textContent = ui.humidityTagLow; hTag.className = 'md-tag md-tag-humid-low';
+      humidityDesc.className = 'md-info-card md-info-low';
+      humidityDesc.innerHTML = '<svg class="md-info-svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="currentColor"/><g stroke="currentColor" stroke-width="1.5"><line x1="12" y1="1" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="23"/><line x1="1" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="23" y2="12"/><line x1="4.2" y1="4.2" x2="6.3" y2="6.3"/><line x1="17.7" y1="17.7" x2="19.8" y2="19.8"/><line x1="4.2" y1="19.8" x2="6.3" y2="17.7"/><line x1="17.7" y1="6.3" x2="19.8" y2="4.2"/></g></svg><span>' + ui.humidityDescLow + '</span>';
+    } else {
+      hTag.textContent = ui.humidityTagNormal; hTag.className = 'md-tag md-tag-humid-normal';
+      humidityDesc.className = 'md-info-card md-info-ok';
+      humidityDesc.innerHTML = '<svg class="md-info-svg" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span>' + ui.humidityDescNormal + '</span>';
+    }
+  }
+
+  function updateTempTag(tv) {
+    if (tv >= 28) { tTag.textContent = ui.tempTagHot; tTag.className = 'md-tag md-tag-temp-hot'; }
+    else if (tv <= 18) { tTag.textContent = ui.tempTagCool; tTag.className = 'md-tag md-tag-temp-cool'; }
+    else { tTag.textContent = ui.tempTagIdeal; tTag.className = 'md-tag md-tag-temp-ideal'; }
+  }
+
+  function updateSizeTag(sv) {
+    if (sv <= 2.5) { sTag.textContent = ui.sizeTagMini; sTag.className = 'md-tag md-tag-size-mini'; }
+    else if (sv >= 4.5) { sTag.textContent = ui.sizeTagLarge; sTag.className = 'md-tag md-tag-size-large'; }
+    else { sTag.textContent = ui.sizeTagStandard; sTag.className = 'md-tag md-tag-size-standard'; }
+  }
+
+  function updateTags() {
+    const hv = parseInt(humidity.value);
+    const tv = parseInt(temp.value);
+    const sv = parseFloat(size.value);
+    hVal.textContent = hv.toString();
+    tVal.textContent = tv.toString();
+    sVal.textContent = sv.toString();
+    updateHumidityTag(hv);
+    updateTempTag(tv);
+    updateSizeTag(sv);
+  }
+
+  function updateSkinBadge(readiness) {
+    readinessVal.textContent = readiness + '%';
+    if (readiness >= 90) {
+      readinessVal.style.color = 'var(--md-green)';
+      skinBadge.textContent = ui.skinStatusReady;
+      skinBadge.className = 'md-skin-badge ready';
+      shellTop.setAttribute('fill', 'url(#md-shell-top)');
+    } else if (readiness >= 60) {
+      readinessVal.style.color = 'var(--md-amber)';
+      skinBadge.textContent = ui.skinStatusForming;
+      skinBadge.className = 'md-skin-badge forming';
+      shellTop.setAttribute('fill', 'url(#md-shell-top-dry)');
+    } else if (readiness >= 20) {
+      readinessVal.style.color = 'var(--md-pink)';
+      skinBadge.textContent = ui.skinStatusSticky;
+      skinBadge.className = 'md-skin-badge sticky';
+      shellTop.setAttribute('fill', 'url(#md-shell-top)');
+    } else {
+      readinessVal.style.color = 'var(--md-gray)';
+      skinBadge.textContent = ui.skinStatusOverDry;
+      skinBadge.className = 'md-skin-badge over-dry';
+      shellTop.setAttribute('fill', 'url(#md-shell-top-overdry)');
+    }
+  }
+
+  function compute() {
+    const hv = parseInt(humidity.value);
+    const tc = getTempC();
+    const sc = getSizeCm();
+    const hc = Math.max(20, Math.min(90, hv));
+    const tcc = Math.max(15, Math.min(35, tc));
+    const dcc = Math.max(2, Math.min(6, sc));
+
+    const hf = 1 + Math.pow((hc - 30) / 30, 2) * 2;
+    const tf = 1 + (25 - tcc) * 0.04;
+    const sf = Math.pow(dcc / 3, 1.5);
+    const minutes = Math.round(30 * hf * tf * sf);
+    const readiness = Math.max(0, Math.min(100, Math.round(100 - (hf - 1) * 50 - (tf - 1) * 30)));
+
+    minutesDisp.textContent = minutes.toString();
+    updateSkinBadge(readiness);
+    humidityNote.textContent = Math.round(hf * 100) / 100 !== 1 ? hf.toFixed(1) + 'x factor' : '';
+
+    footerTime.textContent = minutes + ' ' + ui.minutesUnit;
+    footerHumidity.textContent = hv + ui.humidityUnit;
+    footerTemp.textContent = formatTemp(tc) + getTempUnit();
+    footerSize.textContent = formatSize(sc) + ' ' + getSizeUnit();
+    footer.style.display = 'flex';
+    result.style.display = 'flex';
+  }
+
+  const STORAGE_KEY = 'md-v1';
+
+  function save() {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({ h: humidity.value, t: temp.value, s: size.value, u: unit }));
+    } catch {}
+  }
+
+  function load() {
+    try {
+      const d = localStorage.getItem(STORAGE_KEY);
+      if (!d) return;
+      const v = JSON.parse(d);
+      if (v.u === 'imperial') switchUnit('imperial');
+      if (v.h) humidity.value = v.h;
+      if (v.t) temp.value = v.t;
+      if (v.s) size.value = v.s;
+    } catch {}
+  }
+
+  function refresh() { updateTags(); compute(); save(); }
+
+  unitMetric.addEventListener('click', function() { switchUnit('metric'); });
+  unitImperial.addEventListener('click', function() { switchUnit('imperial'); });
+  humidity.addEventListener('input', refresh);
+  temp.addEventListener('input', refresh);
+  size.addEventListener('input', refresh);
+
+  load();
+  refresh();
+</script>