@jjlmoya/utils-cooking 1.9.0 → 1.11.0

package/src/tool/roux-guide/component.astro

@@ -1,6 +1,5 @@
 ---
 import { Icon } from 'astro-icon/components';
-import './RouxGuide.css';
 
 interface Props {
 	ui: Record<string, string>;
@@ -185,10 +184,490 @@ const { ui } = Astro.props;
 	}
 </script>
 
+<style is:global>
+	:root {
+		--rg-primary: hsl(38deg, 92%, 50%);
+		--rg-primary-light: hsl(38deg, 92%, 90%);
+		--rg-secondary: hsl(25deg, 95%, 53%);
+		--rg-bg-card: hsl(0deg, 0%, 100%);
+		--rg-bg-app: hsl(210deg, 20%, 98%);
+		--rg-border: hsl(210deg, 20%, 90%);
+		--rg-text-main: hsl(210deg, 30%, 20%);
+		--rg-text-muted: hsl(210deg, 15%, 50%);
+		--rg-shadow-lg: 0 10px 15px -3px rgb(0, 0, 0, 0.1);
+		--rg-radius: 1rem;
+	}
+
+	.theme-dark {
+		--rg-bg-card: hsl(220deg, 25%, 12%);
+		--rg-bg-app: hsl(220deg, 30%, 7%);
+		--rg-border: hsl(220deg, 20%, 20%);
+		--rg-text-main: hsl(210deg, 20%, 95%);
+		--rg-text-muted: hsl(210deg, 15%, 70%);
+		--rg-primary-light: hsl(38deg, 92%, 12%);
+	}
+</style>
+
 <style>
 	input[type='number']::-webkit-outer-spin-button,
 	input[type='number']::-webkit-inner-spin-button {
 		-webkit-appearance: none;
 		margin: 0;
 	}
+
+	.rg-container {
+		width: 100%;
+		max-width: 100%;
+		padding: 1rem;
+	}
+
+	.rg-card {
+		background: var(--rg-bg-card);
+		border: 1px solid var(--rg-border);
+		border-radius: var(--rg-radius);
+		box-shadow: var(--rg-shadow-lg);
+		overflow: hidden;
+	}
+
+	.rg-progress-wrapper {
+		height: 0.375rem;
+		width: 100%;
+		background: var(--rg-bg-app);
+		position: relative;
+	}
+
+	.rg-progress-bar {
+		height: 100%;
+		background: linear-gradient(to right, var(--rg-primary), var(--rg-secondary));
+		transition: width 0.3s ease;
+		width: 50%;
+	}
+
+	.rg-content {
+		padding: 2rem;
+	}
+
+	@media (max-width: 1024px) {
+		.rg-content {
+			padding: 1.5rem;
+		}
+	}
+
+	@media (max-width: 640px) {
+		.rg-content {
+			padding: 1rem;
+		}
+	}
+
+	.rg-grid {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 3rem;
+	}
+
+	@media (min-width: 1024px) {
+		.rg-grid {
+			grid-template-columns: 1fr 1fr;
+		}
+	}
+
+	.rg-controls {
+		display: flex;
+		flex-direction: column;
+		gap: 2.5rem;
+	}
+
+	.rg-control-group {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.rg-label {
+		font-size: 0.75rem;
+		font-weight: 700;
+		color: var(--rg-text-muted);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+	}
+
+	.rg-step {
+		width: 1.5rem;
+		height: 1.5rem;
+		border-radius: 50%;
+		background: hsl(38deg, 92%, 90%);
+		color: var(--rg-primary);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: 700;
+		font-size: 0.75rem;
+	}
+
+	:global(.theme-dark) .rg-step {
+		background: hsl(38deg, 92%, 12%);
+	}
+
+	.rg-volume-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	@media (min-width: 640px) {
+		.rg-volume-wrapper {
+			flex-direction: row;
+			gap: 1rem;
+		}
+	}
+
+	.rg-input-group {
+		position: relative;
+		flex: 1;
+	}
+
+	.rg-input {
+		width: 100%;
+		padding: 1rem 2rem 1rem 1rem;
+		border: 2px solid var(--rg-border);
+		border-radius: 0.75rem;
+		background: var(--rg-bg-app);
+		color: var(--rg-text-main);
+		font-weight: 600;
+		font-size: 1.875rem;
+		text-align: center;
+		transition: all 0.3s ease;
+	}
+
+	.rg-input:focus {
+		outline: none;
+		border-color: var(--rg-primary);
+		box-shadow: 0 0 0 3px hsl(38deg, 92%, 50%, 0.1);
+	}
+
+	.rg-unit {
+		position: absolute;
+		right: 1rem;
+		top: 50%;
+		transform: translateY(-50%);
+		color: var(--rg-text-muted);
+		font-weight: 600;
+		font-size: 0.875rem;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		pointer-events: none;
+	}
+
+	.rg-liquid-buttons {
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		gap: 0.5rem;
+	}
+
+	@media (max-width: 640px) {
+		.rg-liquid-buttons {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+
+	.rg-liquid-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.75rem;
+		border: 2px solid var(--rg-border);
+		border-radius: 0.75rem;
+		background: var(--rg-bg-card);
+		color: var(--rg-text-muted);
+		cursor: pointer;
+		transition: all 0.3s ease;
+	}
+
+	.rg-liquid-btn:hover {
+		border-color: var(--rg-primary);
+		color: var(--rg-primary);
+	}
+
+	.rg-liquid-btn.active {
+		background: var(--rg-bg-app);
+		border-color: var(--rg-primary);
+		color: var(--rg-primary);
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	}
+
+	.rg-btn-icon {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+
+	.rg-texture-grid {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		gap: 0.75rem;
+	}
+
+	@media (min-width: 640px) {
+		.rg-texture-grid {
+			grid-template-columns: repeat(4, 1fr);
+		}
+	}
+
+	.rg-texture-btn {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 1rem 0.75rem;
+		border: 2px solid var(--rg-border);
+		border-radius: 0.75rem;
+		background: var(--rg-bg-card);
+		color: var(--rg-text-muted);
+		cursor: pointer;
+		transition: all 0.3s ease;
+		text-align: center;
+	}
+
+	.rg-texture-btn:hover {
+		border-color: var(--rg-primary);
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	}
+
+	.rg-texture-btn.active {
+		background: var(--rg-primary-light);
+		border-color: var(--rg-primary);
+		color: var(--rg-primary);
+	}
+
+	.rg-texture-visual {
+		width: 1.5rem;
+		height: 1.5rem;
+		border: 1px solid currentcolor;
+		border-radius: 0.25rem;
+		overflow: hidden;
+		display: flex;
+		align-items: flex-end;
+	}
+
+	.rg-texture-bar {
+		width: 100%;
+		background: currentcolor;
+		transition: height 0.3s ease;
+	}
+
+	.rg-texture-btn[data-level="1"] .rg-texture-bar {
+		height: 25%;
+	}
+
+	.rg-texture-btn[data-level="2"] .rg-texture-bar {
+		height: 50%;
+	}
+
+	.rg-texture-btn[data-level="3"] .rg-texture-bar {
+		height: 75%;
+	}
+
+	.rg-texture-btn[data-level="4"] .rg-texture-bar {
+		height: 100%;
+	}
+
+	.rg-texture-label {
+		font-size: 0.75rem;
+		font-weight: 600;
+		line-height: 1.2;
+	}
+
+	.rg-results {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	.rg-result-hero {
+		background: linear-gradient(135deg, var(--rg-primary), var(--rg-secondary));
+		border-radius: var(--rg-radius);
+		padding: 2rem;
+		color: var(--rg-bg-card);
+		box-shadow: var(--rg-shadow-lg);
+		position: relative;
+		overflow: hidden;
+	}
+
+	.rg-result-hero::before {
+		content: '';
+		position: absolute;
+		top: -50%;
+		left: -50%;
+		width: 200%;
+		height: 200%;
+		background: radial-gradient(circle, hsla(0deg, 0%, 100%, 0.1), transparent 60%);
+		pointer-events: none;
+	}
+
+	.rg-result-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 1.5rem;
+		position: relative;
+		z-index: 1;
+	}
+
+	.rg-result-label {
+		font-size: 0.75rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		opacity: 0.8;
+	}
+
+	.rg-roux-type {
+		font-size: 0.75rem;
+		font-weight: 600;
+		background: hsla(0deg, 0%, 0%, 0.2);
+		padding: 0.5rem 1rem;
+		border-radius: 0.5rem;
+		text-transform: capitalize;
+	}
+
+	.rg-result-amounts {
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		margin-bottom: 1.5rem;
+		position: relative;
+		z-index: 1;
+		text-align: center;
+	}
+
+	.rg-amount {
+		flex: 1;
+	}
+
+	.rg-amount-value {
+		font-size: 2.5rem;
+		font-weight: 800;
+		margin-bottom: 0.5rem;
+		line-height: 1;
+	}
+
+	.rg-amount-unit {
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		opacity: 0.8;
+	}
+
+	.rg-amount-plus {
+		font-size: 1.5rem;
+		opacity: 0.3;
+		margin: 0 1rem;
+	}
+
+	.rg-instructions-box {
+		background: hsla(0deg, 0%, 0%, 0.2);
+		border-radius: 0.75rem;
+		border: 1px solid hsla(0deg, 0%, 100%, 0.1);
+		padding: 1rem;
+		position: relative;
+		z-index: 1;
+		backdrop-filter: blur(4px);
+	}
+
+	.rg-instructions-header {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.75rem;
+		color: hsl(38deg, 92%, 90%);
+	}
+
+	.rg-instructions-icon {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.rg-instructions-title {
+		font-size: 0.75rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+	}
+
+	.rg-instructions-text {
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1.5;
+		color: hsl(38deg, 92%, 95%);
+		margin: 0;
+	}
+
+	.rg-sauce-info {
+		background: var(--rg-bg-app);
+		border: 1px solid var(--rg-border);
+		border-radius: var(--rg-radius);
+		padding: 1.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.rg-sauce-header {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		margin-bottom: 0.5rem;
+	}
+
+	.rg-sauce-icon {
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 0.5rem;
+		background: hsl(38deg, 92%, 90%);
+		color: var(--rg-primary);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	:global(.theme-dark) .rg-sauce-icon {
+		background: hsl(38deg, 92%, 12%);
+	}
+
+	.rg-icon-lg {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+
+	.rg-sauce-name {
+		font-size: 1rem;
+		font-weight: 700;
+		color: var(--rg-text-main);
+		flex: 1;
+	}
+
+	.rg-sauce-ratio {
+		font-size: 0.75rem;
+		font-weight: 700;
+		color: var(--rg-text-muted);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		white-space: nowrap;
+	}
+
+	.rg-sauce-tip {
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1.6;
+		color: var(--rg-text-muted);
+		font-style: italic;
+		background: var(--rg-bg-card);
+		padding: 1rem;
+		border-radius: 0.75rem;
+		border: 1px solid var(--rg-border);
+		margin: 0;
+	}
 </style>

package/src/tool/roux-guide/i18n/en.ts

@@ -105,6 +105,23 @@ export const content: ToolLocaleContent = {
     blond: "Blond",
     brown: "Brown",
     beurreManied: "Beurre Manié (For final adjustments)",
+    recipeBechamel: "Béchamel",
+    recipeVeloute: "Velouté",
+    recipeEspagnole: "Espagnole",
+    recipeTomato: "Tomato Sauce",
+    tipBechamel: "Use cold milk. Add it gradually at first or all at once if you whisk vigorously.",
+    tipVeloute: "Use light poultry or fish stock. Let the roux smell like biscuits before adding the liquid.",
+    tipEspagnole: "For powerful dark sauces. The roux should be chocolate-colored but not burnt.",
+    tipTomato: "The roux will help give body and smoothness to the tomato's final texture.",
+    rouxWhiteLabel: "White Roux",
+    rouxBlondLabel: "Blond Roux",
+    rouxBrownLabel: "Brown Roux",
+    descWhite: "Cook only until it loses the raw flour smell. No color.",
+    descBlond: "Look for a toasted butter color and nutty aroma.",
+    descBrown: "Very low heat. Chocolate color. Note: requires +10% weight.",
+    timeWhite: "2-3 min",
+    timeBlond: "5-8 min",
+    timeBrown: "15-20 min",
   },
   faqTitle: "Frequently Asked Questions",
   faq: [
@@ -304,5 +321,5 @@ export const content: ToolLocaleContent = {
       html: "Our roux ratio calculator ensures your sauces always have the perfect technical consistency for every dish.",
     },
   ],
-  schemas: [faqSchema, howToSchema, appSchema],
+  schemas: [faqSchema as any, howToSchema as any, appSchema as any],
 };

package/src/tool/roux-guide/i18n/es.ts

@@ -227,7 +227,7 @@ export const content: ToolLocaleContent = {
 			type: 'diagnostic',
 			variant: 'warning',
 			title: '¿Salsa con Grumaje o Sabor a Harina?',
-			html: 'Si la salsa tiene grumos, probablemente añadiste líquido caliente a un roux caliente. Aplica el choque térmico (líquido frío sobre roux caliente). Si sabe a harina, aumenta el tiempo de cocción inicial antes de añadir el líquido para gelatinizar el almidón correctamente.',
+			html: 'Si la salsa tiene grumos, probablemente añadiste líquido caliente a un roux caliente. Aplica el choque térmico (liquide frío sobre roux caliente). Si sabe a harina, aumenta el tiempo de cocción inicial antes de añadir el líquido para gelatinizar el almidón correctamente.',
 		},
 		{
 			type: 'title',
@@ -284,13 +284,30 @@ export const content: ToolLocaleContent = {
     butter: 'Mantequilla',
     flour: 'Harina',
     instructions: 'Instrucciones',
-    sauceName: 'Tipo de Salsa',
+    sauceName: 'Tipo de Sauce',
     ratio: 'Ratio',
     chefTip: 'Tip del Chef',
     white: 'Blanco',
     blond: 'Rubio',
     brown: 'Oscuro',
     beurreManied: 'Beurre Manié (Si necesitas ajustar al final)',
+    recipeBechamel: "Bechamel",
+    recipeVeloute: "Velouté",
+    recipeEspagnole: "Española",
+    recipeTomato: "Salsa de Tomate",
+    tipBechamel: "Usa leche fría. Añádela gradualmente al principio o de golpe si bates fuerte.",
+    tipVeloute: "Usa fondo de ave o pescado. Deja que el roux huela a galleta antes de ligar.",
+    tipEspagnole: "Para salsas oscuras potentes. El roux debe estar color chocolate, pero sin quemarse.",
+    tipTomato: "El roux ayudará a dar cuerpo y suavidad a la textura final del tomate.",
+    rouxWhiteLabel: "Roux Blanco",
+    rouxBlondLabel: "Roux Rubio",
+    rouxBrownLabel: "Roux Oscuro",
+    descWhite: "Cocina solo hasta perder el olor a harina cruda. Sin color.",
+    descBlond: "Busca un color de mantequilla tostada y un aroma a nueces.",
+    descBrown: "Fuego muy suave. Color chocolate. Nota: requiere un 10% más de peso.",
+    timeWhite: "2-3 min",
+    timeBlond: "5-8 min",
+    timeBrown: "15-20 min",
   },
-  schemas: [faqSchema, howToSchema, appSchema],
+  schemas: [faqSchema as any, howToSchema as any, appSchema as any],
 };

package/src/tool/roux-guide/i18n/fr.ts

@@ -101,6 +101,23 @@ export const content: ToolLocaleContent = {
     blond: "Blond",
     brown: "Brun",
     beurreManied: "Beurre Manié (Pour ajuster à la fin)",
+    recipeBechamel: "Béchamel",
+    recipeVeloute: "Velouté",
+    recipeEspagnole: "Espagnole",
+    recipeTomato: "Sauce Tomate",
+    tipBechamel: "Utilisez du lait froid. Ajoutez-le progressivement au début ou d'un coup si vous fouettez vigoureusement.",
+    tipVeloute: "Utilisez un fond blanc. Le roux doit sentir le biscuit avant de lier au liquide.",
+    tipEspagnole: "Idéal pour les sauces brunes puissantes. Le roux doit être couleur chocolat, sans brûler.",
+    tipTomato: "Le roux aidera à donner du corps et de l'onctuosité à la texture finale de la tomate.",
+    rouxWhiteLabel: "Roux Blanc",
+    rouxBlondLabel: "Roux Blond",
+    rouxBrownLabel: "Roux Brun",
+    descWhite: "Cuire juste assez pour faire perdre l'odeur de farine crue. Sans coloration.",
+    descBlond: "Recherchez une couleur beurre noisette et un léger arôme de noix.",
+    descBrown: "Feu très doux. Couleur chocolate. Note : nécessite +10% de poids.",
+    timeWhite: "2-3 min",
+    timeBlond: "5-8 min",
+    timeBrown: "15-20 min",
   },
   faqTitle: "Questions Fréquentes sur le Roux",
   faq: [
@@ -292,5 +309,5 @@ export const content: ToolLocaleContent = {
       html: "Notre calculateur de roux garantit une consistance technique parfaite pour toutes vos créations culinaires.",
     },
   ],
-  schemas: [faqSchema, howToSchema, appSchema],
+  schemas: [faqSchema as any, howToSchema as any, appSchema as any],
 };