[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_562":563,"_564":565},"routes/_app.x.$handle.$name",{"_98":97,"_32":46,"_106":88,"_27":54,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":60,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",207,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/MealPlanView.tsx","latestPath","fileId","b9076826-d3a9-11f0-8004-42dde27851f2","name","MealPlanView.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport type { Recipe, MealPlan, MealPlanEntry, NutritionGoals, DayOfWeek, MealType, DailyNutrition, CustomFood, FDCSearchResult, NutrientKey } from \"../../shared/types.ts\";\nimport { DAY_NAMES, MEAL_TYPES, MEAL_TYPE_LABELS, NUTRIENT_INFO } from \"../../shared/types.ts\";\n\ntype AddMealTab = 'recipes' | 'custom-foods' | 'ingredients';\n\ninterface MealPlanViewProps {\n recipes: Recipe[];\n customFoods: CustomFood[];\n nutritionGoals: NutritionGoals | null;\n}\n\ninterface WeeklyNutritionData {\n daily: Record;\n weeklyAverage: DailyNutrition;\n goals: NutritionGoals | null;\n}\n\nfunction getWeekStartDate(date: Date): string {\n const d = new Date(date);\n const day = d.getDay();\n d.setDate(d.getDate() - day);\n d.setHours(0, 0, 0, 0);\n return d.toISOString().split('T')[0];\n}\n\nfunction formatDate(dateStr: string, dayOffset: number): string {\n const date = new Date(dateStr);\n date.setDate(date.getDate() + dayOffset);\n return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n}\n\nexport function MealPlanView({ recipes, customFoods, nutritionGoals }: MealPlanViewProps) {\n const [currentWeek, setCurrentWeek] = useState(() => getWeekStartDate(new Date()));\n const [mealPlan, setMealPlan] = useState(null);\n const [nutritionData, setNutritionData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [showAddMeal, setShowAddMeal] = useState<{ day: DayOfWeek; mealType: MealType } | null>(null);\n const [addMealTab, setAddMealTab] = useState('recipes');\n const [showSchedule, setShowSchedule] = useState(false);\n const [scheduleRecipe, setScheduleRecipe] = useState('');\n const [scheduleCustomFood, setScheduleCustomFood] = useState('');\n const [scheduleFdcId, setScheduleFdcId] = useState(null);\n const [scheduleTab, setScheduleTab] = useState('recipes');\n const [scheduleMealType, setScheduleMealType] = useState('breakfast');\n const [scheduleDays, setScheduleDays] = useState([]);\n const [scheduleAmountGrams, setScheduleAmountGrams] = useState('');\n\n // FDC search state for ingredients tab\n const [fdcSearchQuery, setFdcSearchQuery] = useState('');\n const [fdcSearchResults, setFdcSearchResults] = useState([]);\n const [fdcSearchLoading, setFdcSearchLoading] = useState(false);\n const [selectedFdcId, setSelectedFdcId] = useState(null);\n const [fdcAmountGrams, setFdcAmountGrams] = useState('100');\n const [customFoodAmountGrams, setCustomFoodAmountGrams] = useState('');\n\n // Day selection state: null = weekly average, 0-6 = specific day\n const [selectedDay, setSelectedDay] = useState(null);\n const [showAllNutrients, setShowAllNutrients] = useState(false);\n\n // Loading states to prevent duplicate submissions\n const [addingRecipe, setAddingRecipe] = useState(false);\n const [addingCustomFood, setAddingCustomFood] = useState(false);\n const [addingFdcIngredient, setAddingFdcIngredient] = useState(false);\n const [schedulingMeals, setSchedulingMeals] = useState(false);\n const [removingMealId, setRemovingMealId] = useState(null);\n\n const fetchMealPlan = useCallback(async () => {\n setLoading(true);\n try {\n const [planRes, nutritionRes] = await Promise.all([\n fetch(`/api/meal-plans?weekStartDate=${currentWeek}`),\n fetch(`/api/nutrition/weekly?weekStartDate=${currentWeek}`),\n ]);\n\n const planData = await planRes.json();\n const nutritionDataJson = await nutritionRes.json();\n\n if (planData.success) {\n setMealPlan(planData.data);\n }\n if (nutritionDataJson.success) {\n setNutritionData(nutritionDataJson.data);\n }\n } catch (err) {\n console.error('Failed to fetch meal plan:', err);\n } finally {\n setLoading(false);\n }\n }, [currentWeek]);\n\n useEffect(() => {\n fetchMealPlan();\n }, [fetchMealPlan]);\n\n const navigateWeek = (direction: number) => {\n // Parse the date string explicitly to avoid timezone issues\n const [year, month, day] = currentWeek.split('-').map(Number);\n const date = new Date(year, month - 1, day);\n date.setDate(date.getDate() + (direction * 7));\n setCurrentWeek(getWeekStartDate(date));\n };\n\n const goToCurrentWeek = () => {\n setCurrentWeek(getWeekStartDate(new Date()));\n };\n\n const handleAddRecipe = async (recipeId: string) => {\n if (!showAddMeal || addingRecipe) return;\n\n setAddingRecipe(true);\n try {\n const response = await fetch('/api/meal-plans/entries', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n weekStartDate: currentWeek,\n dayOfWeek: showAddMeal.day,\n mealType: showAddMeal.mealType,\n recipeId,\n servings: 1,\n }),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n setShowAddMeal(null);\n }\n } finally {\n setAddingRecipe(false);\n }\n };\n\n const handleAddCustomFood = async (customFoodId: string, food: CustomFood) => {\n if (!showAddMeal || addingCustomFood) return;\n\n setAddingCustomFood(true);\n try {\n const amountGrams = customFoodAmountGrams ? parseFloat(customFoodAmountGrams) : food.servingSizeGrams;\n\n const response = await fetch('/api/meal-plans/entries', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n weekStartDate: currentWeek,\n dayOfWeek: showAddMeal.day,\n mealType: showAddMeal.mealType,\n customFoodId,\n amountGrams,\n }),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n setShowAddMeal(null);\n setCustomFoodAmountGrams('');\n }\n } finally {\n setAddingCustomFood(false);\n }\n };\n\n const handleAddFdcIngredient = async () => {\n if (!showAddMeal || !selectedFdcId || addingFdcIngredient) return;\n\n setAddingFdcIngredient(true);\n try {\n const amountGrams = parseFloat(fdcAmountGrams) || 100;\n\n const response = await fetch('/api/meal-plans/entries', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n weekStartDate: currentWeek,\n dayOfWeek: showAddMeal.day,\n mealType: showAddMeal.mealType,\n fdcId: selectedFdcId,\n amountGrams,\n }),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n setShowAddMeal(null);\n setSelectedFdcId(null);\n setFdcSearchQuery('');\n setFdcSearchResults([]);\n setFdcAmountGrams('100');\n }\n } finally {\n setAddingFdcIngredient(false);\n }\n };\n\n const handleFdcSearch = async () => {\n if (!fdcSearchQuery.trim()) return;\n\n setFdcSearchLoading(true);\n try {\n const response = await fetch(`/api/fdc/search?query=${encodeURIComponent(fdcSearchQuery)}`);\n const data = await response.json();\n if (data.success) {\n setFdcSearchResults(data.data);\n }\n } catch (err) {\n console.error('FDC search failed:', err);\n } finally {\n setFdcSearchLoading(false);\n }\n };\n\n const handleRemoveMeal = async (entryId: string) => {\n if (removingMealId) return;\n\n setRemovingMealId(entryId);\n try {\n const response = await fetch(`/api/meal-plans/entries/${entryId}`, {\n method: 'DELETE',\n });\n\n if (response.ok) {\n await fetchMealPlan();\n }\n } finally {\n setRemovingMealId(null);\n }\n };\n\n const handleScheduleMeals = async () => {\n if (schedulingMeals) return;\n\n let payload: any = {\n weekStartDate: currentWeek,\n mealType: scheduleMealType,\n days: scheduleDays,\n servings: 1,\n };\n\n if (scheduleTab === 'recipes') {\n if (!scheduleRecipe || scheduleDays.length === 0) return;\n payload.recipeId = scheduleRecipe;\n } else if (scheduleTab === 'custom-foods') {\n if (!scheduleCustomFood || scheduleDays.length === 0) return;\n payload.customFoodId = scheduleCustomFood;\n payload.amountGrams = parseFloat(scheduleAmountGrams) || 0;\n } else if (scheduleTab === 'ingredients') {\n if (!selectedFdcId || scheduleDays.length === 0) return;\n payload.fdcId = selectedFdcId;\n payload.amountGrams = parseFloat(fdcAmountGrams) || 100;\n }\n\n setSchedulingMeals(true);\n try {\n const response = await fetch('/api/meal-plans/schedule', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(payload),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n setShowSchedule(false);\n setScheduleRecipe('');\n setScheduleCustomFood('');\n setScheduleFdcId(null);\n setScheduleDays([]);\n setScheduleAmountGrams('');\n // Reset generic search state too\n setSelectedFdcId(null);\n setFdcSearchQuery('');\n setFdcSearchResults([]);\n setFdcAmountGrams('100');\n }\n } finally {\n setSchedulingMeals(false);\n }\n };\n\n const getEntriesForCell = (day: DayOfWeek, mealType: MealType): MealPlanEntry[] => {\n if (!mealPlan?.entries) return [];\n return mealPlan.entries.filter(e => e.dayOfWeek === day && e.mealType === mealType);\n };\n\n const getNutritionProgress = (value: number, goal: number): { percent: number; status: 'success' | 'warning' | 'primary' } => {\n const percent = Math.min((value / goal) * 100, 100);\n if (percent >= 90 && percent <= 110) return { percent, status: 'success' };\n if (percent > 110) return { percent: 100, status: 'warning' };\n return { percent, status: 'primary' };\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n return (\n

\n {/* Header */}\n

\n navigateWeek(-1)}\n className=\"p-2 rounded-lg hover:bg-gray-200 transition-colors\"\n >\n \n \n

\n Week of {formatDate(currentWeek, 0)}\n

\n {formatDate(currentWeek, 0)} - {formatDate(currentWeek, 6)}\n

\n navigateWeek(1)}\n className=\"p-2 rounded-lg hover:bg-gray-200 transition-colors\"\n >\n \n \n

\n\n

\n \n \n

\n\n {/* Nutrition summary - Weekly average or selected day */}\n {nutritionData && nutritionGoals && (() => {\n // Get nutrition data based on selection\n const displayData = selectedDay !== null\n ? nutritionData.daily[selectedDay]\n : nutritionData.weeklyAverage;\n const displayLabel = selectedDay !== null\n ? `${DAY_NAMES[selectedDay]}'s Nutrition`\n : 'Weekly Average';\n\n // Define all macronutrients\n const allMacros = [\n { key: 'calories', label: 'Calories', unit: 'kcal' },\n { key: 'protein', label: 'Protein', unit: 'g' },\n { key: 'carbs', label: 'Carbs', unit: 'g' },\n { key: 'fat', label: 'Fat', unit: 'g' },\n { key: 'fiber', label: 'Fiber', unit: 'g' },\n ];\n\n // Sort macros: ones with goals first, then others\n const sortedMacros = allMacros.sort((a, b) => {\n const aHasGoal =\n nutritionGoals.primaryGoalType === a.key ||\n nutritionGoals.subGoal1Type === a.key ||\n nutritionGoals.subGoal2Type === a.key;\n const bHasGoal =\n nutritionGoals.primaryGoalType === b.key ||\n nutritionGoals.subGoal1Type === b.key ||\n nutritionGoals.subGoal2Type === b.key;\n\n if (aHasGoal && !bHasGoal) return -1;\n if (!aHasGoal && bHasGoal) return 1;\n\n // If both have goals, prioritize by goal order (primary > sub1 > sub2)\n if (aHasGoal && bHasGoal) {\n const aPriority =\n nutritionGoals.primaryGoalType === a.key ? 1 :\n nutritionGoals.subGoal1Type === a.key ? 2 :\n nutritionGoals.subGoal2Type === a.key ? 3 : 99;\n const bPriority =\n nutritionGoals.primaryGoalType === b.key ? 1 :\n nutritionGoals.subGoal1Type === b.key ? 2 :\n nutritionGoals.subGoal2Type === b.key ? 3 : 99;\n return aPriority - bPriority;\n }\n\n return 0;\n });\n\n return (\n

{displayLabel}

\n setShowAllNutrients(true)}\n className=\"text-xs text-blue-600 hover:text-blue-800 font-medium\"\n >\n View All Nutrients →\n \n

\n {sortedMacros.map(({ key, label, unit }) => {\n const value = displayData[key as keyof DailyNutrition];\n let goal: number | null = null;\n\n if (nutritionGoals.primaryGoalType === key) goal = nutritionGoals.primaryGoalValue;\n else if (nutritionGoals.subGoal1Type === key) goal = nutritionGoals.subGoal1Value;\n else if (nutritionGoals.subGoal2Type === key) goal = nutritionGoals.subGoal2Value;\n\n return (\n

\n {Math.round(value)}\n {unit}\n

{label}

\n {goal && (\n

\n \n

of {goal}

\n )}\n

\n );\n })}\n

\n );\n })()}\n

\n\n {/* Calendar grid */}\n

\n {/* Day headers - clickable to view day nutrition */}\n

\n {DAY_NAMES.map((day, i) => {\n const isSelected = selectedDay === i;\n return (\n setSelectedDay(isSelected ? null : i as DayOfWeek)}\n className={`text-center p-2 rounded-lg transition-all cursor-pointer ${isSelected\n ? 'bg-blue-100 border-2 border-blue-500'\n : 'hover:bg-gray-100 border-2 border-transparent'\n }`}\n >\n

{day}

{formatDate(currentWeek, i)}

\n \n );\n })}\n

\n\n {/* Meal rows */}\n

\n {MEAL_TYPES.map((mealType) => (\n

\n {MEAL_TYPE_LABELS[mealType]}\n

\n {[0, 1, 2, 3, 4, 5, 6].map((day) => {\n const entries = getEntriesForCell(day as DayOfWeek, mealType);\n const dayNutrition = nutritionData?.daily[day];\n\n return (\n \n {entries.length > 0 ? (\n

\n {entries.map((entry) => {\n // Determine entry type and display info\n let name = 'Unknown';\n let calories: number | null = null;\n let badge: { text: string; color: string } | null = null;\n\n if (entry.recipeId && entry.recipe) {\n name = entry.recipe.title;\n calories = entry.recipe.nutrition?.calories ?? null;\n } else if (entry.customFoodId && entry.customFood) {\n name = entry.customFood.name;\n // Scale calories by amount\n const scale = (entry.amountGrams ?? entry.customFood.servingSizeGrams) / entry.customFood.servingSizeGrams;\n calories = entry.customFood.calories ? entry.customFood.calories * scale : null;\n badge = { text: 'Custom', color: 'bg-purple-100 text-purple-700' };\n } else if (entry.fdcId && entry.fdcFood) {\n name = entry.fdcFood.description;\n // FDC nutrition is per 100g\n const scale = (entry.amountGrams ?? 100) / 100;\n calories = entry.fdcFood.nutrition.calories ? entry.fdcFood.nutrition.calories * scale : null;\n badge = { text: 'USDA', color: 'bg-green-100 text-green-700' };\n }\n\n return (\n \n

\n \n {name}\n \n {badge && (\n \n {badge.text}\n \n )}\n

\n handleRemoveMeal(entry.id)}\n disabled={removingMealId !== null}\n className=\"opacity-0 group-hover/item:opacity-100 text-gray-400 hover:text-red-500 transition-all ml-1 flex-shrink-0 disabled:opacity-50\"\n >\n {removingMealId === entry.id ? (\n \n ) : (\n \n )}\n \n

\n {calories !== null && (\n \n {Math.round(calories)} kcal\n \n )}\n

\n );\n })}\n

\n ) : (\n setShowAddMeal({ day: day as DayOfWeek, mealType })}\n className=\"w-full h-full min-h-[60px] flex items-center justify-center text-gray-400 hover:text-gray-600 transition-colors opacity-0 group-hover:opacity-100\"\n >\n \n \n )}\n\n {/* Add more button when has entries */}\n {entries.length > 0 && (\n setShowAddMeal({ day: day as DayOfWeek, mealType })}\n className=\"absolute bottom-1 right-1 p-1 rounded text-gray-400 hover:text-gray-600 hover:bg-gray-200 opacity-0 group-hover:opacity-100 transition-all\"\n >\n \n \n )}\n

\n );\n })}\n

\n ))}\n

\n \n\n {/* Add meal modal - with tabs for recipes, custom foods, and ingredients */}\n {showAddMeal && (\n

setShowAddMeal(null)}>\n

e.stopPropagation()}>\n

\n Add {MEAL_TYPE_LABELS[showAddMeal.mealType]} - {DAY_NAMES[showAddMeal.day]}\n

\n\n {/* Tabs */}\n

\n setAddMealTab('recipes')}\n className={`pb-2 px-3 text-sm font-medium border-b-2 transition-colors ${addMealTab === 'recipes'\n ? 'border-current text-gray-900'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n style={addMealTab === 'recipes' ? { borderColor: '#0f2763', color: '#0f2763' } : {}}\n >\n Recipes\n \n setAddMealTab('custom-foods')}\n className={`pb-2 px-3 text-sm font-medium border-b-2 transition-colors ${addMealTab === 'custom-foods'\n ? 'border-current text-gray-900'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n style={addMealTab === 'custom-foods' ? { borderColor: '#0f2763', color: '#0f2763' } : {}}\n >\n Custom Foods\n \n setAddMealTab('ingredients')}\n className={`pb-2 px-3 text-sm font-medium border-b-2 transition-colors ${addMealTab === 'ingredients'\n ? 'border-current text-gray-900'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n style={addMealTab === 'ingredients' ? { borderColor: '#0f2763', color: '#0f2763' } : {}}\n >\n USDA Foods\n \n

\n\n

\n {/* Recipes Tab */}\n {addMealTab === 'recipes' && (\n <>\n {recipes.length === 0 ? (\n

\n No recipes yet. Create a recipe first.\n

\n ) : (\n

\n {recipes.map((recipe) => (\n handleAddRecipe(recipe.id)}\n disabled={addingRecipe}\n className=\"w-full p-3 text-left rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-between disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n

{recipe.title}

\n {recipe.nutrition?.calories && (\n

\n {Math.round(recipe.nutrition.calories)} kcal per serving\n

\n )}\n

\n \n \n ))}\n

\n )}\n \n )}\n\n {/* Custom Foods Tab */}\n {addMealTab === 'custom-foods' && (\n <>\n {customFoods.length === 0 ? (\n

\n No custom foods yet. Create one in the Recipes tab.\n

\n ) : (\n

\n {customFoods.map((food) => (\n

\n {food.name}\n Custom\n

\n {food.calories && (\n

\n {Math.round(food.calories)} kcal per {food.servingSizeGrams}g\n

\n )}\n

\n setCustomFoodAmountGrams(e.target.value)}\n className=\"input w-24 text-sm py-1\"\n min=\"1\"\n />\n grams\n handleAddCustomFood(food.id, food)}\n disabled={addingCustomFood}\n className=\"btn-primary text-sm py-1 px-3 ml-auto disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {addingCustomFood ? 'Adding...' : 'Add'}\n \n

\n ))}\n

\n )}\n \n )}\n\n {/* USDA Foods/Ingredients Tab */}\n {addMealTab === 'ingredients' && (\n

\n {/* Search */}\n

\n setFdcSearchQuery(e.target.value)}\n className=\"input flex-1\"\n onKeyDown={(e) => e.key === 'Enter' && handleFdcSearch()}\n />\n \n {fdcSearchLoading ? '...' : 'Search'}\n \n

\n\n {/* Search results */}\n {fdcSearchResults.length > 0 && (\n

\n {fdcSearchResults.map((result) => (\n setSelectedFdcId(result.fdcId)}\n className={`w-full p-2 text-left rounded-lg border transition-colors ${selectedFdcId === result.fdcId\n ? 'border-blue-500 bg-blue-50'\n : 'border-gray-200 hover:bg-gray-50'\n }`}\n >\n

{result.description}

\n \n {result.dataType === 'Branded' ? 'Branded' : 'USDA'}\n \n {result.brandOwner && {result.brandOwner}}\n

\n \n ))}\n

\n )}\n\n {/* Amount and Add button */}\n {selectedFdcId && (\n

\n Amount:\n setFdcAmountGrams(e.target.value)}\n className=\"input w-24 text-sm py-1\"\n min=\"1\"\n />\n grams\n \n {addingFdcIngredient ? 'Adding...' : 'Add to Meal'}\n \n

\n )}\n

\n\n

\n \n

\n )}\n\n {/* Schedule meals modal */}\n {showSchedule && (\n

setShowSchedule(false)}>\n

e.stopPropagation()}>\n

Schedule Meals

Add items to multiple days at once

\n\n {/* Tabs */}\n

\n setScheduleTab('recipes')}\n className={`pb-2 px-3 text-sm font-medium border-b-2 transition-colors ${scheduleTab === 'recipes'\n ? 'border-current text-gray-900'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n style={scheduleTab === 'recipes' ? { borderColor: '#0f2763', color: '#0f2763' } : {}}\n >\n Recipes\n \n setScheduleTab('custom-foods')}\n className={`pb-2 px-3 text-sm font-medium border-b-2 transition-colors ${scheduleTab === 'custom-foods'\n ? 'border-current text-gray-900'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n style={scheduleTab === 'custom-foods' ? { borderColor: '#0f2763', color: '#0f2763' } : {}}\n >\n Custom Foods\n \n setScheduleTab('ingredients')}\n className={`pb-2 px-3 text-sm font-medium border-b-2 transition-colors ${scheduleTab === 'ingredients'\n ? 'border-current text-gray-900'\n : 'border-transparent text-gray-500 hover:text-gray-700'\n }`}\n style={scheduleTab === 'ingredients' ? { borderColor: '#0f2763', color: '#0f2763' } : {}}\n >\n USDA Foods\n \n

\n\n

\n {/* Content based on tab */}\n {scheduleTab === 'recipes' && (\n

\n Recipe\n setScheduleRecipe(e.target.value)}\n className=\"input\"\n >\n \n {recipes.map((recipe) => (\n \n ))}\n \n

\n )}\n\n {scheduleTab === 'custom-foods' && (\n

\n Custom Food\n {\n setScheduleCustomFood(e.target.value);\n const food = customFoods.find(f => f.id === e.target.value);\n if (food) setScheduleAmountGrams(food.servingSizeGrams.toString());\n }}\n className=\"input\"\n >\n \n {customFoods.map((food) => (\n \n ))}\n \n

\n {scheduleCustomFood && (\n

\n Amount:\n setScheduleAmountGrams(e.target.value)}\n className=\"input w-24 text-sm\"\n min=\"1\"\n />\n grams\n

\n )}\n

\n )}\n\n {scheduleTab === 'ingredients' && (\n

\n setFdcSearchQuery(e.target.value)}\n className=\"input flex-1\"\n onKeyDown={(e) => e.key === 'Enter' && handleFdcSearch()}\n />\n \n {fdcSearchLoading ? '...' : 'Search'}\n \n

\n\n {fdcSearchResults.length > 0 && (\n

{result.description}

{result.brandOwner || result.dataType}

\n \n ))}\n

\n )}\n\n {selectedFdcId && (\n

\n Amount:\n setFdcAmountGrams(e.target.value)}\n className=\"input w-24 text-sm\"\n min=\"1\"\n />\n grams\n

\n )}\n

\n )}\n\n

\n\n {/* Meal type */}\n

\n Meal Type\n setScheduleMealType(e.target.value as MealType)}\n className=\"input\"\n >\n {MEAL_TYPES.map((type) => (\n \n ))}\n \n

\n\n {/* Days selection */}\n

\n Days\n

\n {DAY_NAMES.map((day, i) => (\n {\n if (scheduleDays.includes(i as DayOfWeek)) {\n setScheduleDays(scheduleDays.filter(d => d !== i));\n } else {\n setScheduleDays([...scheduleDays, i as DayOfWeek]);\n }\n }}\n className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${scheduleDays.includes(i as DayOfWeek)\n ? 'text-white'\n : 'bg-gray-100 text-gray-700 hover:bg-gray-200'\n }`}\n style={scheduleDays.includes(i as DayOfWeek) ? { background: '#0f2763' } : {}}\n >\n {day.slice(0, 3)}\n \n ))}\n

\n setScheduleDays([0, 1, 2, 3, 4, 5, 6])}\n className=\"text-xs mt-2 hover:underline\"\n style={{ color: '#0f2763' }}\n >\n Select all (repeat daily)\n \n

\n {\n setShowSchedule(false);\n setScheduleRecipe('');\n setScheduleCustomFood('');\n setSelectedFdcId(null);\n setFdcSearchQuery('');\n setFdcSearchResults([]);\n }}\n className=\"btn-secondary flex-1\"\n >\n Cancel\n \n \n {schedulingMeals ? 'Scheduling...' : 'Schedule'}\n \n

\n )}\n\n {/* View All Nutrients Modal */}\n {showAllNutrients && nutritionData && (() => {\n const displayData = selectedDay !== null\n ? nutritionData.daily[selectedDay]\n : nutritionData.weeklyAverage;\n const displayLabel = selectedDay !== null\n ? `${DAY_NAMES[selectedDay]} - All Nutrients`\n : 'Weekly Average - All Nutrients';\n\n // Define comprehensive nutrient groups\n const macroKeys: NutrientKey[] = ['calories', 'protein', 'fat', 'carbs', 'fiber', 'sugars', 'addedSugars', 'starch'];\n const fatsKeys: NutrientKey[] = ['saturatedFat', 'transFat', 'monounsaturatedFat', 'polyunsaturatedFat', 'cholesterol'];\n const otherKeys: NutrientKey[] = ['water', 'alcohol', 'caffeine'];\n const mineralKeys: NutrientKey[] = ['sodium', 'potassium', 'calcium', 'iron', 'magnesium', 'zinc', 'phosphorus', 'selenium', 'copper', 'manganese', 'fluoride', 'chromium', 'molybdenum', 'iodine', 'chloride'];\n const vitaminFatSolubleKeys: NutrientKey[] = ['vitaminA', 'retinol', 'vitaminD', 'vitaminD2', 'vitaminD3', 'vitaminE', 'vitaminK', 'vitaminK2'];\n const carotenoidKeys: NutrientKey[] = ['betaCarotene', 'alphaCarotene', 'betaCryptoxanthin', 'lycopene', 'luteinZeaxanthin'];\n const vitaminWaterSolubleKeys: NutrientKey[] = ['vitaminC', 'vitaminB6', 'vitaminB12', 'thiamin', 'riboflavin', 'niacin', 'pantothenicAcid', 'biotin', 'folate', 'folicAcid', 'choline', 'betaine'];\n\n const NutrientRow = ({ nutrientKey }: { nutrientKey: NutrientKey }) => {\n const info = NUTRIENT_INFO[nutrientKey];\n const value = displayData[nutrientKey] ?? 0;\n let goal: number | null = null;\n\n if (nutritionGoals?.primaryGoalType === nutrientKey) goal = nutritionGoals.primaryGoalValue;\n else if (nutritionGoals?.subGoal1Type === nutrientKey) goal = nutritionGoals.subGoal1Value;\n else if (nutritionGoals?.subGoal2Type === nutrientKey) goal = nutritionGoals.subGoal2Value;\n\n // Skip if value is 0 and not a core macro\n const coreMacros = ['calories', 'protein', 'fat', 'carbs', 'fiber'];\n if (value === 0 && !coreMacros.includes(nutrientKey)) return null;\n\n return (\n

\n {info.label}\n

\n \n {value < 1 && value > 0 ? value.toFixed(2) : Math.round(value)} {info.unit}\n \n {goal && (\n / {goal}\n )}\n

\n );\n };\n\n const NutrientSection = ({ title, keys }: { title: string; keys: NutrientKey[] }) => {\n const hasAnyData = keys.some(key => (displayData[key] ?? 0) > 0);\n if (!hasAnyData && !['Macronutrients'].includes(title)) return null;\n \n return (\n

{title}

\n {keys.map(key => )}\n

\n );\n };\n\n return (\n

setShowAllNutrients(false)}>\n

e.stopPropagation()}>\n

{displayLabel}

\n setShowAllNutrients(false)}\n className=\"text-gray-400 hover:text-gray-600\"\n >\n \n \n

\n\n

\n \n \n \n \n \n \n \n

\n\n

\n \n

\n );\n })()}\n \n );\n}\n\n\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport type { Recipe, MealPlan, MealPlanEntry, NutritionGoals, DayOfWeek, MealType, DailyNutrition, CustomFood, FDCSearchResult, NutrientKey } from \"../../shared/types.ts\";\nimport { DAY_NAMES, MEAL_TYPES, MEAL_TYPE_LABELS, NUTRIENT_INFO } from \"../../shared/types.ts\";\n\ntype AddMealTab = 'recipes' | 'custom-foods' | 'ingredients';\n\ninterface MealPlanViewProps {\n recipes: Recipe[];\n customFoods: CustomFood[];\n nutritionGoals: NutritionGoals | null;\n}\n\ninterface WeeklyNutritionData {\n daily: Record;\n weeklyAverage: DailyNutrition;\n goals: NutritionGoals | null;\n}\n\nfunction getWeekStartDate(date: Date): string {\n const d = new Date(date);\n const day = d.getDay();\n d.setDate(d.getDate() - day);\n d.setHours(0, 0, 0, 0);\n return d.toISOString().split('T')[0];\n}\n\nfunction formatDate(dateStr: string, dayOffset: number): string {\n const date = new Date(dateStr);\n date.setDate(date.getDate() + dayOffset);\n return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n}\n\nexport function MealPlanView({ recipes, customFoods, nutritionGoals }: MealPlanViewProps) {\n const [currentWeek, setCurrentWeek] = useState(() => getWeekStartDate(new Date()));\n const [mealPlan, setMealPlan] = useState(null);\n const [nutritionData, setNutritionData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [showAddMeal, setShowAddMeal] = useState<{ day: DayOfWeek; mealType: MealType } | null>(null);\n const [addMealTab, setAddMealTab] = useState('recipes');\n const [showSchedule, setShowSchedule] = useState(false);\n const [scheduleRecipe, setScheduleRecipe] = useState('');\n const [scheduleCustomFood, setScheduleCustomFood] = useState('');\n const [scheduleFdcId, setScheduleFdcId] = useState(null);\n const [scheduleTab, setScheduleTab] = useState('recipes');\n const [scheduleMealType, setScheduleMealType] = useState('breakfast');\n const [scheduleDays, setScheduleDays] = useState([]);\n const [scheduleAmountGrams, setScheduleAmountGrams] = useState('');\n\n // FDC search state for ingredients tab\n const [fdcSearchQuery, setFdcSearchQuery] = useState('');\n const [fdcSearchResults, setFdcSearchResults] = useState([]);\n const [fdcSearchLoading, setFdcSearchLoading] = useState(false);\n const [selectedFdcId, setSelectedFdcId] = useState(null);\n const [fdcAmountGrams, setFdcAmountGrams] = useState('100');\n const [customFoodAmountGrams, setCustomFoodAmountGrams] = useState('');\n\n // Day selection state: null = weekly average, 0-6 = specific day\n const [selectedDay, setSelectedDay] = useState(null);\n const [showAllNutrients, setShowAllNutrients] = useState(false);\n\n // Loading states to prevent duplicate submissions\n const [addingRecipe, setAddingRecipe] = useState(false);\n const [addingCustomFood, setAddingCustomFood] = useState(false);\n const [addingFdcIngredient, setAddingFdcIngredient] = useState(false);\n const [schedulingMeals, setSchedulingMeals] = useState(false);\n const [removingMealId, setRemovingMealId] = useState(null);\n\n const fetchMealPlan = useCallback(async () => {\n setLoading(true);\n try {\n const [planRes, nutritionRes] = await Promise.all([\n fetch(`/api/meal-plans?weekStartDate=${currentWeek}`),\n fetch(`/api/nutrition/weekly?weekStartDate=${currentWeek}`),\n ]);\n\n const planData = await planRes.json();\n const nutritionDataJson = await nutritionRes.json();\n\n if (planData.success) {\n setMealPlan(planData.data);\n }\n if (nutritionDataJson.success) {\n setNutritionData(nutritionDataJson.data);\n }\n } catch (err) {\n console.error('Failed to fetch meal plan:', err);\n } finally {\n setLoading(false);\n }\n }, [currentWeek]);\n\n useEffect(() => {\n fetchMealPlan();\n }, [fetchMealPlan]);\n\n const navigateWeek = (direction: number) => {\n // Parse the date string explicitly to avoid timezone issues\n const [year, month, day] = currentWeek.split('-').map(Number);\n const date = new Date(year, month - 1, day);\n date.setDate(date.getDate() + (direction * 7));\n setCurrentWeek(getWeekStartDate(date));\n };\n\n const goToCurrentWeek = () => {\n setCurrentWeek(getWeekStartDate(new Date()));\n };\n\n const handleAddRecipe = async (recipeId: string) => {\n if (!showAddMeal || addingRecipe) return;\n\n setAddingRecipe(true);\n try {\n const response = await fetch('/api/meal-plans/entries', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n weekStartDate: currentWeek,\n dayOfWeek: showAddMeal.day,\n mealType: showAddMeal.mealType,\n recipeId,\n servings: 1,\n }),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n setShowAddMeal(null);\n }\n } finally {\n setAddingRecipe(false);\n }\n };\n\n const handleAddCustomFood = async (customFoodId: string, food: CustomFood) => {\n if (!showAddMeal || addingCustomFood) return;\n\n setAddingCustomFood(true);\n try {\n const amountGrams = customFoodAmountGrams ? parseFloat(customFoodAmountGrams) : food.servingSizeGrams;\n\n const response = await fetch('/api/meal-plans/entries', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n weekStartDate: currentWeek,\n dayOfWeek: showAddMeal.day,\n mealType: showAddMeal.mealType,\n customFoodId,\n amountGrams,\n }),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n setShowAddMeal(null);\n setCustomFoodAmountGrams('');\n }\n } finally {\n setAddingCustomFood(false);\n }\n };\n\n const handleAddFdcIngredient = async () => {\n if (!showAddMeal || !selectedFdcId || addingFdcIngredient) return;\n\n setAddingFdcIngredient(true);\n try {\n const amountGrams = parseFloat(fdcAmountGrams) || 100;\n\n const response = await fetch('/api/meal-plans/entries', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n weekStartDate: currentWeek,\n dayOfWeek: showAddMeal.day,\n mealType: showAddMeal.mealType,\n fdcId: selectedFdcId,\n amountGrams,\n }),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n setShowAddMeal(null);\n setSelectedFdcId(null);\n setFdcSearchQuery('');\n setFdcSearchResults([]);\n setFdcAmountGrams('100');\n }\n } finally {\n setAddingFdcIngredient(false);\n }\n };\n\n const handleFdcSearch = async () => {\n if (!fdcSearchQuery.trim()) return;\n\n setFdcSearchLoading(true);\n try {\n const response = await fetch(`/api/fdc/search?query=${encodeURIComponent(fdcSearchQuery)}`);\n const data = await response.json();\n if (data.success) {\n setFdcSearchResults(data.data);\n }\n } catch (err) {\n console.error('FDC search failed:', err);\n } finally {\n setFdcSearchLoading(false);\n }\n };\n\n const handleRemoveMeal = async (entryId: string) => {\n if (removingMealId) return;\n\n setRemovingMealId(entryId);\n try {\n const response = await fetch(`/api/meal-plans/entries/${entryId}`, {\n method: 'DELETE',\n });\n\n if (response.ok) {\n await fetchMealPlan();\n }\n } finally {\n setRemovingMealId(null);\n }\n };\n\n const handleScheduleMeals = async () => {\n if (schedulingMeals) return;\n\n let payload: any = {\n weekStartDate: currentWeek,\n mealType: scheduleMealType,\n days: scheduleDays,\n servings: 1,\n };\n\n if (scheduleTab === 'recipes') {\n if (!scheduleRecipe || scheduleDays.length === 0) return;\n payload.recipeId = scheduleRecipe;\n } else if (scheduleTab === 'custom-foods') {\n if (!scheduleCustomFood || scheduleDays.length === 0) return;\n payload.customFoodId = scheduleCustomFood;\n payload.amountGrams = parseFloat(scheduleAmountGrams) || 0;\n } else if (scheduleTab === 'ingredients') {\n if (!selectedFdcId || scheduleDays.length === 0) return;\n payload.fdcId = selectedFdcId;\n payload.amountGrams = parseFloat(fdcAmountGrams) || 100;\n }\n\n setSchedulingMeals(true);\n try {\n const response = await fetch('/api/meal-plans/schedule', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(payload),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n setShowSchedule(false);\n setScheduleRecipe('');\n setScheduleCustomFood('');\n setScheduleFdcId(null);\n setScheduleDays([]);\n setScheduleAmountGrams('');\n // Reset generic search state too\n setSelectedFdcId(null);\n setFdcSearchQuery('');\n setFdcSearchResults([]);\n setFdcAmountGrams('100');\n }\n } finally {\n setSchedulingMeals(false);\n }\n };\n\n const getEntriesForCell = (day: DayOfWeek, mealType: MealType): MealPlanEntry[] => {\n if (!mealPlan?.entries) return [];\n return mealPlan.entries.filter(e => e.dayOfWeek === day && e.mealType === mealType);\n };\n\n const getNutritionProgress = (value: number, goal: number): { percent: number; status: 'success' | 'warning' | 'primary' } => {\n const percent = Math.min((value / goal) * 100, 100);\n if (percent >= 90 && percent <= 110) return { percent, status: 'success' };\n if (percent > 110) return { percent: 100, status: 'warning' };\n return { percent, status: 'primary' };\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n return (\n

\n {/* Header */}\n

\n navigateWeek(-1)}\n className=\"p-2 rounded-lg transition-colors\"\n style={{ color: 'var(--text-secondary)' }}\n >\n \n \n

\n Week of {formatDate(currentWeek, 0)}\n

\n {formatDate(currentWeek, 0)} - {formatDate(currentWeek, 6)}\n

\n navigateWeek(1)}\n className=\"p-2 rounded-lg transition-colors\"\n style={{ color: 'var(--text-secondary)' }}\n >\n \n \n

\n\n

\n \n \n

{displayLabel}

\n setShowAllNutrients(true)}\n className=\"text-xs font-medium hover:underline\"\n style={{ color: 'var(--accent)' }}\n >\n View All Nutrients →\n \n

\n {Math.round(value)}\n {unit}\n

{label}

\n {goal && (\n

\n \n

of {goal}

\n )}\n

\n );\n })}\n

\n );\n })()}\n

\n\n {/* Calendar grid */}\n

\n {/* Day headers - clickable to view day nutrition */}\n

\n {DAY_NAMES.map((day, i) => {\n const isSelected = selectedDay === i;\n return (\n setSelectedDay(isSelected ? null : i as DayOfWeek)}\n className=\"text-center p-2 rounded-lg transition-all cursor-pointer\"\n style={isSelected\n ? { background: 'var(--bg-tertiary)', border: '2px solid var(--accent)' }\n : { border: '2px solid transparent' }}\n >\n

{day}

{formatDate(currentWeek, i)}

\n \n );\n })}\n

\n\n {/* Meal rows */}\n

\n {MEAL_TYPES.map((mealType) => (\n

\n {MEAL_TYPE_LABELS[mealType]}\n

\n {[0, 1, 2, 3, 4, 5, 6].map((day) => {\n const entries = getEntriesForCell(day as DayOfWeek, mealType);\n const dayNutrition = nutritionData?.daily[day];\n\n return (\n \n {entries.length > 0 ? (\n

\n \n {name}\n \n {badge && (\n \n {badge.text}\n \n )}\n

\n {calories !== null && (\n \n {Math.round(calories)} kcal\n \n )}\n

\n );\n })}\n

\n ))}\n

\n \n\n {/* Add meal modal - with tabs for recipes, custom foods, and ingredients */}\n {showAddMeal && (\n

setShowAddMeal(null)}>\n

e.stopPropagation()}>\n

\n Add {MEAL_TYPE_LABELS[showAddMeal.mealType]} - {DAY_NAMES[showAddMeal.day]}\n

\n\n {/* Tabs */}\n

\n setAddMealTab('recipes')}\n className=\"pb-2 px-3 text-sm font-medium border-b-2 transition-colors\"\n style={addMealTab === 'recipes' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n Recipes\n \n setAddMealTab('custom-foods')}\n className=\"pb-2 px-3 text-sm font-medium border-b-2 transition-colors\"\n style={addMealTab === 'custom-foods' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n Custom Foods\n \n setAddMealTab('ingredients')}\n className=\"pb-2 px-3 text-sm font-medium border-b-2 transition-colors\"\n style={addMealTab === 'ingredients' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n USDA Foods\n \n

\n\n

\n {/* Recipes Tab */}\n {addMealTab === 'recipes' && (\n <>\n {recipes.length === 0 ? (\n

\n No recipes yet. Create a recipe first.\n

\n ) : (\n

\n {recipes.map((recipe) => (\n handleAddRecipe(recipe.id)}\n disabled={addingRecipe}\n className=\"w-full p-3 text-left rounded-lg transition-colors flex items-center justify-between disabled:opacity-50 disabled:cursor-not-allowed\"\n style={{ background: 'transparent' }}\n >\n

{recipe.title}

\n {recipe.nutrition?.calories && (\n

\n {Math.round(recipe.nutrition.calories)} kcal per serving\n

\n )}\n

\n \n \n ))}\n

\n )}\n \n )}\n\n {/* Custom Foods Tab */}\n {addMealTab === 'custom-foods' && (\n <>\n {customFoods.length === 0 ? (\n

\n No custom foods yet. Create one in the Recipes tab.\n

\n ) : (\n

\n {customFoods.map((food) => (\n

\n {food.name}\n Custom\n

\n {food.calories && (\n

\n {Math.round(food.calories)} kcal per {food.servingSizeGrams}g\n

\n )}\n

\n ))}\n

\n )}\n \n )}\n\n {/* USDA Foods/Ingredients Tab */}\n {addMealTab === 'ingredients' && (\n

\n {/* Search */}\n

\n setFdcSearchQuery(e.target.value)}\n className=\"input flex-1\"\n onKeyDown={(e) => e.key === 'Enter' && handleFdcSearch()}\n />\n \n {fdcSearchLoading ? '...' : 'Search'}\n \n

\n\n {/* Search results */}\n {fdcSearchResults.length > 0 && (\n

\n {fdcSearchResults.map((result) => (\n setSelectedFdcId(result.fdcId)}\n className=\"w-full p-2 text-left rounded-lg transition-colors\"\n style={selectedFdcId === result.fdcId\n ? { border: '1px solid var(--accent)', background: 'var(--bg-tertiary)' }\n : { border: '1px solid var(--border-primary)' }}\n >\n

{result.description}

\n \n {result.dataType === 'Branded' ? 'Branded' : 'USDA'}\n \n {result.brandOwner && {result.brandOwner}}\n

\n \n ))}\n

\n )}\n\n {/* Amount and Add button */}\n {selectedFdcId && (\n

\n Amount:\n setFdcAmountGrams(e.target.value)}\n className=\"input w-24 text-sm py-1\"\n min=\"1\"\n />\n grams\n \n {addingFdcIngredient ? 'Adding...' : 'Add to Meal'}\n \n

\n )}\n

\n\n

\n \n

\n )}\n\n {/* Schedule meals modal */}\n {showSchedule && (\n

setShowSchedule(false)}>\n

e.stopPropagation()}>\n

Schedule Meals

Add items to multiple days at once

\n\n {/* Tabs */}\n

\n setScheduleTab('recipes')}\n className=\"pb-2 px-3 text-sm font-medium border-b-2 transition-colors\"\n style={scheduleTab === 'recipes' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n Recipes\n \n setScheduleTab('custom-foods')}\n className=\"pb-2 px-3 text-sm font-medium border-b-2 transition-colors\"\n style={scheduleTab === 'custom-foods' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n Custom Foods\n \n setScheduleTab('ingredients')}\n className=\"pb-2 px-3 text-sm font-medium border-b-2 transition-colors\"\n style={scheduleTab === 'ingredients' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n USDA Foods\n \n

\n\n

\n {/* Content based on tab */}\n {scheduleTab === 'recipes' && (\n

\n Recipe\n setScheduleRecipe(e.target.value)}\n className=\"input\"\n >\n \n {recipes.map((recipe) => (\n \n ))}\n \n

\n )}\n\n {scheduleTab === 'custom-foods' && (\n

\n {scheduleCustomFood && (\n

\n Amount:\n setScheduleAmountGrams(e.target.value)}\n className=\"input w-24 text-sm\"\n min=\"1\"\n />\n grams\n

\n )}\n

\n )}\n\n {scheduleTab === 'ingredients' && (\n

\n setFdcSearchQuery(e.target.value)}\n className=\"input flex-1\"\n onKeyDown={(e) => e.key === 'Enter' && handleFdcSearch()}\n />\n \n {fdcSearchLoading ? '...' : 'Search'}\n \n

\n\n {fdcSearchResults.length > 0 && (\n

{result.description}

{result.brandOwner || result.dataType}

\n \n ))}\n

\n )}\n\n {selectedFdcId && (\n

\n Amount:\n setFdcAmountGrams(e.target.value)}\n className=\"input w-24 text-sm\"\n min=\"1\"\n />\n grams\n

\n )}\n

\n )}\n\n

\n\n {/* Meal type */}\n

\n Meal Type\n setScheduleMealType(e.target.value as MealType)}\n className=\"input\"\n >\n {MEAL_TYPES.map((type) => (\n \n ))}\n \n

\n\n {/* Days selection */}\n

\n Days\n

\n {DAY_NAMES.map((day, i) => (\n {\n if (scheduleDays.includes(i as DayOfWeek)) {\n setScheduleDays(scheduleDays.filter(d => d !== i));\n } else {\n setScheduleDays([...scheduleDays, i as DayOfWeek]);\n }\n }}\n className=\"px-3 py-1.5 rounded-lg text-sm font-medium transition-colors\"\n style={scheduleDays.includes(i as DayOfWeek) \n ? { background: 'var(--accent)', color: 'white' } \n : { background: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}\n >\n {day.slice(0, 3)}\n \n ))}\n

\n setScheduleDays([0, 1, 2, 3, 4, 5, 6])}\n className=\"text-xs mt-2 hover:underline\"\n style={{ color: 'var(--accent)' }}\n >\n Select all (repeat daily)\n \n

\n {info.label}\n

\n \n {value < 1 && value > 0 ? value.toFixed(2) : Math.round(value)} {info.unit}\n \n {goal && (\n / {goal}\n )}\n

{title}

\n {keys.map(key => )}\n

\n );\n };\n\n return (\n

setShowAllNutrients(false)}>\n

e.stopPropagation()}>\n

{displayLabel}

\n setShowAllNutrients(false)}\n className=\"transition-colors\"\n style={{ color: 'var(--text-tertiary)' }}\n >\n \n \n

\n\n

\n \n \n \n \n \n \n \n

\n\n

\n \n

\n );\n })()}\n \n );\n}\n\n\n","createdAt",["D",1767329676503],"branchVersion","branchId","75b5bdc8-d3a6-11f0-86d1-42dde27851f2","id","75b56760-d3a6-11f0-86d1-42dde27851f2","carmy",["D",1765137234131],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","7ed186b0-c78a-4757-a5b0-12c00ac89afa","pinnedFileId","b9153140-d3a9-11f0-8d63-42dde27851f2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e9195859-3c6b-4b40-bb3e-c11844477fdf","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"isOwned",251,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","shapedlines","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYlc2Q1A2eUFyNEdDeXBud0E0bFJyWlJVUzQifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_44":45,"_32":46,"_39":558,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":559,"_82":560,"_84":561,"_86":25},"tree",[187,206,227,229,230,231],"files",[187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231],"counts",{"_177":64,"_178":168,"_179":64,"_180":181,"_182":183},"contents",[128,129,130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_58":127},"carmy.shapedlines.com",{"_44":171,"_32":172,"_30":173,"_137":-5,"_42":43,"_41":174,"_139":60,"_39":175,"_13":64,"_34":163,"_36":-5,"_24":25,"_142":-5,"_27":176},{"_44":165,"_32":166,"_30":167,"_137":-5,"_42":43,"_41":168,"_139":60,"_39":169,"_13":64,"_34":163,"_36":-5,"_24":25,"_142":-5,"_27":170},{"_44":158,"_32":159,"_30":160,"_137":-5,"_42":43,"_41":161,"_139":60,"_39":162,"_13":64,"_34":163,"_36":-5,"_24":25,"_142":-5,"_27":164},{"_44":151,"_32":152,"_30":153,"_137":-5,"_42":43,"_41":154,"_139":25,"_39":155,"_13":64,"_34":20,"_36":156,"_24":25,"_142":-5,"_27":157},{"_44":144,"_32":145,"_30":146,"_137":-5,"_42":43,"_41":147,"_139":60,"_39":148,"_13":64,"_34":20,"_36":149,"_24":25,"_142":-5,"_27":150},{"_44":134,"_32":135,"_30":136,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":140,"_13":64,"_34":20,"_36":141,"_24":25,"_142":-5,"_27":143},"b8fc0cce-d3a9-11f0-a23f-42dde27851f2","deno.json","b8fc0d82-d3a9-11f0-a23f-42dde27851f2","parentId",16,"latest",["D",1765138635487],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}","label",[135],"b93a060a-d3a9-11f0-b1bf-42dde27851f2","AGENTS.md","b93a06dc-d3a9-11f0-b1bf-42dde27851f2",28,["D",1765138635892],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[145],"b93ee7d8-d3a9-11f0-b1e3-42dde27851f2",".vtignore","b93ee86e-d3a9-11f0-b1e3-42dde27851f2",29,["D",1765138635895],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[152],"b856c354-d3a9-11f0-8e4b-42dde27851f2","shared","b856c412-d3a9-11f0-8e4b-42dde27851f2",3,["D",1765138634405],"directory",[159],"b82c4976-d3a9-11f0-8e4b-42dde27851f2","frontend","b82c4a48-d3a9-11f0-8e4b-42dde27851f2",1,["D",1765138634122],[166],"b8403292-d3a9-11f0-8e76-42dde27851f2","backend","b8403350-d3a9-11f0-8e76-42dde27851f2",2,["D",1765138634257],[172],"pulls","branches","forks","envVars",{"_184":161,"_186":64},"connections",{"_184":64,"_185":64},"count","unfilledCount","emptyCount",{"_44":171,"_32":172,"_30":173,"_137":-5,"_42":43,"_41":174,"_139":60,"_39":555,"_13":64,"_34":163,"_36":-5,"_24":25,"_142":-5,"_233":556,"_27":557},{"_44":551,"_32":542,"_30":535,"_137":173,"_42":43,"_41":439,"_139":60,"_39":552,"_13":64,"_34":163,"_36":-5,"_24":25,"_142":-5,"_233":553,"_27":554},{"_44":543,"_32":544,"_30":545,"_137":535,"_42":43,"_41":546,"_139":60,"_39":547,"_13":327,"_34":35,"_36":548,"_24":25,"_142":-5,"_233":549,"_27":550},{"_44":532,"_32":533,"_30":534,"_137":535,"_42":43,"_41":536,"_139":25,"_39":537,"_13":538,"_34":35,"_36":539,"_24":25,"_142":-5,"_233":540,"_27":541},{"_44":528,"_32":527,"_30":521,"_137":173,"_42":43,"_41":419,"_139":60,"_39":529,"_13":64,"_34":163,"_36":-5,"_24":25,"_142":-5,"_233":530,"_27":531},{"_44":518,"_32":519,"_30":520,"_137":521,"_42":43,"_41":522,"_139":60,"_39":523,"_13":161,"_34":35,"_36":524,"_24":25,"_142":-5,"_233":525,"_27":526},{"_44":514,"_32":457,"_30":451,"_137":173,"_42":43,"_41":310,"_139":60,"_39":515,"_13":64,"_34":163,"_36":-5,"_24":25,"_142":-5,"_233":516,"_27":517},{"_44":506,"_32":507,"_30":508,"_137":451,"_42":43,"_41":509,"_139":60,"_39":510,"_13":161,"_34":35,"_36":511,"_24":25,"_142":-5,"_233":512,"_27":513},{"_44":498,"_32":499,"_30":500,"_137":451,"_42":43,"_41":501,"_139":60,"_39":502,"_13":168,"_34":35,"_36":503,"_24":25,"_142":-5,"_233":504,"_27":505},{"_44":490,"_32":491,"_30":492,"_137":451,"_42":43,"_41":493,"_139":60,"_39":494,"_13":267,"_34":35,"_36":495,"_24":25,"_142":-5,"_233":496,"_27":497},{"_44":482,"_32":483,"_30":484,"_137":451,"_42":43,"_41":485,"_139":25,"_39":486,"_13":439,"_34":35,"_36":487,"_24":25,"_142":-5,"_233":488,"_27":489},{"_44":474,"_32":475,"_30":476,"_137":451,"_42":43,"_41":477,"_139":60,"_39":478,"_13":267,"_34":35,"_36":479,"_24":25,"_142":-5,"_233":480,"_27":481},{"_44":466,"_32":467,"_30":468,"_137":451,"_42":43,"_41":469,"_139":25,"_39":470,"_13":439,"_34":35,"_36":471,"_24":25,"_142":-5,"_233":472,"_27":473},{"_44":458,"_32":459,"_30":460,"_137":451,"_42":43,"_41":461,"_139":25,"_39":462,"_13":419,"_34":35,"_36":463,"_24":25,"_142":-5,"_233":464,"_27":465},{"_44":448,"_32":449,"_30":450,"_137":451,"_42":43,"_41":452,"_139":60,"_39":453,"_13":174,"_34":35,"_36":454,"_24":25,"_142":-5,"_233":455,"_27":456},{"_44":443,"_32":433,"_30":427,"_137":173,"_42":43,"_41":444,"_139":60,"_39":445,"_13":64,"_34":163,"_36":-5,"_24":25,"_142":-5,"_233":446,"_27":447},{"_44":434,"_32":435,"_30":436,"_137":427,"_42":43,"_41":437,"_139":25,"_39":438,"_13":439,"_34":35,"_36":440,"_24":25,"_142":-5,"_233":441,"_27":442},{"_44":424,"_32":425,"_30":426,"_137":427,"_42":43,"_41":428,"_139":25,"_39":429,"_13":174,"_34":35,"_36":430,"_24":25,"_142":-5,"_233":431,"_27":432},{"_44":415,"_32":416,"_30":58,"_137":173,"_42":43,"_41":417,"_139":60,"_39":418,"_13":419,"_34":420,"_36":421,"_24":25,"_142":-5,"_233":422,"_27":423},{"_44":165,"_32":166,"_30":167,"_137":-5,"_42":43,"_41":168,"_139":60,"_39":412,"_13":64,"_34":163,"_36":-5,"_24":25,"_142":-5,"_233":413,"_27":414},{"_44":408,"_32":288,"_30":282,"_137":167,"_42":43,"_41":267,"_139":60,"_39":409,"_13":64,"_34":163,"_36":-5,"_24":25,"_142":-5,"_233":410,"_27":411},{"_44":400,"_32":401,"_30":402,"_137":282,"_42":43,"_41":403,"_139":25,"_39":404,"_13":267,"_34":35,"_36":405,"_24":25,"_142":-5,"_233":406,"_27":407},{"_44":392,"_32":393,"_30":394,"_137":282,"_42":43,"_41":395,"_139":60,"_39":396,"_13":174,"_34":35,"_36":397,"_24":25,"_142":-5,"_233":398,"_27":399},{"_44":384,"_32":385,"_30":386,"_137":282,"_42":43,"_41":387,"_139":60,"_39":388,"_13":168,"_34":35,"_36":389,"_24":25,"_142":-5,"_233":390,"_27":391},{"_44":376,"_32":377,"_30":378,"_137":282,"_42":43,"_41":379,"_139":25,"_39":380,"_13":310,"_34":35,"_36":381,"_24":25,"_142":-5,"_233":382,"_27":383},{"_44":368,"_32":369,"_30":370,"_137":282,"_42":43,"_41":371,"_139":60,"_39":372,"_13":64,"_34":35,"_36":373,"_24":25,"_142":-5,"_233":374,"_27":375},{"_44":360,"_32":361,"_30":362,"_137":282,"_42":43,"_41":363,"_139":60,"_39":364,"_13":267,"_34":35,"_36":365,"_24":25,"_142":-5,"_233":366,"_27":367},{"_44":355,"_32":33,"_30":31,"_137":282,"_42":43,"_41":14,"_139":25,"_39":356,"_13":357,"_34":35,"_36":38,"_24":25,"_142":-5,"_233":358,"_27":359},{"_44":347,"_32":348,"_30":349,"_137":282,"_42":43,"_41":350,"_139":60,"_39":351,"_13":64,"_34":35,"_36":352,"_24":25,"_142":-5,"_233":353,"_27":354},{"_44":339,"_32":340,"_30":341,"_137":282,"_42":43,"_41":342,"_139":60,"_39":343,"_13":267,"_34":35,"_36":344,"_24":25,"_142":-5,"_233":345,"_27":346},{"_44":331,"_32":332,"_30":333,"_137":282,"_42":43,"_41":334,"_139":60,"_39":335,"_13":64,"_34":35,"_36":336,"_24":25,"_142":-5,"_233":337,"_27":338},{"_44":322,"_32":323,"_30":324,"_137":282,"_42":43,"_41":325,"_139":25,"_39":326,"_13":327,"_34":35,"_36":328,"_24":25,"_142":-5,"_233":329,"_27":330},{"_44":314,"_32":315,"_30":316,"_137":282,"_42":43,"_41":317,"_139":25,"_39":318,"_13":310,"_34":35,"_36":319,"_24":25,"_142":-5,"_233":320,"_27":321},{"_44":305,"_32":306,"_30":307,"_137":282,"_42":43,"_41":308,"_139":60,"_39":309,"_13":310,"_34":35,"_36":311,"_24":25,"_142":-5,"_233":312,"_27":313},{"_44":297,"_32":298,"_30":299,"_137":282,"_42":43,"_41":300,"_139":60,"_39":301,"_13":64,"_34":35,"_36":302,"_24":25,"_142":-5,"_233":303,"_27":304},{"_44":289,"_32":290,"_30":291,"_137":282,"_42":43,"_41":292,"_139":60,"_39":293,"_13":64,"_34":35,"_36":294,"_24":25,"_142":-5,"_233":295,"_27":296},{"_44":279,"_32":280,"_30":281,"_137":282,"_42":43,"_41":283,"_139":60,"_39":284,"_13":64,"_34":35,"_36":285,"_24":25,"_142":-5,"_233":286,"_27":287},{"_44":271,"_32":272,"_30":273,"_137":167,"_42":43,"_41":274,"_139":60,"_39":275,"_13":161,"_34":20,"_36":276,"_24":25,"_142":-5,"_233":277,"_27":278},{"_44":262,"_32":263,"_30":264,"_137":167,"_42":43,"_41":265,"_139":60,"_39":266,"_13":267,"_34":20,"_36":268,"_24":25,"_142":-5,"_233":269,"_27":270},{"_44":254,"_32":255,"_30":256,"_137":167,"_42":43,"_41":257,"_139":60,"_39":258,"_13":161,"_34":35,"_36":259,"_24":25,"_142":-5,"_233":260,"_27":261},{"_44":158,"_32":159,"_30":160,"_137":-5,"_42":43,"_41":161,"_139":60,"_39":251,"_13":64,"_34":163,"_36":-5,"_24":25,"_142":-5,"_233":252,"_27":253},{"_44":242,"_32":243,"_30":244,"_137":160,"_42":43,"_41":245,"_139":25,"_39":246,"_13":247,"_34":35,"_36":248,"_24":25,"_142":-5,"_233":249,"_27":250},{"_44":151,"_32":152,"_30":153,"_137":-5,"_42":43,"_41":154,"_139":25,"_39":239,"_13":64,"_34":20,"_36":156,"_24":25,"_142":-5,"_233":240,"_27":241},{"_44":144,"_32":145,"_30":146,"_137":-5,"_42":43,"_41":147,"_139":60,"_39":236,"_13":64,"_34":20,"_36":149,"_24":25,"_142":-5,"_233":237,"_27":238},{"_44":134,"_32":135,"_30":136,"_137":-5,"_42":43,"_41":138,"_139":60,"_39":232,"_13":64,"_34":20,"_36":141,"_24":25,"_142":-5,"_233":234,"_27":235},["D",1765138635487],"children",[],[135],["D",1765138635892],[],[145],["D",1765138635895],[],[152],"7e6035e6-e78f-11f0-b1b2-42dde27851f2","types.ts","b9331f48-d3a9-11f0-a755-42dde27851f2",194,["D",1767326393490],10,"// Shared types for Carmy - Recipe and Meal Planning App\n// NOTE: This file runs in both frontend and backend - do not use Deno APIs here\n\nexport interface User {\n id: string;\n email: string;\n name: string | null;\n picture: string | null;\n}\n\nexport interface Recipe {\n id: string;\n userId: string;\n title: string;\n url: string | null;\n instructions: string | null;\n servingSize: number;\n createdAt: string;\n updatedAt: string;\n ingredients: RecipeIngredient[];\n nutrition: RecipeNutrition | null;\n}\n\nexport interface RecipeIngredient {\n id: string;\n recipeId: string;\n name: string;\n amount: number | null;\n unit: string | null;\n amountGrams: number | null; // Converted amount in grams for nutrition calculation\n notes: string | null;\n orderIndex: number;\n // FDC linking fields\n fdcId: number | null;\n fdcDescription: string | null;\n fdcDataType: FDCDataType | null;\n}\n\nexport type FDCDataType = 'Branded' | 'Foundation' | 'SR Legacy' | 'Survey (FNDDS)';\n\n// Cached FDC food data\nexport interface FDCFood {\n fdcId: number;\n description: string;\n dataType: FDCDataType;\n brandOwner: string | null;\n brandName: string | null;\n servingSize: number | null;\n servingSizeUnit: string | null;\n householdServingText: string | null;\n nutrition: FDCNutrition;\n cachedAt: string;\n}\n\n// Comprehensive nutrition data from FDC (per 100g)\n// Includes all available nutrients from USDA FoodData Central\nexport interface FDCNutrition {\n // Energy\n calories: number | null; // kcal\n \n // Macronutrients\n protein: number | null; // g\n fat: number | null; // g - Total lipid\n carbs: number | null; // g - Carbohydrate, by difference\n fiber: number | null; // g - Fiber, total dietary\n sugars: number | null; // g - Sugars, total\n addedSugars: number | null; // g - Sugars, added\n starch: number | null; // g\n \n // Fats breakdown\n saturatedFat: number | null; // g - Fatty acids, total saturated\n transFat: number | null; // g - Fatty acids, total trans\n monounsaturatedFat: number | null; // g - Fatty acids, total monounsaturated\n polyunsaturatedFat: number | null; // g - Fatty acids, total polyunsaturated\n cholesterol: number | null; // mg\n \n // Other macros\n water: number | null; // g\n alcohol: number | null; // g - Ethanol\n caffeine: number | null; // mg\n \n // Minerals\n sodium: number | null; // mg\n potassium: number | null; // mg\n calcium: number | null; // mg\n iron: number | null; // mg\n magnesium: number | null; // mg\n zinc: number | null; // mg\n phosphorus: number | null; // mg\n selenium: number | null; // mcg\n copper: number | null; // mg\n manganese: number | null; // mg\n fluoride: number | null; // mcg\n chromium: number | null; // mcg\n molybdenum: number | null; // mcg\n iodine: number | null; // mcg\n chloride: number | null; // mg\n \n // Vitamins - Fat soluble\n vitaminA: number | null; // mcg RAE\n retinol: number | null; // mcg\n betaCarotene: number | null; // mcg\n alphaCarotene: number | null; // mcg\n betaCryptoxanthin: number | null; // mcg\n lycopene: number | null; // mcg\n luteinZeaxanthin: number | null; // mcg\n vitaminD: number | null; // mcg (D2 + D3)\n vitaminD2: number | null; // mcg\n vitaminD3: number | null; // mcg\n vitaminE: number | null; // mg (alpha-tocopherol)\n vitaminK: number | null; // mcg (phylloquinone)\n vitaminK2: number | null; // mcg (menaquinone)\n \n // Vitamins - Water soluble\n vitaminC: number | null; // mg\n vitaminB6: number | null; // mg\n vitaminB12: number | null; // mcg\n thiamin: number | null; // mg (B1)\n riboflavin: number | null; // mg (B2)\n niacin: number | null; // mg (B3)\n pantothenicAcid: number | null; // mg (B5)\n biotin: number | null; // mcg (B7)\n folate: number | null; // mcg DFE\n folicAcid: number | null; // mcg\n choline: number | null; // mg\n betaine: number | null; // mg\n}\n\n// Recipe nutrition - same structure as FDCNutrition plus metadata\nexport interface RecipeNutrition extends FDCNutrition {\n id: string;\n recipeId: string;\n // Whether all ingredients have FDC links\n isComplete: boolean;\n}\n\nexport interface GroceryList {\n id: string;\n userId: string;\n name: string;\n createdAt: string;\n updatedAt: string;\n items: GroceryListItem[];\n}\n\nexport interface GroceryListItem {\n id: string;\n listId: string;\n name: string;\n quantity: number | null;\n unit: string | null;\n notes: string | null;\n recipeId: string | null;\n recipeName: string | null;\n checked: boolean;\n createdAt: string;\n}\n\nexport interface NutritionGoals {\n id: string;\n userId: string;\n primaryGoalType: NutritionGoalType;\n primaryGoalValue: number;\n subGoal1Type: NutritionGoalType | null;\n subGoal1Value: number | null;\n subGoal2Type: NutritionGoalType | null;\n subGoal2Value: number | null;\n updatedAt: string;\n}\n\nexport type NutritionGoalType = 'calories' | 'protein' | 'fiber' | 'fat' | 'carbs';\n\nexport const NUTRITION_GOAL_UNITS: Record = {\n calories: 'kcal',\n protein: 'g',\n fiber: 'g',\n fat: 'g',\n carbs: 'g',\n};\n\nexport const NUTRITION_GOAL_LABELS: Record = {\n calories: 'Calories',\n protein: 'Protein',\n fiber: 'Fiber',\n fat: 'Fat',\n carbs: 'Carbohydrates',\n};\n\n// All nutrition keys (comprehensive list from USDA FDC)\nexport type NutrientKey =\n // Energy\n | 'calories'\n // Macronutrients\n | 'protein' | 'fat' | 'carbs' | 'fiber' | 'sugars' | 'addedSugars' | 'starch'\n // Fats breakdown\n | 'saturatedFat' | 'transFat' | 'monounsaturatedFat' | 'polyunsaturatedFat' | 'cholesterol'\n // Other macros\n | 'water' | 'alcohol' | 'caffeine'\n // Minerals\n | 'sodium' | 'potassium' | 'calcium' | 'iron' | 'magnesium' | 'zinc'\n | 'phosphorus' | 'selenium' | 'copper' | 'manganese'\n | 'fluoride' | 'chromium' | 'molybdenum' | 'iodine' | 'chloride'\n // Vitamins - Fat soluble\n | 'vitaminA' | 'retinol' | 'betaCarotene' | 'alphaCarotene' | 'betaCryptoxanthin'\n | 'lycopene' | 'luteinZeaxanthin'\n | 'vitaminD' | 'vitaminD2' | 'vitaminD3'\n | 'vitaminE' | 'vitaminK' | 'vitaminK2'\n // Vitamins - Water soluble\n | 'vitaminC' | 'vitaminB6' | 'vitaminB12'\n | 'thiamin' | 'riboflavin' | 'niacin' | 'pantothenicAcid' | 'biotin'\n | 'folate' | 'folicAcid' | 'choline' | 'betaine';\n\n// Nutrient categories for grouping in UI\nexport type NutrientCategory = 'energy' | 'macro' | 'fats' | 'other' | 'mineral' | 'vitaminFatSoluble' | 'vitaminWaterSoluble' | 'carotenoid';\n\nexport const NUTRIENT_INFO: Record = {\n // Energy\n calories: { label: 'Calories', unit: 'kcal', category: 'energy' },\n \n // Macronutrients\n protein: { label: 'Protein', unit: 'g', category: 'macro' },\n fat: { label: 'Total Fat', unit: 'g', category: 'macro' },\n carbs: { label: 'Carbohydrates', unit: 'g', category: 'macro' },\n fiber: { label: 'Fiber', unit: 'g', category: 'macro' },\n sugars: { label: 'Sugars', unit: 'g', category: 'macro' },\n addedSugars: { label: 'Added Sugars', unit: 'g', category: 'macro' },\n starch: { label: 'Starch', unit: 'g', category: 'macro' },\n \n // Fats breakdown\n saturatedFat: { label: 'Saturated Fat', unit: 'g', category: 'fats' },\n transFat: { label: 'Trans Fat', unit: 'g', category: 'fats' },\n monounsaturatedFat: { label: 'Monounsaturated Fat', unit: 'g', category: 'fats' },\n polyunsaturatedFat: { label: 'Polyunsaturated Fat', unit: 'g', category: 'fats' },\n cholesterol: { label: 'Cholesterol', unit: 'mg', category: 'fats' },\n \n // Other macros\n water: { label: 'Water', unit: 'g', category: 'other' },\n alcohol: { label: 'Alcohol', unit: 'g', category: 'other' },\n caffeine: { label: 'Caffeine', unit: 'mg', category: 'other' },\n \n // Minerals\n sodium: { label: 'Sodium', unit: 'mg', category: 'mineral' },\n potassium: { label: 'Potassium', unit: 'mg', category: 'mineral' },\n calcium: { label: 'Calcium', unit: 'mg', category: 'mineral' },\n iron: { label: 'Iron', unit: 'mg', category: 'mineral' },\n magnesium: { label: 'Magnesium', unit: 'mg', category: 'mineral' },\n zinc: { label: 'Zinc', unit: 'mg', category: 'mineral' },\n phosphorus: { label: 'Phosphorus', unit: 'mg', category: 'mineral' },\n selenium: { label: 'Selenium', unit: 'mcg', category: 'mineral' },\n copper: { label: 'Copper', unit: 'mg', category: 'mineral' },\n manganese: { label: 'Manganese', unit: 'mg', category: 'mineral' },\n fluoride: { label: 'Fluoride', unit: 'mcg', category: 'mineral' },\n chromium: { label: 'Chromium', unit: 'mcg', category: 'mineral' },\n molybdenum: { label: 'Molybdenum', unit: 'mcg', category: 'mineral' },\n iodine: { label: 'Iodine', unit: 'mcg', category: 'mineral' },\n chloride: { label: 'Chloride', unit: 'mg', category: 'mineral' },\n \n // Vitamins - Fat soluble\n vitaminA: { label: 'Vitamin A', unit: 'mcg', category: 'vitaminFatSoluble' },\n retinol: { label: 'Retinol', unit: 'mcg', category: 'vitaminFatSoluble' },\n betaCarotene: { label: 'Beta-Carotene', unit: 'mcg', category: 'carotenoid' },\n alphaCarotene: { label: 'Alpha-Carotene', unit: 'mcg', category: 'carotenoid' },\n betaCryptoxanthin: { label: 'Beta-Cryptoxanthin', unit: 'mcg', category: 'carotenoid' },\n lycopene: { label: 'Lycopene', unit: 'mcg', category: 'carotenoid' },\n luteinZeaxanthin: { label: 'Lutein + Zeaxanthin', unit: 'mcg', category: 'carotenoid' },\n vitaminD: { label: 'Vitamin D', unit: 'mcg', category: 'vitaminFatSoluble' },\n vitaminD2: { label: 'Vitamin D2', unit: 'mcg', category: 'vitaminFatSoluble' },\n vitaminD3: { label: 'Vitamin D3', unit: 'mcg', category: 'vitaminFatSoluble' },\n vitaminE: { label: 'Vitamin E', unit: 'mg', category: 'vitaminFatSoluble' },\n vitaminK: { label: 'Vitamin K', unit: 'mcg', category: 'vitaminFatSoluble' },\n vitaminK2: { label: 'Vitamin K2', unit: 'mcg', category: 'vitaminFatSoluble' },\n \n // Vitamins - Water soluble\n vitaminC: { label: 'Vitamin C', unit: 'mg', category: 'vitaminWaterSoluble' },\n vitaminB6: { label: 'Vitamin B6', unit: 'mg', category: 'vitaminWaterSoluble' },\n vitaminB12: { label: 'Vitamin B12', unit: 'mcg', category: 'vitaminWaterSoluble' },\n thiamin: { label: 'Thiamin (B1)', unit: 'mg', category: 'vitaminWaterSoluble' },\n riboflavin: { label: 'Riboflavin (B2)', unit: 'mg', category: 'vitaminWaterSoluble' },\n niacin: { label: 'Niacin (B3)', unit: 'mg', category: 'vitaminWaterSoluble' },\n pantothenicAcid: { label: 'Pantothenic Acid (B5)', unit: 'mg', category: 'vitaminWaterSoluble' },\n biotin: { label: 'Biotin (B7)', unit: 'mcg', category: 'vitaminWaterSoluble' },\n folate: { label: 'Folate', unit: 'mcg', category: 'vitaminWaterSoluble' },\n folicAcid: { label: 'Folic Acid', unit: 'mcg', category: 'vitaminWaterSoluble' },\n choline: { label: 'Choline', unit: 'mg', category: 'vitaminWaterSoluble' },\n betaine: { label: 'Betaine', unit: 'mg', category: 'vitaminWaterSoluble' },\n};\n\n// List of all nutrient keys for iteration\nexport const ALL_NUTRIENT_KEYS: NutrientKey[] = Object.keys(NUTRIENT_INFO) as NutrientKey[];\n\n// Get nutrients by category\nexport function getNutrientsByCategory(category: NutrientCategory): NutrientKey[] {\n return ALL_NUTRIENT_KEYS.filter(key => NUTRIENT_INFO[key].category === category);\n}\n\n// Common ingredient units with gram conversions (approximate, for common ingredients)\nexport const COMMON_UNITS = ['g', 'oz', 'lb', 'cup', 'tbsp', 'tsp', 'ml', 'piece', 'whole'] as const;\nexport type IngredientUnit = typeof COMMON_UNITS[number];\n\n// FDC search result (summary)\nexport interface FDCSearchResult {\n fdcId: number;\n description: string;\n dataType: FDCDataType;\n brandOwner: string | null;\n brandName: string | null;\n score: number;\n micronutrientCount: number | null; // How many micronutrients have data\n}\n\nexport interface MealPlan {\n id: string;\n userId: string;\n weekStartDate: string; // ISO date string (Sunday)\n createdAt: string;\n updatedAt: string;\n entries: MealPlanEntry[];\n}\n\nexport type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6; // Sunday = 0\nexport type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snacks';\n\nexport const DAY_NAMES: string[] = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\nexport const MEAL_TYPES: MealType[] = ['breakfast', 'lunch', 'dinner', 'snacks'];\nexport const MEAL_TYPE_LABELS: Record = {\n breakfast: 'Breakfast',\n lunch: 'Lunch',\n dinner: 'Dinner',\n snacks: 'Snacks',\n};\n\n// Custom food with user-defined nutrition (per serving)\nexport interface CustomFood {\n id: string;\n userId: string;\n name: string;\n servingSizeGrams: number; // default 100g\n // All nutrition fields from FDCNutrition\n calories: number | null;\n protein: number | null;\n fat: number | null;\n carbs: number | null;\n fiber: number | null;\n sugars: number | null;\n addedSugars: number | null;\n starch: number | null;\n saturatedFat: number | null;\n transFat: number | null;\n monounsaturatedFat: number | null;\n polyunsaturatedFat: number | null;\n cholesterol: number | null;\n water: number | null;\n alcohol: number | null;\n caffeine: number | null;\n sodium: number | null;\n potassium: number | null;\n calcium: number | null;\n iron: number | null;\n magnesium: number | null;\n zinc: number | null;\n phosphorus: number | null;\n selenium: number | null;\n copper: number | null;\n manganese: number | null;\n fluoride: number | null;\n chromium: number | null;\n molybdenum: number | null;\n iodine: number | null;\n chloride: number | null;\n vitaminA: number | null;\n retinol: number | null;\n betaCarotene: number | null;\n alphaCarotene: number | null;\n betaCryptoxanthin: number | null;\n lycopene: number | null;\n luteinZeaxanthin: number | null;\n vitaminD: number | null;\n vitaminD2: number | null;\n vitaminD3: number | null;\n vitaminE: number | null;\n vitaminK: number | null;\n vitaminK2: number | null;\n vitaminC: number | null;\n vitaminB6: number | null;\n vitaminB12: number | null;\n thiamin: number | null;\n riboflavin: number | null;\n niacin: number | null;\n pantothenicAcid: number | null;\n biotin: number | null;\n folate: number | null;\n folicAcid: number | null;\n choline: number | null;\n betaine: number | null;\n createdAt: string;\n updatedAt: string;\n}\n\n// Meal plan entry - supports recipes, custom foods, or individual FDC ingredients\n// Exactly one of recipeId, customFoodId, or fdcId should be set\nexport interface MealPlanEntry {\n id: string;\n mealPlanId: string;\n dayOfWeek: DayOfWeek;\n mealType: MealType;\n // One of these three will be set\n recipeId: string | null;\n customFoodId: string | null;\n fdcId: number | null;\n // Associated data (populated when fetched)\n recipe?: Recipe;\n customFood?: CustomFood;\n fdcFood?: FDCFood;\n // Servings for recipes, amount for custom foods/ingredients\n servings: number;\n amountGrams: number | null; // Used for custom foods and FDC ingredients\n}\n\n// Daily nutrition totals\nexport interface DailyNutrition {\n calories: number;\n protein: number;\n fat: number;\n carbs: number;\n fiber: number;\n sugars: number;\n addedSugars: number;\n starch: number;\n saturatedFat: number;\n transFat: number;\n monounsaturatedFat: number;\n polyunsaturatedFat: number;\n cholesterol: number;\n water: number;\n alcohol: number;\n caffeine: number;\n sodium: number;\n potassium: number;\n calcium: number;\n iron: number;\n magnesium: number;\n zinc: number;\n phosphorus: number;\n selenium: number;\n copper: number;\n manganese: number;\n fluoride: number;\n chromium: number;\n molybdenum: number;\n iodine: number;\n chloride: number;\n vitaminA: number;\n retinol: number;\n betaCarotene: number;\n alphaCarotene: number;\n betaCryptoxanthin: number;\n lycopene: number;\n luteinZeaxanthin: number;\n vitaminD: number;\n vitaminD2: number;\n vitaminD3: number;\n vitaminE: number;\n vitaminK: number;\n vitaminK2: number;\n vitaminC: number;\n vitaminB6: number;\n vitaminB12: number;\n thiamin: number;\n riboflavin: number;\n niacin: number;\n pantothenicAcid: number;\n biotin: number;\n folate: number;\n folicAcid: number;\n choline: number;\n betaine: number;\n}\n\n// Helper to create empty daily nutrition\nexport function createEmptyDailyNutrition(): DailyNutrition {\n return {\n calories: 0,\n protein: 0,\n fat: 0,\n carbs: 0,\n fiber: 0,\n sugars: 0,\n addedSugars: 0,\n starch: 0,\n saturatedFat: 0,\n transFat: 0,\n monounsaturatedFat: 0,\n polyunsaturatedFat: 0,\n cholesterol: 0,\n water: 0,\n alcohol: 0,\n caffeine: 0,\n sodium: 0,\n potassium: 0,\n calcium: 0,\n iron: 0,\n magnesium: 0,\n zinc: 0,\n phosphorus: 0,\n selenium: 0,\n copper: 0,\n manganese: 0,\n fluoride: 0,\n chromium: 0,\n molybdenum: 0,\n iodine: 0,\n chloride: 0,\n vitaminA: 0,\n retinol: 0,\n betaCarotene: 0,\n alphaCarotene: 0,\n betaCryptoxanthin: 0,\n lycopene: 0,\n luteinZeaxanthin: 0,\n vitaminD: 0,\n vitaminD2: 0,\n vitaminD3: 0,\n vitaminE: 0,\n vitaminK: 0,\n vitaminK2: 0,\n vitaminC: 0,\n vitaminB6: 0,\n vitaminB12: 0,\n thiamin: 0,\n riboflavin: 0,\n niacin: 0,\n pantothenicAcid: 0,\n biotin: 0,\n folate: 0,\n folicAcid: 0,\n choline: 0,\n betaine: 0,\n };\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}\n\n// Request types\nexport interface CreateRecipeIngredient {\n name: string;\n amount?: number | null;\n unit?: string | null;\n notes?: string | null;\n fdcId?: number | null;\n fdcDescription?: string | null;\n fdcDataType?: FDCDataType | null;\n}\n\nexport interface CreateRecipeRequest {\n title: string;\n url?: string | null;\n instructions?: string | null;\n servingSize: number;\n ingredients: CreateRecipeIngredient[];\n // Note: nutrition is now calculated from ingredients, not manually provided\n}\n\n// Response type for parsing a recipe from URL\nexport interface ParsedRecipeFromUrl {\n title: string;\n url: string;\n instructions: string | null;\n servingSize: number;\n ingredients: {\n name: string;\n amount: number | null;\n unit: string | null;\n notes: string | null;\n originalText: string;\n }[];\n nutrition: {\n calories: number | null;\n protein: number | null;\n fiber: number | null;\n fat: number | null;\n carbs: number | null;\n } | null;\n}\n\nexport interface UpdateRecipeRequest extends Partial {\n id: string;\n}\n\nexport const DEFAULT_GROCERY_LIST_NAME = 'Grocery List';\n\nexport interface CreateGroceryListRequest {\n name: string;\n}\n\nexport interface AddGroceryItemRequest {\n name: string;\n quantity?: number | null;\n unit?: string | null;\n notes?: string | null;\n}\n\nexport interface UpdateGroceryItemRequest {\n name?: string;\n quantity?: number | null;\n unit?: string | null;\n notes?: string | null;\n checked?: boolean;\n}\n\nexport interface AddRecipeIngredientsRequest {\n recipeId: string;\n}\n\nexport interface UpdateNutritionGoalsRequest {\n primaryGoalType: NutritionGoalType;\n primaryGoalValue: number;\n subGoal1Type?: NutritionGoalType | null;\n subGoal1Value?: number | null;\n subGoal2Type?: NutritionGoalType | null;\n subGoal2Value?: number | null;\n}\n\n// Supports adding recipes, custom foods, or FDC ingredients to meal plan\nexport interface AddMealPlanEntryRequest {\n weekStartDate: string;\n dayOfWeek: DayOfWeek;\n mealType: MealType;\n // One of these three should be provided\n recipeId?: string;\n customFoodId?: string;\n fdcId?: number;\n servings?: number;\n amountGrams?: number; // For custom foods and FDC ingredients\n}\n\n// Starred ingredient for quick access when linking\nexport interface StarredIngredient {\n id: string;\n userId: string;\n fdcId: number;\n fdcDescription: string;\n fdcDataType: FDCDataType;\n brandOwner: string | null;\n createdAt: string;\n}\n\nexport interface ScheduleMealRequest {\n recipeId?: string;\n customFoodId?: string;\n fdcId?: number;\n amountGrams?: number;\n mealType: MealType;\n weekStartDate: string;\n days: DayOfWeek[]; // which days to add to\n servings?: number;\n}\n\n// Custom food request types\nexport interface CreateCustomFoodRequest {\n name: string;\n servingSizeGrams?: number; // defaults to 100\n // All nutrient fields are optional\n calories?: number | null;\n protein?: number | null;\n fat?: number | null;\n carbs?: number | null;\n fiber?: number | null;\n sugars?: number | null;\n addedSugars?: number | null;\n starch?: number | null;\n saturatedFat?: number | null;\n transFat?: number | null;\n monounsaturatedFat?: number | null;\n polyunsaturatedFat?: number | null;\n cholesterol?: number | null;\n water?: number | null;\n alcohol?: number | null;\n caffeine?: number | null;\n sodium?: number | null;\n potassium?: number | null;\n calcium?: number | null;\n iron?: number | null;\n magnesium?: number | null;\n zinc?: number | null;\n phosphorus?: number | null;\n selenium?: number | null;\n copper?: number | null;\n manganese?: number | null;\n fluoride?: number | null;\n chromium?: number | null;\n molybdenum?: number | null;\n iodine?: number | null;\n chloride?: number | null;\n vitaminA?: number | null;\n retinol?: number | null;\n betaCarotene?: number | null;\n alphaCarotene?: number | null;\n betaCryptoxanthin?: number | null;\n lycopene?: number | null;\n luteinZeaxanthin?: number | null;\n vitaminD?: number | null;\n vitaminD2?: number | null;\n vitaminD3?: number | null;\n vitaminE?: number | null;\n vitaminK?: number | null;\n vitaminK2?: number | null;\n vitaminC?: number | null;\n vitaminB6?: number | null;\n vitaminB12?: number | null;\n thiamin?: number | null;\n riboflavin?: number | null;\n niacin?: number | null;\n pantothenicAcid?: number | null;\n biotin?: number | null;\n folate?: number | null;\n folicAcid?: number | null;\n choline?: number | null;\n betaine?: number | null;\n}\n\nexport interface UpdateCustomFoodRequest extends Partial {\n id: string;\n}\n",[],[159,243],["D",1765138634405],[228],[159],"82072d06-e13d-11f0-9cc2-42dde27851f2","index.tsx","b8cb9256-d3a9-11f0-ba80-42dde27851f2",148,["D",1766631473917],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();\n\n\n\n\n",[],[166,255],"926f71f6-e793-11f0-bf91-42dde27851f2","index.html","b8d03d1a-d3a9-11f0-8004-42dde27851f2",196,["D",1767328145120],4,"\n\n\n \n \n Carmy - Recipe & Meal Planning\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n \n

\n \n\n\n\n\n\n\n",[],[166,263],"8307e934-e13d-11f0-b455-42dde27851f2","favicon.svg","b8f8fbb0-d3a9-11f0-897f-42dde27851f2",155,["D",1766631475442],"\n\n\n\n\n",[],[166,272],"9268a86c-e793-11f0-aabf-42dde27851f2","UserDropdown.tsx","9268a948-e793-11f0-aabf-42dde27851f2","b86d06aa-d3a9-11f0-b1e3-42dde27851f2",195,["D",1767328145092],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../../shared/types.ts\";\nimport { useTheme, SunIcon, MoonIcon, ComputerIcon, ThemeMode } from \"./ThemeContext.tsx\";\n\ninterface UserDropdownProps {\n user: User;\n onLogout: () => void;\n}\n\nexport function UserDropdown({ user, onLogout }: UserDropdownProps) {\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef(null);\n const { mode, resolvedTheme, setMode, toggleTheme } = useTheme();\n\n // Close dropdown when clicking outside\n useEffect(() => {\n function handleClickOutside(event: MouseEvent) {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n // Close dropdown on escape key\n useEffect(() => {\n function handleEscape(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n setIsOpen(false);\n }\n }\n\n document.addEventListener('keydown', handleEscape);\n return () => document.removeEventListener('keydown', handleEscape);\n }, []);\n\n const handleModeChange = (newMode: ThemeMode) => {\n setMode(newMode);\n };\n\n return (\n

\n {/* User button with quick theme toggle */}\n

\n {/* Quick theme toggle button */}\n \n {resolvedTheme === 'dark' ? (\n \n ) : (\n \n )}\n \n\n {/* User avatar button */}\n setIsOpen(!isOpen)}\n className=\"flex items-center gap-2 p-1.5 rounded-lg transition-all hover:bg-gray-100\"\n style={{ background: isOpen ? 'var(--bg-tertiary)' : 'transparent' }}\n >\n {user.picture ? (\n $\"\"$ \n ) : (\n

\n {user.name?.charAt(0).toUpperCase() || user.email.charAt(0).toUpperCase()}\n

\n )}\n \n \n

\n\n {/* Dropdown menu */}\n {isOpen && (\n

\n {/* User info */}\n

\n {user.name || 'User'}\n

\n {user.email}\n

\n\n {/* Appearance section */}\n

\n Appearance\n

\n handleModeChange('light')}\n className={`theme-segment-btn ${mode === 'light' ? 'active' : ''}`}\n >\n \n Light\n \n handleModeChange('dark')}\n className={`theme-segment-btn ${mode === 'dark' ? 'active' : ''}`}\n >\n \n Dark\n \n handleModeChange('system')}\n className={`theme-segment-btn ${mode === 'system' ? 'active' : ''}`}\n >\n \n Auto\n \n

\n\n {/* Actions */}\n

\n {\n setIsOpen(false);\n onLogout();\n }}\n className=\"dropdown-item\"\n style={{ color: 'var(--text-primary)' }}\n >\n \n Sign out\n \n

\n )}\n

\n );\n}\n\n",[],[166,288,280],"components","7d4bc1fc-e78f-11f0-b382-42dde27851f2","UnitSelect.tsx","7d4bc288-e78f-11f0-b382-42dde27851f2",188,["D",1767326391689],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\n\n// Common units for grocery items\nconst COMMON_UNITS = [\n { value: '', label: '—' },\n { value: 'g', label: 'g' },\n { value: 'kg', label: 'kg' },\n { value: 'oz', label: 'oz' },\n { value: 'lb', label: 'lb' },\n { value: 'cup', label: 'cup' },\n { value: 'cups', label: 'cups' },\n { value: 'tbsp', label: 'tbsp' },\n { value: 'tsp', label: 'tsp' },\n { value: 'ml', label: 'ml' },\n { value: 'L', label: 'L' },\n { value: 'piece', label: 'piece' },\n { value: 'pieces', label: 'pieces' },\n { value: 'whole', label: 'whole' },\n { value: 'can', label: 'can' },\n { value: 'bottle', label: 'bottle' },\n { value: 'bag', label: 'bag' },\n { value: 'box', label: 'box' },\n { value: 'bunch', label: 'bunch' },\n { value: 'head', label: 'head' },\n { value: 'clove', label: 'clove' },\n { value: 'slice', label: 'slice' },\n { value: 'slices', label: 'slices' },\n];\n\ninterface UnitSelectProps {\n value: string | null;\n onChange: (value: string | null) => void;\n className?: string;\n placeholder?: string;\n disabled?: boolean;\n}\n\nexport function UnitSelect({ \n value, \n onChange, \n className = '', \n placeholder = 'Unit',\n disabled = false \n}: UnitSelectProps) {\n const [isOpen, setIsOpen] = useState(false);\n const [customMode, setCustomMode] = useState(false);\n const [customValue, setCustomValue] = useState('');\n const containerRef = useRef(null);\n const inputRef = useRef(null);\n\n // Check if current value is a custom value (not in common units)\n const isCustomValue = value && !COMMON_UNITS.some(u => u.value === value);\n\n useEffect(() => {\n if (isCustomValue && value) {\n setCustomValue(value);\n setCustomMode(true);\n }\n }, [isCustomValue, value]);\n\n // Close dropdown when clicking outside\n useEffect(() => {\n function handleClickOutside(event: MouseEvent) {\n if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n if (customMode && customValue) {\n onChange(customValue);\n }\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [customMode, customValue, onChange]);\n\n // Focus input when entering custom mode\n useEffect(() => {\n if (customMode && isOpen && inputRef.current) {\n inputRef.current.focus();\n }\n }, [customMode, isOpen]);\n\n const handleSelect = (unitValue: string) => {\n if (unitValue === '__custom__') {\n setCustomMode(true);\n setCustomValue(value || '');\n } else {\n onChange(unitValue || null);\n setCustomMode(false);\n setIsOpen(false);\n }\n };\n\n const handleCustomSubmit = () => {\n onChange(customValue.trim() || null);\n setIsOpen(false);\n };\n\n const handleCustomKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter') {\n handleCustomSubmit();\n } else if (e.key === 'Escape') {\n setCustomMode(false);\n setCustomValue('');\n }\n };\n\n const displayValue = value || placeholder;\n\n return (\n

\n !disabled && setIsOpen(!isOpen)}\n disabled={disabled}\n className={`\n w-full px-2 py-1.5 text-sm text-left border rounded-md\n ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white hover:border-gray-400 cursor-pointer'}\n ${isOpen ? 'border-blue-500 ring-1 ring-blue-500' : 'border-gray-300'}\n ${!value ? 'text-gray-400' : 'text-gray-900'}\n transition-colors\n `}\n >\n {displayValue}\n \n \n \n \n\n {isOpen && !disabled && (\n

\n {customMode ? (\n

\n setCustomValue(e.target.value)}\n onKeyDown={handleCustomKeyDown}\n placeholder=\"Type custom unit...\"\n className=\"w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-500\"\n />\n

\n \n Apply\n \n {\n setCustomMode(false);\n setCustomValue('');\n }}\n className=\"flex-1 px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200\"\n >\n Cancel\n \n

\n ) : (\n <>\n {COMMON_UNITS.map((unit) => (\n handleSelect(unit.value)}\n className={`\n w-full px-3 py-1.5 text-sm text-left hover:bg-gray-100\n ${value === unit.value ? 'bg-blue-50 text-blue-700' : 'text-gray-900'}\n `}\n >\n {unit.label}\n \n ))}\n

\n handleSelect('__custom__')}\n className=\"w-full px-3 py-1.5 text-sm text-left text-blue-600 hover:bg-blue-50 flex items-center gap-1\"\n >\n \n Custom unit...\n \n

\n \n )}\n

\n )}\n

\n );\n}\n\n",[],[166,288,290],"92752bfa-e793-11f0-91fb-42dde27851f2","ThemeContext.tsx","92752ca4-e793-11f0-91fb-42dde27851f2",197,["D",1767328145101],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { createContext, useContext, useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\n\nexport type ThemeMode = 'light' | 'dark' | 'system';\nexport type ResolvedTheme = 'light' | 'dark';\n\ninterface ThemeContextValue {\n mode: ThemeMode;\n resolvedTheme: ResolvedTheme;\n setMode: (mode: ThemeMode) => void;\n toggleTheme: () => void;\n}\n\nconst ThemeContext = createContext(undefined);\n\nconst STORAGE_KEY = 'carmy-theme';\n\nfunction getSystemTheme(): ResolvedTheme {\n if (typeof window === 'undefined') return 'light';\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\nfunction resolveTheme(mode: ThemeMode): ResolvedTheme {\n if (mode === 'system') {\n return getSystemTheme();\n }\n return mode;\n}\n\nfunction applyTheme(theme: ResolvedTheme) {\n if (theme === 'dark') {\n document.documentElement.setAttribute('data-theme', 'dark');\n } else {\n document.documentElement.removeAttribute('data-theme');\n }\n}\n\nexport function ThemeProvider({ children }: { children: React.ReactNode }) {\n // Initialize from localStorage or default to system\n const [mode, setModeState] = useState(() => {\n if (typeof window === 'undefined') return 'system';\n const stored = localStorage.getItem(STORAGE_KEY);\n if (stored === 'light' || stored === 'dark' || stored === 'system') {\n return stored;\n }\n return 'system';\n });\n\n const [resolvedTheme, setResolvedTheme] = useState(() => resolveTheme(mode));\n\n // Apply theme on mount and mode change\n useEffect(() => {\n const resolved = resolveTheme(mode);\n setResolvedTheme(resolved);\n applyTheme(resolved);\n }, [mode]);\n\n // Listen for system preference changes\n useEffect(() => {\n if (mode !== 'system') return;\n\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n const handler = (e: MediaQueryListEvent) => {\n const newTheme = e.matches ? 'dark' : 'light';\n setResolvedTheme(newTheme);\n applyTheme(newTheme);\n };\n\n mediaQuery.addEventListener('change', handler);\n return () => mediaQuery.removeEventListener('change', handler);\n }, [mode]);\n\n const setMode = useCallback((newMode: ThemeMode) => {\n setModeState(newMode);\n localStorage.setItem(STORAGE_KEY, newMode);\n }, []);\n\n const toggleTheme = useCallback(() => {\n const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';\n setMode(newTheme);\n }, [resolvedTheme, setMode]);\n\n return (\n \n {children}\n \n );\n}\n\nexport function useTheme() {\n const context = useContext(ThemeContext);\n if (context === undefined) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n}\n\n// Icon components for theme toggle\nexport function SunIcon({ className = \"w-4 h-4\" }: { className?: string }) {\n return (\n \n );\n}\n\nexport function MoonIcon({ className = \"w-4 h-4\" }: { className?: string }) {\n return (\n \n );\n}\n\nexport function ComputerIcon({ className = \"w-4 h-4\" }: { className?: string }) {\n return (\n \n );\n}\n\n",[],[166,288,298],"22826d4a-e797-11f0-992e-42dde27851f2","ScraperEvalView.tsx","0850829e-d91f-11f0-bf8f-42dde27851f2",203,["D",1767329675344],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useCallback, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface ScraperResult {\n scraper: string;\n success: boolean;\n data?: any;\n error?: string;\n durationMs: number;\n}\n\ninterface UrlResult {\n url: string;\n results: ScraperResult[];\n}\n\ninterface SavedUrl {\n id: string;\n url: string;\n createdAt: string;\n}\n\ntype ViewMode = \"key-fields\" | \"full-json\";\n\ninterface ExpandedCell {\n viewMode: ViewMode;\n}\n\ninterface ScraperEvalState {\n savedUrls: SavedUrl[];\n results: UrlResult[];\n loading: boolean;\n loadingUrls: boolean;\n // Map key is \"urlIndex-scraperIndex\", value is the expanded state\n expandedCells: Map;\n selectedUrlIds: Set;\n}\n\nconst SCRAPER_NAMES = [\n \"json-ld-native\",\n \"microdata-native\",\n \"html-recipe-parser\",\n \"schema-org-extractor\",\n];\n\nfunction getCellKey(urlIndex: number, scraperIndex: number): string {\n return `${urlIndex}-${scraperIndex}`;\n}\n\nexport function ScraperEvalView() {\n const [state, setState] = useState({\n savedUrls: [],\n results: [],\n loading: false,\n loadingUrls: true,\n expandedCells: new Map(),\n selectedUrlIds: new Set(),\n });\n const [urlInput, setUrlInput] = useState(\"\");\n const [bulkInput, setBulkInput] = useState(\"\");\n const [showBulkInput, setShowBulkInput] = useState(false);\n \n // Loading states to prevent double-clicks\n const [addingUrl, setAddingUrl] = useState(false);\n const [addingBulkUrls, setAddingBulkUrls] = useState(false);\n const [removingUrlId, setRemovingUrlId] = useState(null);\n const [clearingAll, setClearingAll] = useState(false);\n\n // Load saved URLs on mount\n useEffect(() => {\n const loadUrls = async () => {\n try {\n const response = await fetch(\"/api/scraper-eval/urls\");\n const data = await response.json();\n if (data.success) {\n setState((prev) => ({\n ...prev,\n savedUrls: data.data,\n loadingUrls: false,\n }));\n }\n } catch (err) {\n console.error(\"Failed to load saved URLs:\", err);\n setState((prev) => ({ ...prev, loadingUrls: false }));\n }\n };\n loadUrls();\n }, []);\n\n const addUrl = useCallback(async () => {\n const trimmedUrl = urlInput.trim();\n if (!trimmedUrl || addingUrl) return;\n \n // Check if URL already exists\n if (state.savedUrls.some((u) => u.url === trimmedUrl)) {\n setUrlInput(\"\");\n return;\n }\n \n try {\n new URL(trimmedUrl);\n } catch {\n return; // Invalid URL\n }\n \n setAddingUrl(true);\n try {\n const response = await fetch(\"/api/scraper-eval/urls\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ url: trimmedUrl }),\n });\n const data = await response.json();\n \n if (data.success && data.data.length > 0) {\n setState((prev) => ({\n ...prev,\n savedUrls: [...data.data, ...prev.savedUrls],\n }));\n }\n setUrlInput(\"\");\n } catch (err) {\n console.error(\"Failed to save URL:\", err);\n } finally {\n setAddingUrl(false);\n }\n }, [urlInput, state.savedUrls, addingUrl]);\n\n const addBulkUrls = useCallback(async () => {\n if (addingBulkUrls) return;\n \n const newUrls = bulkInput\n .split(\"\\n\")\n .map((u) => u.trim())\n .filter((u) => {\n if (!u || state.savedUrls.some((saved) => saved.url === u)) return false;\n try {\n new URL(u);\n return true;\n } catch {\n return false;\n }\n });\n\n if (newUrls.length === 0) {\n setBulkInput(\"\");\n setShowBulkInput(false);\n return;\n }\n \n setAddingBulkUrls(true);\n try {\n const response = await fetch(\"/api/scraper-eval/urls\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ urls: newUrls }),\n });\n const data = await response.json();\n \n if (data.success) {\n setState((prev) => ({\n ...prev,\n savedUrls: [...data.data, ...prev.savedUrls],\n }));\n }\n setBulkInput(\"\");\n setShowBulkInput(false);\n } catch (err) {\n console.error(\"Failed to save URLs:\", err);\n } finally {\n setAddingBulkUrls(false);\n }\n }, [bulkInput, state.savedUrls, addingBulkUrls]);\n\n const removeUrl = useCallback(async (savedUrl: SavedUrl) => {\n if (removingUrlId) return;\n \n setRemovingUrlId(savedUrl.id);\n try {\n const response = await fetch(`/api/scraper-eval/urls/${savedUrl.id}`, {\n method: \"DELETE\",\n });\n const data = await response.json();\n \n if (data.success) {\n setState((prev) => {\n const newSelectedIds = new Set(prev.selectedUrlIds);\n newSelectedIds.delete(savedUrl.id);\n return {\n ...prev,\n savedUrls: prev.savedUrls.filter((u) => u.id !== savedUrl.id),\n results: prev.results.filter((r) => r.url !== savedUrl.url),\n selectedUrlIds: newSelectedIds,\n };\n });\n }\n } catch (err) {\n console.error(\"Failed to delete URL:\", err);\n } finally {\n setRemovingUrlId(null);\n }\n }, [removingUrlId]);\n\n const clearAll = useCallback(async () => {\n if (clearingAll) return;\n \n setClearingAll(true);\n try {\n const response = await fetch(\"/api/scraper-eval/urls\", {\n method: \"DELETE\",\n });\n const data = await response.json();\n \n if (data.success) {\n setState((prev) => ({\n ...prev,\n savedUrls: [],\n results: [],\n expandedCells: new Map(),\n selectedUrlIds: new Set(),\n }));\n }\n } catch (err) {\n console.error(\"Failed to clear URLs:\", err);\n } finally {\n setClearingAll(false);\n }\n }, [clearingAll]);\n\n const toggleUrlSelection = useCallback((urlId: string) => {\n setState((prev) => {\n const newSelectedIds = new Set(prev.selectedUrlIds);\n if (newSelectedIds.has(urlId)) {\n newSelectedIds.delete(urlId);\n } else {\n newSelectedIds.add(urlId);\n }\n return { ...prev, selectedUrlIds: newSelectedIds };\n });\n }, []);\n\n const selectAllUrls = useCallback(() => {\n setState((prev) => ({\n ...prev,\n selectedUrlIds: new Set(prev.savedUrls.map((u) => u.id)),\n }));\n }, []);\n\n const deselectAllUrls = useCallback(() => {\n setState((prev) => ({\n ...prev,\n selectedUrlIds: new Set(),\n }));\n }, []);\n\n const runScrapers = useCallback(async (urlsToScrape: string[]) => {\n if (urlsToScrape.length === 0) return;\n\n setState((prev) => ({ ...prev, loading: true }));\n\n try {\n const response = await fetch(\"/api/scraper-eval\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ urls: urlsToScrape }),\n });\n const data = await response.json();\n\n if (data.success) {\n setState((prev) => {\n // Merge new results with existing results\n const existingResults = prev.results.filter(\n (r) => !urlsToScrape.includes(r.url)\n );\n return {\n ...prev,\n results: [...existingResults, ...data.data],\n loading: false,\n };\n });\n } else {\n console.error(\"Scraper eval failed:\", data.error);\n setState((prev) => ({ ...prev, loading: false }));\n }\n } catch (err) {\n console.error(\"Failed to run scrapers:\", err);\n setState((prev) => ({ ...prev, loading: false }));\n }\n }, []);\n\n const runAllScrapers = useCallback(() => {\n const urls = state.savedUrls.map((u) => u.url);\n runScrapers(urls);\n }, [state.savedUrls, runScrapers]);\n\n const runSelectedScrapers = useCallback(() => {\n const urls = state.savedUrls\n .filter((u) => state.selectedUrlIds.has(u.id))\n .map((u) => u.url);\n runScrapers(urls);\n }, [state.savedUrls, state.selectedUrlIds, runScrapers]);\n\n const toggleExpandCell = useCallback(\n (urlIndex: number, scraperIndex: number, viewMode: ViewMode = \"key-fields\") => {\n setState((prev) => {\n const key = getCellKey(urlIndex, scraperIndex);\n const newExpandedCells = new Map(prev.expandedCells);\n \n if (newExpandedCells.has(key)) {\n newExpandedCells.delete(key);\n } else {\n newExpandedCells.set(key, { viewMode });\n }\n \n return { ...prev, expandedCells: newExpandedCells };\n });\n },\n []\n );\n\n const setExpandedViewMode = useCallback((urlIndex: number, scraperIndex: number, viewMode: ViewMode) => {\n setState((prev) => {\n const key = getCellKey(urlIndex, scraperIndex);\n const newExpandedCells = new Map(prev.expandedCells);\n const existing = newExpandedCells.get(key);\n if (existing) {\n newExpandedCells.set(key, { ...existing, viewMode });\n }\n return { ...prev, expandedCells: newExpandedCells };\n });\n }, []);\n\n const isExpanded = useCallback((urlIndex: number, scraperIndex: number): boolean => {\n return state.expandedCells.has(getCellKey(urlIndex, scraperIndex));\n }, [state.expandedCells]);\n\n const getExpandedViewMode = useCallback((urlIndex: number, scraperIndex: number): ViewMode => {\n return state.expandedCells.get(getCellKey(urlIndex, scraperIndex))?.viewMode || \"key-fields\";\n }, [state.expandedCells]);\n\n // Extract key fields (name, ingredients, instructions) from scraper data\n const extractKeyFields = (data: any) => {\n if (!data) return null;\n \n const name = data.name || data.title || data.headline || null;\n \n // Get ingredients from various possible field names\n let ingredients = data.ingredients || data.recipeIngredient || [];\n if (!Array.isArray(ingredients)) {\n ingredients = ingredients ? [ingredients] : [];\n }\n ingredients = ingredients.map((i: any) => \n typeof i === \"string\" ? i : i.text || i.name || String(i)\n );\n \n // Get instructions from various possible field names\n let instructions = data.instructions || data.recipeInstructions || [];\n if (!Array.isArray(instructions)) {\n instructions = instructions ? [instructions] : [];\n }\n instructions = instructions.map((i: any) => {\n if (typeof i === \"string\") return i;\n if (i.text) return i.text;\n if (i.name) return i.name;\n if (i[\"@type\"] === \"HowToStep\") return i.text || i.name || \"\";\n return String(i);\n });\n \n return { name, ingredients, instructions };\n };\n\n const getResultForUrl = (url: string): UrlResult | undefined => {\n return state.results.find((r) => r.url === url);\n };\n\n const getScraperResultSummary = (result: ScraperResult | undefined) => {\n if (!result) return { status: \"pending\", text: \"—\" };\n if (!result.success) return { status: \"error\", text: result.error || \"Error\" };\n\n const data = result.data;\n const name = data?.name || data?.title || \"Untitled\";\n const ingredientCount =\n data?.ingredients?.length || data?.recipeIngredient?.length || 0;\n const instructionCount =\n data?.instructions?.length || data?.recipeInstructions?.length || 0;\n\n return {\n status: \"success\",\n text: name,\n ingredientCount,\n instructionCount,\n durationMs: result.durationMs,\n };\n };\n\n const allSelected = state.savedUrls.length > 0 && state.selectedUrlIds.size === state.savedUrls.length;\n const someSelected = state.selectedUrlIds.size > 0;\n\n // Show loading while fetching saved URLs\n if (state.loadingUrls) {\n return (\n

\n Loading saved URLs...\n

\n );\n }\n\n return (\n

\n {/* Header */}\n

\n Recipe Scraper Evaluation\n

\n\n {/* URL Input */}\n

\n setUrlInput(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addUrl()}\n placeholder=\"Enter recipe URL...\"\n className=\"flex-1 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)', color: 'var(--text-primary)' }}\n />\n \n {addingUrl ? 'Adding...' : 'Add URL'}\n \n setShowBulkInput(!showBulkInput)}\n className=\"btn-secondary\"\n >\n Bulk Import\n \n

\n\n {/* Bulk Import */}\n {showBulkInput && (\n

\n setBulkInput(e.target.value)}\n placeholder=\"Paste multiple URLs (one per line)...\"\n rows={4}\n className=\"w-full px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none\"\n style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-primary)', color: 'var(--text-primary)' }}\n />\n

\n \n {addingBulkUrls ? 'Adding...' : 'Add All URLs'}\n \n {\n setShowBulkInput(false);\n setBulkInput(\"\");\n }}\n disabled={addingBulkUrls}\n className=\"btn-secondary disabled:opacity-50\"\n >\n Cancel\n \n

\n )}\n\n {/* Actions */}\n {state.savedUrls.length > 0 && (\n

\n \n {state.loading && (\n

\n )}\n Run All\n \n {someSelected && (\n \n {state.loading && (\n

\n )}\n Run Selected ({state.selectedUrlIds.size})\n \n )}\n \n {clearingAll ? 'Clearing...' : 'Clear All'}\n \n \n {state.savedUrls.length} URL{state.savedUrls.length !== 1 ? \"s\" : \"\"} saved\n {someSelected && ` · ${state.selectedUrlIds.size} selected`}\n \n

\n )}\n

\n\n {/* Results Table */}\n {state.savedUrls.length > 0 && (\n

\n \n \n \n \n {SCRAPER_NAMES.map((name) => (\n \n {name}\n {name.split(\"-\")[0]}\n \n ))}\n \n \n \n {state.savedUrls.map((savedUrl, urlIndex) => {\n const urlResult = getResultForUrl(savedUrl.url);\n const isSelected = state.selectedUrlIds.has(savedUrl.id);\n return (\n \n \n {SCRAPER_NAMES.map((scraperName, scraperIndex) => {\n const scraperResult = urlResult?.results.find(\n (r) => r.scraper === scraperName\n );\n const summary = getScraperResultSummary(scraperResult);\n const cellExpanded = isExpanded(urlIndex, scraperIndex);\n const cellViewMode = getExpandedViewMode(urlIndex, scraperIndex);\n\n return (\n \n {state.loading && !urlResult ? (\n

\n Loading...\n

\n ) : summary.status === \"pending\" ? (\n —\n ) : summary.status === \"error\" ? (\n

\n ❌\n Error\n

\n toggleExpandCell(urlIndex, scraperIndex)}\n className=\"text-xs text-red-500 hover:underline mt-1\"\n >\n {cellExpanded ? \"Hide details\" : \"Show details\"}\n \n {cellExpanded && (\n

\n                                  {summary.text}\n

\n )}\n

\n ) : (\n

\n ✅\n \n {summary.text}\n \n

\n {summary.ingredientCount} ingredients ·{\" \"}\n {summary.instructionCount} steps ·{\" \"}\n {summary.durationMs}ms\n

\n toggleExpandCell(urlIndex, scraperIndex, \"key-fields\")}\n className=\"text-xs hover:underline\"\n style={{ color: 'var(--accent)' }}\n >\n {cellExpanded ? \"Hide\" : \"View Details\"}\n \n

\n {cellExpanded && (\n

\n {/* View Mode Toggle */}\n

\n setExpandedViewMode(urlIndex, scraperIndex, \"key-fields\")}\n className=\"px-2 py-1 text-xs rounded\"\n style={cellViewMode === \"key-fields\"\n ? { background: 'var(--accent)', color: 'white' }\n : { background: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}\n >\n Key Fields\n \n setExpandedViewMode(urlIndex, scraperIndex, \"full-json\")}\n className=\"px-2 py-1 text-xs rounded\"\n style={cellViewMode === \"full-json\"\n ? { background: 'var(--accent)', color: 'white' }\n : { background: 'var(--bg-tertiary)', color: 'var(--text-secondary)' }}\n >\n Full JSON\n \n

\n \n {cellViewMode === \"key-fields\" ? (\n

\n {(() => {\n const keyFields = extractKeyFields(scraperResult?.data);\n if (!keyFields) return No data;\n return (\n <>\n

Name:

{keyFields.name || \"—\"}

\n Ingredients ({keyFields.ingredients.length}):\n

\n {keyFields.ingredients.length > 0 ? (\n

\n •{ing}\n

\n ) : (\n None found\n )}\n

\n Instructions ({keyFields.instructions.length}):\n

\n {keyFields.instructions.length > 0 ? (\n

\n {i + 1}.{inst}\n

\n ) : (\n None found\n )}\n

\n \n );\n })()}\n

\n ) : (\n

\n                                      {JSON.stringify(scraperResult?.data, null, 2)}\n

\n )}\n

\n )}\n \n );\n })}\n \n );\n })}\n \n

\n \n allSelected ? deselectAllUrls() : selectAllUrls()}\n className=\"w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer\"\n title={allSelected ? \"Deselect all\" : \"Select all\"}\n />\n Recipe URL\n \n
\n \n toggleUrlSelection(savedUrl.id)}\n className=\"w-4 h-4 mt-0.5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer flex-shrink-0\"\n />\n removeUrl(savedUrl)}\n disabled={removingUrlId !== null}\n className=\"text-red-500 hover:text-red-700 text-sm flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed\"\n title=\"Remove URL\"\n >\n {removingUrlId === savedUrl.id ? '...' : '✕'}\n \n \n {new URL(savedUrl.url).hostname}\n {new URL(savedUrl.url).pathname.slice(0, 20)}\n {new URL(savedUrl.url).pathname.length > 20 ? \"...\" : \"\"}\n \n \n

\n allSelected ? deselectAllUrls() : selectAllUrls()}\n className=\"w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer\"\n title={allSelected ? \"Deselect all\" : \"Select all\"}\n />\n Recipe URL\n

\n toggleUrlSelection(savedUrl.id)}\n className=\"w-4 h-4 mt-0.5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer flex-shrink-0\"\n />\n removeUrl(savedUrl)}\n disabled={removingUrlId !== null}\n className=\"text-red-500 hover:text-red-700 text-sm flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed\"\n title=\"Remove URL\"\n >\n {removingUrlId === savedUrl.id ? '...' : '✕'}\n \n \n {new URL(savedUrl.url).hostname}\n {new URL(savedUrl.url).pathname.slice(0, 20)}\n {new URL(savedUrl.url).pathname.length > 20 ? \"...\" : \"\"}\n \n

\n )}\n\n {/* Empty State */}\n {state.savedUrls.length === 0 && (\n

🔍

No recipe URLs saved yet

\n Add recipe URLs above to compare scraper performance\n

\n )}\n

\n );\n}\n",[],[166,288,306],"228ec108-e797-11f0-8dec-42dde27851f2","RecipesView.tsx","b8e58968-d3a9-11f0-a23f-42dde27851f2",204,["D",1767329675425],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Recipe, CreateRecipeRequest, ParsedRecipeFromUrl, RecipeNutrition, CustomFood, CreateCustomFoodRequest } from \"../../shared/types.ts\";\nimport { NUTRIENT_INFO } from \"../../shared/types.ts\";\nimport { RecipeForm } from \"./RecipeForm.tsx\";\nimport { CustomFoodForm } from \"./CustomFoodForm.tsx\";\n\ntype ViewTab = 'recipes' | 'custom-foods';\n\ninterface RecipesViewProps {\n recipes: Recipe[];\n customFoods: CustomFood[];\n onRecipesChange: () => Promise;\n onCustomFoodsChange: () => Promise;\n}\n\n// Helper to get linked/total ingredients count\nfunction getIngredientLinkStatus(recipe: Recipe): { linked: number; total: number } {\n const total = recipe.ingredients.length;\n const linked = recipe.ingredients.filter(i => i.fdcId !== null).length;\n return { linked, total };\n}\n\n// Format nutrient value with appropriate precision\nfunction formatNutrient(value: number | null, unit: string): string {\n if (value === null) return '-';\n if (unit === 'mcg') return value.toFixed(1);\n if (unit === 'mg' && value < 1) return value.toFixed(2);\n return Math.round(value).toString();\n}\n\nexport function RecipesView({ recipes, customFoods, onRecipesChange, onCustomFoodsChange }: RecipesViewProps) {\n const [activeTab, setActiveTab] = useState('recipes');\n const [showForm, setShowForm] = useState(false);\n const [editingRecipe, setEditingRecipe] = useState(null);\n const [searchQuery, setSearchQuery] = useState('');\n const [expandedRecipe, setExpandedRecipe] = useState(null);\n const [showImportModal, setShowImportModal] = useState(false);\n const [importUrl, setImportUrl] = useState('');\n const [importLoading, setImportLoading] = useState(false);\n const [importError, setImportError] = useState(null);\n const [importedRecipe, setImportedRecipe] = useState(null);\n const [showMicronutrients, setShowMicronutrients] = useState(false);\n \n // Custom food state\n const [showCustomFoodForm, setShowCustomFoodForm] = useState(false);\n const [editingCustomFood, setEditingCustomFood] = useState(null);\n\n // Loading states to prevent double-clicks\n const [duplicatingRecipeId, setDuplicatingRecipeId] = useState(null);\n const [deletingRecipeId, setDeletingRecipeId] = useState(null);\n const [deletingCustomFoodId, setDeletingCustomFoodId] = useState(null);\n\n const filteredRecipes = recipes.filter(recipe =>\n recipe.title.toLowerCase().includes(searchQuery.toLowerCase()) ||\n recipe.ingredients.some(i => i.name.toLowerCase().includes(searchQuery.toLowerCase()))\n );\n\n const filteredCustomFoods = customFoods.filter(food =>\n food.name.toLowerCase().includes(searchQuery.toLowerCase())\n );\n\n const handleCreateRecipe = async (data: CreateRecipeRequest) => {\n const response = await fetch('/api/recipes', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data),\n });\n \n if (response.ok) {\n await onRecipesChange();\n setShowForm(false);\n }\n };\n\n const handleUpdateRecipe = async (data: CreateRecipeRequest) => {\n if (!editingRecipe) return;\n \n const response = await fetch(`/api/recipes/${editingRecipe.id}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data),\n });\n \n if (response.ok) {\n await onRecipesChange();\n setEditingRecipe(null);\n }\n };\n\n const handleDuplicate = async (recipeId: string) => {\n if (duplicatingRecipeId) return;\n \n setDuplicatingRecipeId(recipeId);\n try {\n const response = await fetch(`/api/recipes/${recipeId}/duplicate`, {\n method: 'POST',\n });\n \n if (response.ok) {\n await onRecipesChange();\n }\n } finally {\n setDuplicatingRecipeId(null);\n }\n };\n\n const handleDelete = async (recipeId: string) => {\n if (deletingRecipeId) return;\n \n setDeletingRecipeId(recipeId);\n try {\n const response = await fetch(`/api/recipes/${recipeId}`, {\n method: 'DELETE',\n });\n \n if (response.ok) {\n await onRecipesChange();\n if (expandedRecipe === recipeId) {\n setExpandedRecipe(null);\n }\n }\n } finally {\n setDeletingRecipeId(null);\n }\n };\n\n const handleImportFromUrl = async () => {\n if (!importUrl.trim()) return;\n \n setImportLoading(true);\n setImportError(null);\n \n try {\n const response = await fetch('/api/recipes/parse-url', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ url: importUrl.trim() }),\n });\n \n const result = await response.json();\n \n if (!result.success) {\n setImportError(result.error || 'Failed to import recipe');\n return;\n }\n \n // Close import modal and open recipe form with imported data\n setImportedRecipe(result.data);\n setShowImportModal(false);\n setImportUrl('');\n setShowForm(true);\n } catch (error) {\n setImportError('Failed to import recipe. Please check the URL and try again.');\n } finally {\n setImportLoading(false);\n }\n };\n\n const handleCloseForm = () => {\n setShowForm(false);\n setImportedRecipe(null);\n };\n\n // Custom food handlers\n const handleCreateCustomFood = async (data: CreateCustomFoodRequest) => {\n const response = await fetch('/api/custom-foods', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data),\n });\n \n if (response.ok) {\n await onCustomFoodsChange();\n setShowCustomFoodForm(false);\n }\n };\n\n const handleUpdateCustomFood = async (data: CreateCustomFoodRequest) => {\n if (!editingCustomFood) return;\n \n const response = await fetch(`/api/custom-foods/${editingCustomFood.id}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data),\n });\n \n if (response.ok) {\n await onCustomFoodsChange();\n setEditingCustomFood(null);\n }\n };\n\n const handleDeleteCustomFood = async (customFoodId: string) => {\n if (deletingCustomFoodId) return;\n \n setDeletingCustomFoodId(customFoodId);\n try {\n const response = await fetch(`/api/custom-foods/${customFoodId}`, {\n method: 'DELETE',\n });\n \n if (response.ok) {\n await onCustomFoodsChange();\n }\n } finally {\n setDeletingCustomFoodId(null);\n }\n };\n\n return (\n

\n {/* Header */}\n

Recipes & Foods

\n {recipes.length} recipes · {customFoods.length} custom foods\n

\n {activeTab === 'recipes' ? (\n <>\n setShowImportModal(true)}\n className=\"btn-secondary flex items-center gap-2\"\n >\n \n Import from URL\n \n setShowForm(true)}\n className=\"btn-primary flex items-center gap-2\"\n >\n \n Add Recipe\n \n \n ) : (\n setShowCustomFoodForm(true)}\n className=\"btn-primary flex items-center gap-2\"\n >\n \n Add Custom Food\n \n )}\n

\n \n {/* Tabs */}\n

\n setActiveTab('recipes')}\n className=\"pb-3 px-1 text-sm font-medium border-b-2 transition-colors\"\n style={activeTab === 'recipes' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n Recipes ({recipes.length})\n \n setActiveTab('custom-foods')}\n className=\"pb-3 px-1 text-sm font-medium border-b-2 transition-colors\"\n style={activeTab === 'custom-foods' \n ? { borderColor: 'var(--accent)', color: 'var(--accent)' } \n : { borderColor: 'transparent', color: 'var(--text-secondary)' }}\n >\n Custom Foods ({customFoods.length})\n \n

\n \n {/* Search */}\n

\n setSearchQuery(e.target.value)}\n className=\"input max-w-md\"\n />\n

\n \n {/* Content */}\n

\n {/* Recipes Tab */}\n {activeTab === 'recipes' && (\n <>\n {filteredRecipes.length === 0 ? (\n

\n 📖\n

\n {searchQuery ? 'No recipes found' : 'No recipes yet'}\n

\n {searchQuery ? 'Try a different search term' : 'Add your first recipe to get started'}\n

\n ) : (\n

\n {filteredRecipes.map((recipe) => {\n const linkStatus = getIngredientLinkStatus(recipe);\n const hasNutrition = recipe.nutrition && recipe.nutrition.calories !== null;\n const isComplete = recipe.nutrition?.isComplete ?? false;\n \n return (\n \n {/* Recipe header */}\n setExpandedRecipe(expandedRecipe === recipe.id ? null : recipe.id)}\n >\n

{recipe.title}

\n {recipe.ingredients.length} ingredients · {recipe.servingSize} serving{recipe.servingSize !== 1 ? 's' : ''}\n

\n \n \n \n

\n \n {/* Nutrition preview */}\n {hasNutrition ? (\n

\n {recipe.nutrition!.calories && (\n \n {Math.round(recipe.nutrition!.calories)} kcal\n \n )}\n {recipe.nutrition!.protein && (\n \n {Math.round(recipe.nutrition!.protein)}g protein\n \n )}\n {!isComplete && (\n \n \n Partial\n \n )}\n

\n ) : (\n

\n \n No nutrition data - link ingredients\n \n

\n )}\n

\n \n {/* Expanded content */}\n {expandedRecipe === recipe.id && (\n

\n {/* URL */}\n {recipe.url && (\n

\n \n \n View original recipe\n \n

\n )}\n \n {/* Ingredient link status */}\n

\n \n Ingredients linked to USDA\n \n \n {linkStatus.linked}/{linkStatus.total}\n \n

0 ? (linkStatus.linked / linkStatus.total) * 100 : 0}%` }}\n />\n

\n \n {/* Ingredients */}\n

Ingredients

\n \n
\n \n {ing.amount && {ing.amount} }\n {ing.unit && {ing.unit} }\n {ing.name}\n \n {ing.notes && (\n ({ing.notes})\n )}\n {ing.fdcId && (\n \n [{ing.fdcDataType === 'Branded' ? 'B' : 'USDA'}]\n \n )}\n
\n

\n \n {/* Instructions */}\n {recipe.instructions && (\n

Instructions

{recipe.instructions}

\n )}\n \n {/* Nutrition details */}\n {recipe.nutrition && (\n

Nutrition (per serving)

\n setShowMicronutrients(!showMicronutrients)}\n className=\"text-xs hover:underline\"\n style={{ color: 'var(--accent)' }}\n >\n {showMicronutrients ? 'Hide details' : 'Show vitamins & minerals'}\n \n

\n \n {/* Macros */}\n

\n {formatNutrient(recipe.nutrition.calories, 'kcal')}\n

kcal

\n {formatNutrient(recipe.nutrition.protein, 'g')}g\n

protein

\n {formatNutrient(recipe.nutrition.carbs, 'g')}g\n

carbs

\n {formatNutrient(recipe.nutrition.fat, 'g')}g\n

fat

\n {formatNutrient(recipe.nutrition.fiber, 'g')}g\n

fiber

\n \n {/* Micronutrients */}\n {showMicronutrients && (\n

\n {/* Fats Breakdown */}\n {(['saturatedFat', 'transFat', 'monounsaturatedFat', 'polyunsaturatedFat', 'cholesterol'] as const).some(key => recipe.nutrition![key] !== null) && (\n

\n Fats Breakdown\n

\n {(['saturatedFat', 'transFat', 'monounsaturatedFat', 'polyunsaturatedFat', 'cholesterol'] as const).map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n return (\n

Diff · v207