@jjlmoya/utils-cooking 1.29.0 → 1.31.0

package/src/tool/ice-cream-pac-pod/ice-cream-pac-pod.css

@@ -0,0 +1,570 @@
+.ice-cream-container {
+  --color-cone-bg: #fffbf2;
+  --color-panel-bg: #fff;
+  --color-border-neon: #ec4899;
+  --color-border-mute: #fcd34d;
+  --color-text-bright: #7c2d12;
+  --color-text-dim: #9a3412;
+  --color-neon-blue: #0284c7;
+  --color-neon-pink: #db2777;
+  --color-neon-yellow: #ca8a04;
+  --color-neon-green: #16a34a;
+  --color-fader-track: #fef3c7;
+  --color-fader-thumb: #ec4899;
+  --color-fader-thumb-hover: #db2777;
+  --color-stick-bg: #fed7aa;
+  --color-stick-border: #f97316;
+  --color-shadow-ambient: rgba(124, 45, 18, 0.08);
+  --color-cherry: #dc2626;
+  --bg-vanilla: #fef9c3;
+  --bg-strawberry: #fce7f3;
+  --bg-mint: #d1fae5;
+  --bg-chocolate: #ffedd5;
+  --bg-peach: #ffe4e6;
+  --color-scoop-text: #7c2d12;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.theme-dark .ice-cream-container {
+  --color-cone-bg: #0f172a;
+  --color-panel-bg: #1e293b;
+  --color-border-neon: #f472b6;
+  --color-border-mute: #334155;
+  --color-text-bright: #f8fafc;
+  --color-text-dim: #94a3b8;
+  --color-neon-blue: #38bdf8;
+  --color-neon-pink: #f472b6;
+  --color-neon-yellow: #facc15;
+  --color-neon-green: #4ade80;
+  --color-fader-track: #0f172a;
+  --color-fader-thumb: #f472b6;
+  --color-fader-thumb-hover: #ef4444;
+  --color-stick-bg: #475569;
+  --color-stick-border: #334155;
+  --color-shadow-ambient: rgba(0, 0, 0, 0.4);
+  --bg-vanilla: rgba(253, 244, 195, 0.15);
+  --bg-strawberry: rgba(252, 231, 243, 0.15);
+  --bg-mint: rgba(209, 250, 229, 0.15);
+  --bg-chocolate: rgba(255, 237, 213, 0.15);
+  --bg-peach: rgba(255, 228, 230, 0.15);
+  --color-scoop-text: #f8fafc;
+}
+
+.cryo-card {
+  position: relative;
+  width: 100%;
+  max-width: 950px;
+  background: var(--color-cone-bg);
+  border: 4px solid var(--color-border-mute);
+  border-radius: 28px;
+  padding: 2rem;
+  box-shadow: 0 25px 50px -12px var(--color-shadow-ambient);
+  box-sizing: border-box;
+}
+
+.cryo-grid {
+  display: grid;
+  grid-template-columns: 1.25fr 1fr;
+  gap: 2rem;
+}
+
+@media (max-width: 768px) {
+  .cryo-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.ice-cream-recipe-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.base-parameters-board {
+  background: var(--color-panel-bg);
+  border: 3px solid var(--color-border-mute);
+  border-radius: 20px;
+  padding: 1.5rem;
+  box-sizing: border-box;
+}
+
+.board-title {
+  font-size: 1.1rem;
+  font-weight: 900;
+  color: var(--color-text-bright);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 1.25rem;
+  border-bottom: 3px dashed var(--color-border-mute);
+  padding-bottom: 0.5rem;
+}
+
+.unit-toggle-container {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.unit-btn {
+  flex: 1;
+  padding: 0.6rem;
+  background: var(--color-cone-bg);
+  border: 2px solid var(--color-border-mute);
+  color: var(--color-text-dim);
+  font-weight: 900;
+  font-size: 0.95rem;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.unit-btn.active {
+  background: var(--color-border-neon);
+  border-color: var(--color-border-neon);
+  color: var(--color-panel-bg);
+}
+
+.base-field {
+  margin-bottom: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.field-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.field-label {
+  font-size: 1rem;
+  font-weight: 800;
+  color: var(--color-text-bright);
+}
+
+.field-value-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.field-number {
+  width: 70px;
+  background: var(--color-cone-bg);
+  border: 2px solid var(--color-border-mute);
+  color: var(--color-text-bright);
+  text-align: right;
+  padding: 0.25rem 0.5rem;
+  font-size: 1rem;
+  font-weight: 900;
+  border-radius: 8px;
+}
+
+.cone-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 8px;
+  background: var(--color-fader-track);
+  border-radius: 4px;
+  outline: none;
+  border: 1px solid var(--color-border-mute);
+}
+
+.cone-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-border-neon);
+  border: 2px solid #fff;
+  cursor: pointer;
+}
+
+.scoop-recipe-cone {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.scoop-scoop {
+  border: 3px solid var(--color-border-mute);
+  border-radius: 24px;
+  padding: 1.25rem;
+  box-sizing: border-box;
+}
+
+.sucrose-scoop { background: var(--bg-vanilla); }
+.dextrose-scoop { background: var(--bg-strawberry); }
+.glucose-scoop { background: var(--bg-mint); }
+.inverted-scoop { background: var(--bg-chocolate); }
+.trehalose-scoop { background: var(--bg-peach); }
+
+.scoop-inner-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.scoop-label-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.scoop-text-label {
+  font-size: 1.05rem;
+  font-weight: 900;
+  color: var(--color-scoop-text);
+}
+
+.scoop-readout {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.scoop-number-input {
+  -moz-appearance: textfield;
+  width: 65px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 2px solid var(--color-border-mute);
+  color: var(--color-scoop-text);
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 900;
+  border-radius: 8px;
+  padding: 0.25rem;
+}
+
+.theme-dark .scoop-number-input {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.scoop-number-input::-webkit-outer-spin-button,
+.scoop-number-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.scoop-slider-bar {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 4px;
+  outline: none;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.theme-dark .scoop-slider-bar {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.scoop-slider-bar::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #f00;
+  border: 2px solid #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+}
+
+.popsicle-indicators-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.popsicle-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.popsicle-label-top {
+  font-size: 0.95rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  color: var(--color-text-dim);
+  margin-bottom: 0.5rem;
+  text-align: center;
+  min-height: 2.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.popsicle-body-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.popsicle-outline {
+  position: relative;
+  width: 70px;
+  height: 180px;
+  background: var(--color-panel-bg);
+  border: 3px solid var(--color-border-mute);
+  border-radius: 35px 35px 12px 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px var(--color-shadow-ambient);
+}
+
+.popsicle-fill {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 0%;
+  transition: height 0.35s ease;
+}
+
+.pac-fill-color {
+  background: linear-gradient(0deg, var(--color-neon-blue) 0%, #a5f3fc 100%);
+}
+
+.pod-fill-color {
+  background: linear-gradient(0deg, var(--color-neon-pink) 0%, #fbcfe8 100%);
+}
+
+.solids-fill-color {
+  background: linear-gradient(0deg, var(--color-neon-green) 0%, #ccfbf1 100%);
+}
+
+.popsicle-number-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.popsicle-number-overlay span {
+  font-size: 1.4rem;
+  font-weight: 950;
+  color: var(--color-text-bright);
+  text-shadow: 0 1px 2px var(--color-panel-bg);
+}
+
+.popsicle-stick {
+  width: 16px;
+  height: 35px;
+  background: var(--color-stick-bg);
+  border: 2px solid var(--color-stick-border);
+  border-top: none;
+  border-radius: 0 0 8px 8px;
+}
+
+.popsicle-target-display {
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+  font-weight: 800;
+  color: var(--color-text-dim);
+}
+
+.scoop-visualizer-container {
+  background: var(--color-panel-bg);
+  border: 3px solid var(--color-border-mute);
+  border-radius: 20px;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.visualizer-header {
+  font-size: 0.95rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  color: var(--color-text-dim);
+  margin: 0 0 1rem;
+}
+
+.sundae-bowl-display {
+  position: relative;
+  width: 100%;
+  max-width: 220px;
+  aspect-ratio: 1;
+  background: var(--color-cone-bg);
+  border: 3px solid var(--color-border-mute);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  margin-bottom: 1.25rem;
+}
+
+.bowl-inner {
+  position: relative;
+  width: 90%;
+  height: 90%;
+}
+
+.bowl-base {
+  fill: var(--color-border-mute);
+  stroke: var(--color-text-dim);
+  stroke-width: 2;
+}
+
+.bowl-glass {
+  fill: none;
+  stroke: var(--color-text-dim);
+  stroke-width: 2;
+}
+
+.sundae-ice-block {
+  fill: var(--color-neon-blue);
+  stroke: var(--color-text-bright);
+  stroke-width: 2;
+  opacity: 0.9;
+}
+
+.sundae-crack {
+  stroke: var(--color-panel-bg);
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+
+.sundae-swirl-body {
+  fill: var(--color-neon-pink);
+  stroke: var(--color-text-bright);
+  stroke-width: 2;
+  animation: float-scoop 3s infinite ease-in-out;
+}
+
+.sundae-swirl-shade {
+  fill: var(--color-panel-bg);
+  opacity: 0.45;
+}
+
+.sundae-cherry {
+  fill: var(--color-cherry);
+  stroke: var(--color-text-bright);
+  stroke-width: 1.5;
+}
+
+.sundae-cherry-stem {
+  fill: none;
+  stroke: var(--color-text-bright);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+}
+
+.sundae-melted-puddle {
+  fill: var(--color-neon-pink);
+  stroke: var(--color-text-bright);
+  stroke-width: 2;
+  opacity: 0.85;
+}
+
+.sundae-drip-stream {
+  fill: none;
+  stroke: var(--color-neon-pink);
+  stroke-width: 3;
+  stroke-linecap: round;
+  animation: drip-stream-fall 2s infinite ease-in;
+}
+
+@keyframes float-scoop {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+.bowl-status-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  transition: background 0.3s ease;
+}
+
+.bowl-status-glow.glow-creamy {
+  background: radial-gradient(circle, var(--color-glow-solids) 0%, transparent 80%);
+}
+
+.bowl-status-glow.glow-stone {
+  background: radial-gradient(circle, var(--color-glow-pac) 0%, transparent 80%);
+}
+
+.bowl-status-glow.glow-soup {
+  background: radial-gradient(circle, var(--color-glow-pod) 0%, transparent 80%);
+}
+
+.scoop-status-card {
+  text-align: center;
+  width: 100%;
+}
+
+.status-badge {
+  display: inline-block;
+  padding: 0.4rem 1.25rem;
+  border-radius: 10px;
+  font-weight: 900;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+}
+
+.status-badge.optimal {
+  background: var(--color-neon-green);
+  color: var(--color-panel-bg);
+}
+
+.status-badge.danger {
+  background: var(--color-neon-blue);
+  color: var(--color-panel-bg);
+}
+
+.status-badge.inhibited {
+  background: var(--color-neon-pink);
+  color: var(--color-panel-bg);
+}
+
+.status-desc {
+  font-size: 0.95rem;
+  color: var(--color-text-dim);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.texture-state {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.texture-state.hidden {
+  display: none;
+}
+

package/src/tool/ice-cream-pac-pod/index.ts

@@ -0,0 +1,11 @@
+import type { ToolDefinition } from '../../types';
+import { iceCreamPacPod } from './entry';
+
+export * from './entry';
+
+export const ICE_CREAM_PAC_POD_TOOL: ToolDefinition = {
+  entry: iceCreamPacPod,
+  Component: () => import('./component.astro'),
+  SEOComponent: () => import('./seo.astro'),
+  BibliographyComponent: () => import('./bibliography.astro'),
+};

package/src/tool/ice-cream-pac-pod/logic.ts

@@ -0,0 +1,62 @@
+export interface SugarInputs {
+  sucrose: number;
+  dextrose: number;
+  glucose: number;
+  inverted: number;
+  trehalose: number;
+}
+
+export interface IceCreamInput {
+  sugars: SugarInputs;
+  baseWeight: number;
+  targetTemp: number;
+}
+
+export interface IceCreamResult {
+  totalPAC: number;
+  totalPOD: number;
+  solidsPercentage: number;
+  scoopability: 'stone' | 'creamy' | 'soup';
+  targetPAC: number;
+}
+
+export class IceCreamLogic {
+  static sumWeight(sugars: SugarInputs): number {
+    return sugars.sucrose + sugars.dextrose + sugars.glucose + sugars.inverted + sugars.trehalose;
+  }
+
+  static computeContributions(sugars: SugarInputs): { pac: number; pod: number } {
+    const pac = sugars.sucrose * 1.0 + sugars.dextrose * 1.9 + sugars.glucose * 0.9 + sugars.inverted * 1.9 + sugars.trehalose * 1.0;
+    const pod = sugars.sucrose * 1.0 + sugars.dextrose * 0.7 + sugars.glucose * 0.4 + sugars.inverted * 1.3 + sugars.trehalose * 0.45;
+    return { pac, pod };
+  }
+
+  static computeScoopability(totalPAC: number, targetPAC: number): 'stone' | 'creamy' | 'soup' {
+    const tolerance = 40;
+    if (totalPAC < targetPAC - tolerance) return 'stone';
+    if (totalPAC > targetPAC + tolerance) return 'soup';
+    return 'creamy';
+  }
+
+  static calculate(input: IceCreamInput): IceCreamResult {
+    const waterWeight = input.baseWeight * 0.7 + input.sugars.inverted * 0.3;
+    const otherSolids = input.baseWeight * 0.3;
+    const totalSolids = otherSolids + input.sugars.sucrose + input.sugars.dextrose + input.sugars.glucose * 0.95 + input.sugars.inverted * 0.7 + input.sugars.trehalose * 0.9;
+
+    const totalMixWeight = input.baseWeight + IceCreamLogic.sumWeight(input.sugars);
+    const contributions = IceCreamLogic.computeContributions(input.sugars);
+
+    const totalPAC = waterWeight > 0 ? parseFloat(((contributions.pac / waterWeight) * 1000).toFixed(1)) : 0;
+    const totalPOD = totalMixWeight > 0 ? parseFloat(((contributions.pod / totalMixWeight) * 100).toFixed(1)) : 0;
+    const solidsPercentage = totalMixWeight > 0 ? parseFloat(((totalSolids / totalMixWeight) * 100).toFixed(1)) : 0;
+    const targetPAC = Math.round(18 * Math.abs(input.targetTemp));
+
+    return {
+      totalPAC,
+      totalPOD,
+      solidsPercentage,
+      scoopability: IceCreamLogic.computeScoopability(totalPAC, targetPAC),
+      targetPAC,
+    };
+  }
+}

package/src/tool/ice-cream-pac-pod/seo.astro

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

package/src/tool/spherification-bath-calculator/component.astro

@@ -124,6 +124,41 @@ const { ui } = Astro.props;
     };
   }
 
+  const STORAGE_KEY = 'cooking-spherification-state';
+
+  function saveState() {
+    const state = {
+      activeUnit,
+      activeMethod,
+      useXanthan,
+      useCitrate,
+      baseWeight: baseInput.value,
+      bathWeight: bathInput.value
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  }
+
+  function loadState() {
+    try {
+      const data = localStorage.getItem(STORAGE_KEY);
+      if (!data) return;
+      const state = JSON.parse(data);
+      if (state.activeUnit) activeUnit = state.activeUnit;
+      if (state.activeMethod) activeMethod = state.activeMethod;
+      [['xanthanBtn', 'xanthan-switch-circle', 'useXanthan'],
+        ['citrateBtn', 'citrate-switch-circle', 'useCitrate']].forEach(([btnId, circleId, key]) => {
+        if (state[key]) {
+          if (key === 'useXanthan') useXanthan = true; else useCitrate = true;
+          document.getElementById(btnId).classList.add('active');
+          document.getElementById(circleId).classList.add('active');
+        }
+      });
+      [['baseWeight', baseInput], ['bathWeight', bathInput]].forEach(([key, el]) => {
+        if (state[key]) el.value = state[key];
+      });
+    } catch {}
+  }
+
   function updateView() {
     let baseWeight = Math.max(0, parseFloat(baseInput.value) || 0);
     let bathWeight = Math.max(0, parseFloat(bathInput.value) || 0);
@@ -137,6 +172,7 @@ const { ui } = Astro.props;
     const displayFactor = activeUnit === 'imperial' ? 0.035274 : 1.0;
     updateRecipeList(result, displayFactor);
     updateReactorUI();
+    saveState();
   }
 
   function convertInputsTo(targetUnit) {
@@ -209,5 +245,6 @@ const { ui } = Astro.props;
   baseInput.addEventListener('input', updateView);
   bathInput.addEventListener('input', updateView);
 
+  loadState();
   updateView();
 </script>