e.stopPropagation()}>\n {/* Header */}\n

\n Add to Grocery List\n

\n {recipe.title}\n

\n \n \n \n

\n\n {/* Serving Size Selector */}\n

\n Servings\n

\n Recipe makes {recipe.servingSize} serving{recipe.servingSize !== 1 ? 's' : ''}\n

\n \n \n \n \n {servings}\n \n \n \n \n

\n {multiplier !== 1 && (\n

\n Ingredient amounts scaled {multiplier > 1 ? 'up' : 'down'} ({multiplier.toFixed(2)}x)\n

\n )}\n

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

\n Ingredients to Add ({recipe.ingredients.length})\n

\n \n
\n \n {ing.amount !== null && (\n \n {formatAmount(ing.amount, multiplier)}{' '}\n \n )}\n {ing.unit && (\n \n {ing.unit}{' '}\n \n )}\n {ing.name}\n \n {ing.notes && (\n ({ing.notes})\n )}\n
\n

\n\n {/* Footer */}\n

\n \n Cancel\n \n \n {isAdding ? (\n <>\n \n Adding...\n \n ) : (\n <>\n \n Add {servings} Serving{servings !== 1 ? 's' : ''}\n \n )}\n \n

\n );\n}\n\n",[],[341,347,353],{"_103":361,"_96":362,"_159":363,"_161":348,"_162":144,"_163":364,"_165":117,"_105":365,"_100":178,"_167":188,"_169":366,"_170":22,"_171":-5,"_172":367,"_99":368},"44645e9e-e9ce-11f0-92d2-42dde27851f2","App.tsx","b8d991d0-d3a9-11f0-8d63-42dde27851f2",222,["D",1767573256834],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport type { User, Recipe, GroceryList, NutritionGoals, CustomFood } from \"../../shared/types.ts\";\nimport { Login } from \"./Login.tsx\";\nimport { RecipesView } from \"./RecipesView.tsx\";\nimport { GroceryListsView } from \"./GroceryListsView.tsx\";\nimport { MealPlanView } from \"./MealPlanView.tsx\";\nimport { NutritionView } from \"./NutritionView.tsx\";\nimport { ScraperEvalView } from \"./ScraperEvalView.tsx\";\nimport { ThemeProvider } from \"./ThemeContext.tsx\";\nimport { UserDropdown } from \"./UserDropdown.tsx\";\n\ntype Tab = 'recipes' | 'grocery' | 'mealplan' | 'nutrition' | 'scraper-eval';\n\nexport function App() {\n const [user, setUser] = useState(undefined);\n const [activeTab, setActiveTab] = useState('recipes');\n const [recipes, setRecipes] = useState([]);\n const [customFoods, setCustomFoods] = useState([]);\n const [groceryLists, setGroceryLists] = useState([]);\n const [nutritionGoals, setNutritionGoals] = useState(null);\n const [loading, setLoading] = useState(true);\n\n // Fetch current user\n const fetchUser = useCallback(async () => {\n try {\n const response = await fetch('/api/auth/me');\n const data = await response.json();\n if (data.success) {\n setUser(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch user:', err);\n setUser(null);\n }\n }, []);\n\n // Fetch recipes\n const fetchRecipes = useCallback(async () => {\n try {\n const response = await fetch('/api/recipes');\n const data = await response.json();\n if (data.success) {\n setRecipes(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch recipes:', err);\n }\n }, []);\n\n // Fetch custom foods\n const fetchCustomFoods = useCallback(async () => {\n try {\n const response = await fetch('/api/custom-foods');\n const data = await response.json();\n if (data.success) {\n setCustomFoods(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch custom foods:', err);\n }\n }, []);\n\n // Fetch grocery lists\n const fetchGroceryLists = useCallback(async () => {\n try {\n const response = await fetch('/api/grocery-lists');\n const data = await response.json();\n if (data.success) {\n setGroceryLists(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch grocery lists:', err);\n }\n }, []);\n\n // Fetch nutrition goals\n const fetchNutritionGoals = useCallback(async () => {\n try {\n const response = await fetch('/api/nutrition/goals');\n const data = await response.json();\n if (data.success) {\n setNutritionGoals(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch nutrition goals:', err);\n }\n }, []);\n\n // Initial load\n useEffect(() => {\n fetchUser();\n }, [fetchUser]);\n\n // Fetch data when user is authenticated\n useEffect(() => {\n if (user) {\n setLoading(true);\n Promise.all([\n fetchRecipes(),\n fetchCustomFoods(),\n fetchGroceryLists(),\n fetchNutritionGoals(),\n ]).finally(() => {\n setLoading(false);\n });\n } else if (user === null) {\n setLoading(false);\n }\n }, [user, fetchRecipes, fetchCustomFoods, fetchGroceryLists, fetchNutritionGoals]);\n\n const handleLogout = async () => {\n try {\n await fetch('/api/auth/logout', { method: 'POST' });\n setUser(null);\n setRecipes([]);\n setCustomFoods([]);\n setGroceryLists([]);\n setNutritionGoals(null);\n } catch (err) {\n console.error('Failed to logout:', err);\n }\n };\n\n // Show loading while checking auth\n if (user === undefined) {\n return (\n \n

\n \n );\n }\n\n // Show login if not authenticated\n if (user === null) {\n return (\n \n \n \n );\n }\n\n // Loading data\n if (loading) {\n return (\n \n

\n Loading your data...\n

\n \n );\n }\n\n const tabs: { id: Tab; label: string; icon: string }[] = [\n { id: 'recipes', label: 'Recipes', icon: '📖' },\n { id: 'grocery', label: 'Grocery Lists', icon: '🛒' },\n { id: 'mealplan', label: 'Meal Plan', icon: '📅' },\n { id: 'nutrition', label: 'Nutrition', icon: '💪' },\n { id: 'scraper-eval', label: 'Scraper Eval', icon: '🔬' },\n ];\n\n return (\n \n

\n {/* Header */}\n

\n {/* Logo */}\n

\n \n

\n Carmy\n

\n \n {/* User menu with theme toggle */}\n \n

\n \n {/* Tab navigation */}\n

\n \n

\n \n {/* Main content */}\n

\n {activeTab === 'recipes' && (\n \n )}\n {activeTab === 'grocery' && (\n \n )}\n {activeTab === 'mealplan' && (\n \n )}\n {activeTab === 'nutrition' && (\n \n )}\n {activeTab === 'scraper-eval' && (\n \n )}\n

\n \n );\n}\n\n\n",[],[341,347,362],{"_103":370,"_96":371,"_159":372,"_161":348,"_162":144,"_163":143,"_165":117,"_105":373,"_100":32,"_167":188,"_169":374,"_170":22,"_171":-5,"_172":375,"_99":376},"e156fe54-eeb6-11f0-908a-42dde27851f2","CombinedGroceryItemRow.tsx","e156fef4-eeb6-11f0-908a-42dde27851f2",["D",1768112968007],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { GroceryListItem } from \"../../shared/types.ts\";\n\ninterface CombinedGroceryItem {\n key: string;\n name: string;\n notes: string | null;\n sourceItems: GroceryListItem[];\n allChecked: boolean;\n quantityDisplay: string;\n}\n\ninterface CombinedGroceryItemRowProps {\n combinedItem: CombinedGroceryItem;\n onToggleAll: (checked: boolean) => void;\n onDeleteAll: () => void;\n disabled?: boolean;\n}\n\nexport function CombinedGroceryItemRow({\n combinedItem,\n onToggleAll,\n onDeleteAll,\n disabled = false,\n}: CombinedGroceryItemRowProps) {\n const [isExpanded, setIsExpanded] = useState(false);\n \n const { name, notes, sourceItems, allChecked, quantityDisplay } = combinedItem;\n const hasMultipleSources = sourceItems.length > 1;\n\n const handleToggle = (e: React.MouseEvent) => {\n e.stopPropagation();\n onToggleAll(!allChecked);\n };\n\n const handleRowClick = () => {\n if (hasMultipleSources) {\n setIsExpanded(!isExpanded);\n }\n };\n\n return (\n

\n {/* Main row */}\n \n {/* Checkbox */}\n \n {allChecked && (\n \n )}\n \n\n {/* Content */}\n

\n {/* Quantity display */}\n {quantityDisplay && (\n \n {quantityDisplay}\n \n )}\n {/* Item name */}\n {name}\n {/* Source count badge */}\n {hasMultipleSources && (\n \n {sourceItems.length}\n \n )}\n

\n \n {/* Notes */}\n {notes && (\n

\n {notes}\n

\n )}\n

\n\n {/* Expand/collapse arrow for combined items */}\n {hasMultipleSources && (\n \n )}\n\n {/* Delete button */}\n {\n e.stopPropagation();\n onDeleteAll();\n }}\n disabled={disabled}\n className=\"text-gray-400 hover:text-red-500 transition-colors p-1 flex-shrink-0\"\n >\n \n \n

\n\n {/* Expanded dropdown showing source items */}\n {isExpanded && hasMultipleSources && (\n

\n Sources:\n

\n {sourceItems.map((item) => (\n

\n {/* Small indicator dot */}\n \n \n {/* Quantity + unit */}\n \n {item.quantity !== null && item.quantity}\n {item.unit && ` ${item.unit}`}\n \n \n {/* Source label */}\n \n {item.recipeName || 'Manual'}\n \n

\n ))}\n

\n )}\n \n );\n}\n\n",[],[341,347,371],{"_103":378,"_96":379,"_159":380,"_161":348,"_162":144,"_163":381,"_165":117,"_105":382,"_100":164,"_167":188,"_169":383,"_170":22,"_171":-5,"_172":384,"_99":385},"227cc55c-e797-11f0-bbcf-42dde27851f2","CustomFoodForm.tsx","92a694ec-db09-11f0-a68d-42dde27851f2",202,["D",1767329675294],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { CustomFood, CreateCustomFoodRequest } from \"../../shared/types.ts\";\nimport { NUTRIENT_INFO, NutrientKey } from \"../../shared/types.ts\";\n\ninterface CustomFoodFormProps {\n customFood?: CustomFood;\n onSubmit: (data: CreateCustomFoodRequest) => Promise;\n onClose: () => void;\n}\n\n// Nutrient keys grouped by category\nconst MACRO_KEYS: NutrientKey[] = ['calories', 'protein', 'fat', 'carbs', 'fiber'];\nconst MINERAL_KEYS: NutrientKey[] = ['sodium', 'potassium', 'calcium', 'iron', 'magnesium', 'zinc'];\nconst VITAMIN_KEYS: NutrientKey[] = ['vitaminA', 'vitaminC', 'vitaminD', 'vitaminE', 'vitaminK', 'vitaminB6', 'vitaminB12', 'thiamin', 'riboflavin', 'niacin', 'folate'];\n\nexport function CustomFoodForm({ customFood, onSubmit, onClose }: CustomFoodFormProps) {\n const [name, setName] = useState(customFood?.name || '');\n const [servingSizeGrams, setServingSizeGrams] = useState(customFood?.servingSizeGrams?.toString() || '100');\n const [nutrients, setNutrients] = useState>(() => {\n const initial: Record = {};\n const allKeys = [...MACRO_KEYS, ...MINERAL_KEYS, ...VITAMIN_KEYS];\n for (const key of allKeys) {\n const value = customFood?.[key as keyof CustomFood];\n initial[key] = value !== null && value !== undefined ? value.toString() : '';\n }\n return initial as Record;\n });\n const [submitting, setSubmitting] = useState(false);\n const [showMicronutrients, setShowMicronutrients] = useState(false);\n\n const handleNutrientChange = (key: NutrientKey, value: string) => {\n setNutrients(prev => ({ ...prev, [key]: value }));\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!name.trim()) return;\n\n setSubmitting(true);\n try {\n const data: CreateCustomFoodRequest = {\n name: name.trim(),\n servingSizeGrams: parseFloat(servingSizeGrams) || 100,\n };\n\n // Add all nutrient values\n const allKeys = [...MACRO_KEYS, ...MINERAL_KEYS, ...VITAMIN_KEYS];\n for (const key of allKeys) {\n const value = nutrients[key];\n if (value !== '') {\n (data as any)[key] = parseFloat(value) || null;\n } else {\n (data as any)[key] = null;\n }\n }\n\n await onSubmit(data);\n } finally {\n setSubmitting(false);\n }\n };\n\n const renderNutrientInput = (key: NutrientKey) => {\n const info = NUTRIENT_INFO[key];\n return (\n

\n \n {info.label} ({info.unit})\n \n handleNutrientChange(key, e.target.value)}\n className=\"input text-sm py-1.5\"\n placeholder=\"0\"\n />\n

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

\n e.stopPropagation()}\n >\n

\n {/* Header */}\n

\n {customFood ? 'Edit Custom Food' : 'Add Custom Food'}\n

\n \n \n \n

\n Create a food with custom nutrition values\n

\n\n {/* Scrollable content */}\n

\n {/* Name */}\n

\n \n Name *\n \n setName(e.target.value)}\n className=\"input\"\n placeholder=\"e.g., Homemade Protein Shake\"\n required\n />\n

\n\n {/* Serving Size */}\n

\n \n Serving Size (grams)\n \n setServingSizeGrams(e.target.value)}\n className=\"input w-32\"\n placeholder=\"100\"\n />\n

\n Nutrition values are per this serving size\n

\n\n {/* Macronutrients */}\n

Macronutrients

\n {MACRO_KEYS.map(key => renderNutrientInput(key))}\n

\n\n {/* Toggle for micronutrients */}\n

\n setShowMicronutrients(!showMicronutrients)}\n className=\"text-sm font-medium flex items-center gap-2\"\n style={{ color: 'var(--accent)' }}\n >\n \n \n \n {showMicronutrients ? 'Hide' : 'Show'} Vitamins & Minerals (optional)\n \n

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

\n {/* Minerals */}\n

Minerals

\n {MINERAL_KEYS.map(key => renderNutrientInput(key))}\n

\n\n {/* Vitamins */}\n

Vitamins

\n {VITAMIN_KEYS.map(key => renderNutrientInput(key))}\n

\n )}\n

\n\n {/* Footer */}\n

\n \n Cancel\n \n \n {submitting ? 'Saving...' : customFood ? 'Save Changes' : 'Create Food'}\n \n

\n \n );\n}\n\n\n",[],[341,347,379],{"_103":387,"_96":388,"_159":389,"_161":348,"_162":144,"_163":390,"_165":117,"_105":391,"_100":243,"_167":188,"_169":392,"_170":22,"_171":-5,"_172":393,"_99":394},"22932680-e797-11f0-b548-42dde27851f2","GroceryItemRow.tsx","7d3f05a2-e78f-11f0-a395-42dde27851f2",205,["D",1767329675442],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { GroceryListItem } from \"../../shared/types.ts\";\nimport { QuantityUnitInput } from \"./QuantityUnitInput.tsx\";\nimport { ItemNameInput } from \"./ItemNameInput.tsx\";\nimport { NotesInput } from \"./NotesInput.tsx\";\n\ninterface GroceryItemRowProps {\n item: GroceryListItem;\n isEditing: boolean;\n onStartEdit: () => void;\n onSave: (updates: {\n name?: string;\n quantity?: number | null;\n unit?: string | null;\n notes?: string | null;\n }) => Promise;\n onToggleChecked: () => void;\n onDelete: () => void;\n disabled?: boolean;\n}\n\nexport function GroceryItemRow({\n item,\n isEditing,\n onStartEdit,\n onSave,\n onToggleChecked,\n onDelete,\n disabled = false,\n}: GroceryItemRowProps) {\n // Edit state\n const [editQuantity, setEditQuantity] = useState(item.quantity);\n const [editUnit, setEditUnit] = useState(item.unit);\n const [editName, setEditName] = useState(item.name);\n const [editNotes, setEditNotes] = useState(item.notes);\n const [saving, setSaving] = useState(false);\n\n // Reset edit state when item changes or editing starts\n useEffect(() => {\n if (isEditing) {\n setEditQuantity(item.quantity);\n setEditUnit(item.unit);\n setEditName(item.name);\n setEditNotes(item.notes);\n }\n }, [isEditing, item]);\n\n const hasChanges = \n editQuantity !== item.quantity ||\n editUnit !== item.unit ||\n editName !== item.name ||\n editNotes !== item.notes;\n\n const handleSave = async () => {\n if (!editName.trim()) return;\n \n setSaving(true);\n try {\n const updates: {\n name?: string;\n quantity?: number | null;\n unit?: string | null;\n notes?: string | null;\n } = {};\n\n if (editName !== item.name) updates.name = editName.trim();\n if (editQuantity !== item.quantity) updates.quantity = editQuantity;\n if (editUnit !== item.unit) updates.unit = editUnit;\n if (editNotes !== item.notes) updates.notes = editNotes;\n\n if (Object.keys(updates).length > 0) {\n await onSave(updates);\n }\n } finally {\n setSaving(false);\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n handleSave();\n } else if (e.key === 'Escape') {\n // Reset to original values\n setEditQuantity(item.quantity);\n setEditUnit(item.unit);\n setEditName(item.name);\n setEditNotes(item.notes);\n }\n };\n\n // Format quantity and unit for display\n const formatQuantityUnit = () => {\n const parts: string[] = [];\n if (item.quantity !== null) {\n parts.push(String(item.quantity));\n }\n if (item.unit) {\n parts.push(item.unit);\n }\n return parts.join(' ');\n };\n\n if (isEditing) {\n return (\n

\n {/* Checkbox */}\n \n {item.checked && (\n \n )}\n \n\n {/* Quantity + Unit */}\n \n\n {/* Item Name */}\n \n\n {/* Delete button */}\n \n \n \n

\n\n {/* Notes row */}\n

\n \n\n {/* Save/Cancel buttons */}\n \n {saving ? 'Saving...' : 'Save'}\n \n

\n );\n }\n\n // Display mode\n return (\n \n {/* Checkbox */}\n {\n e.stopPropagation();\n onToggleChecked();\n }}\n disabled={disabled}\n className={`checkbox flex-shrink-0 ${item.checked ? 'checked' : ''}`}\n >\n {item.checked && (\n \n )}\n \n\n {/* Content */}\n

\n {/* Quantity and Unit */}\n {(item.quantity !== null || item.unit) && (\n \n {formatQuantityUnit()}\n \n )}\n {/* Item name */}\n {item.name}\n

\n \n {/* Notes */}\n {item.notes && (\n

\n {item.notes}\n

\n )}\n

\n\n {/* Delete button */}\n {\n e.stopPropagation();\n onDelete();\n }}\n disabled={disabled}\n className=\"text-gray-400 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100 p-1 flex-shrink-0\"\n style={{ opacity: 1 }} // Always visible for now since group-hover needs parent styling\n >\n \n \n \n );\n}\n\n",[],[341,347,388],{"_103":396,"_96":397,"_159":398,"_161":348,"_162":144,"_163":399,"_165":117,"_105":400,"_100":401,"_167":188,"_169":402,"_170":22,"_171":-5,"_172":403,"_99":404},"e151e1b2-eeb6-11f0-ba13-42dde27851f2","GroceryListsView.tsx","b8d2d002-d3a9-11f0-8e4b-42dde27851f2",240,["D",1768112968005],9,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { GroceryList, GroceryListItem, Recipe } from \"../../shared/types.ts\";\nimport { DEFAULT_GROCERY_LIST_NAME } from \"../../shared/types.ts\";\nimport { GroceryItemRow } from \"./GroceryItemRow.tsx\";\nimport { CombinedGroceryItemRow } from \"./CombinedGroceryItemRow.tsx\";\nimport { QuantityUnitInput } from \"./QuantityUnitInput.tsx\";\nimport { NotesInput } from \"./NotesInput.tsx\";\nimport { AddRecipeToListModal } from \"./AddRecipeToListModal.tsx\";\n\ninterface GroceryListsViewProps {\n lists: GroceryList[];\n recipes: Recipe[];\n onListsChange: () => Promise;\n}\n\n// Represents a combined grocery item (multiple items with same name + notes)\ninterface CombinedGroceryItem {\n // Unique key for the combined item (lowercase name + notes)\n key: string;\n name: string;\n notes: string | null;\n // All source items that were combined\n sourceItems: GroceryListItem[];\n // Whether all source items are checked\n allChecked: boolean;\n // Formatted quantity display (e.g., \"3 cups\" or \"2 cups + 150g\")\n quantityDisplay: string;\n}\n\n// Combine items by name + notes (case-insensitive)\nfunction combineItems(items: GroceryListItem[]): CombinedGroceryItem[] {\n const groups = new Map();\n \n for (const item of items) {\n // Create key from lowercase name + notes\n const key = `${item.name.toLowerCase().trim()}|${(item.notes || '').toLowerCase().trim()}`;\n if (!groups.has(key)) {\n groups.set(key, []);\n }\n groups.get(key)!.push(item);\n }\n \n const combined: CombinedGroceryItem[] = [];\n \n groups.forEach((sourceItems, key) => {\n // Use the first item's name (preserving original case)\n const name = sourceItems[0].name;\n const notes = sourceItems[0].notes;\n \n // Check if all items are checked\n const allChecked = sourceItems.every(item => item.checked);\n \n // Build quantity display\n const quantityDisplay = buildQuantityDisplay(sourceItems);\n \n combined.push({\n key,\n name,\n notes,\n sourceItems,\n allChecked,\n quantityDisplay,\n });\n });\n \n return combined;\n}\n\n// Build a display string for combined quantities\nfunction buildQuantityDisplay(items: GroceryListItem[]): string {\n // Group by unit\n const byUnit = new Map();\n const noUnit: number[] = [];\n \n for (const item of items) {\n if (item.quantity === null) continue;\n \n const unit = (item.unit || '').trim().toLowerCase();\n if (!unit) {\n noUnit.push(item.quantity);\n } else {\n byUnit.set(unit, (byUnit.get(unit) || 0) + item.quantity);\n }\n }\n \n const parts: string[] = [];\n \n // Add summed quantities by unit\n byUnit.forEach((total, unit) => {\n // Round to 2 decimal places\n const rounded = Math.round(total * 100) / 100;\n // Use the original case from first matching item\n const originalUnit = items.find(i => (i.unit || '').toLowerCase() === unit)?.unit || unit;\n parts.push(`${rounded} ${originalUnit}`);\n });\n \n // Add quantities without units\n if (noUnit.length > 0) {\n const total = noUnit.reduce((sum, q) => sum + q, 0);\n const rounded = Math.round(total * 100) / 100;\n parts.push(String(rounded));\n }\n \n return parts.join(' + ');\n}\n\nexport function GroceryListsView({ lists, recipes, onListsChange }: GroceryListsViewProps) {\n const [selectedList, setSelectedList] = useState(null);\n const [showNewListForm, setShowNewListForm] = useState(false);\n const [newListName, setNewListName] = useState('');\n const [showAddItem, setShowAddItem] = useState(false);\n const [newItemName, setNewItemName] = useState('');\n const [newItemQuantity, setNewItemQuantity] = useState(null);\n const [newItemUnit, setNewItemUnit] = useState(null);\n const [newItemNotes, setNewItemNotes] = useState(null);\n const [showAddRecipe, setShowAddRecipe] = useState(false);\n const [selectedRecipeForPreview, setSelectedRecipeForPreview] = useState(null);\n \n // Editing state\n const [editingItemId, setEditingItemId] = useState(null);\n \n // Loading states to prevent double-clicks\n const [creatingList, setCreatingList] = useState(false);\n const [deletingListId, setDeletingListId] = useState(null);\n const [addingItem, setAddingItem] = useState(false);\n const [addingRecipeId, setAddingRecipeId] = useState(null);\n const [togglingItemId, setTogglingItemId] = useState(null);\n const [deletingItemId, setDeletingItemId] = useState(null);\n const [clearingAllItems, setClearingAllItems] = useState(false);\n\n const handleCreateList = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!newListName.trim() || creatingList) return;\n\n setCreatingList(true);\n try {\n const response = await fetch('/api/grocery-lists', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ name: newListName.trim() }),\n });\n\n if (response.ok) {\n await onListsChange();\n setNewListName('');\n setShowNewListForm(false);\n }\n } finally {\n setCreatingList(false);\n }\n };\n\n const handleDeleteList = async (listId: string) => {\n if (deletingListId) return;\n\n setDeletingListId(listId);\n try {\n const response = await fetch(`/api/grocery-lists/${listId}`, {\n method: 'DELETE',\n });\n\n if (response.ok) {\n await onListsChange();\n if (selectedList?.id === listId) {\n setSelectedList(null);\n }\n }\n } finally {\n setDeletingListId(null);\n }\n };\n\n const handleAddItem = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!selectedList || !newItemName.trim() || addingItem) return;\n\n setAddingItem(true);\n try {\n const response = await fetch(`/api/grocery-lists/${selectedList.id}/items`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n name: newItemName.trim(),\n quantity: newItemQuantity,\n unit: newItemUnit,\n notes: newItemNotes,\n }),\n });\n\n if (response.ok) {\n await onListsChange();\n setNewItemName('');\n setNewItemQuantity(null);\n setNewItemUnit(null);\n setNewItemNotes(null);\n setShowAddItem(false);\n // Update selected list\n const updatedLists = await fetch('/api/grocery-lists').then(r => r.json());\n if (updatedLists.success) {\n const updated = updatedLists.data.find((l: GroceryList) => l.id === selectedList.id);\n if (updated) setSelectedList(updated);\n }\n }\n } finally {\n setAddingItem(false);\n }\n };\n\n // Select a recipe to preview before adding\n const handleSelectRecipeForPreview = (recipe: Recipe) => {\n setSelectedRecipeForPreview(recipe);\n setShowAddRecipe(false);\n };\n\n // Add recipe ingredients with specified servings\n const handleAddRecipeIngredients = async (recipeId: string, servings: number) => {\n if (!selectedList || addingRecipeId) return;\n\n setAddingRecipeId(recipeId);\n try {\n const response = await fetch(`/api/grocery-lists/${selectedList.id}/add-recipe`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ recipeId, servings }),\n });\n\n if (response.ok) {\n await onListsChange();\n setSelectedRecipeForPreview(null);\n // Update selected list\n const updatedLists = await fetch('/api/grocery-lists').then(r => r.json());\n if (updatedLists.success) {\n const updated = updatedLists.data.find((l: GroceryList) => l.id === selectedList.id);\n if (updated) setSelectedList(updated);\n }\n }\n } finally {\n setAddingRecipeId(null);\n }\n };\n\n const handleToggleItem = async (item: GroceryListItem) => {\n if (!selectedList || togglingItemId) return;\n\n // Optimistically update first\n setTogglingItemId(item.id);\n setSelectedList({\n ...selectedList,\n items: selectedList.items.map(i =>\n i.id === item.id ? { ...i, checked: !i.checked } : i\n ),\n });\n\n try {\n await fetch(`/api/grocery-lists/${selectedList.id}/items/${item.id}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ checked: !item.checked }),\n });\n } finally {\n setTogglingItemId(null);\n }\n };\n\n const handleUpdateItem = async (\n item: GroceryListItem,\n updates: {\n name?: string;\n quantity?: number | null;\n unit?: string | null;\n notes?: string | null;\n }\n ) => {\n if (!selectedList) return;\n\n // Optimistically update\n setSelectedList({\n ...selectedList,\n items: selectedList.items.map(i =>\n i.id === item.id ? { ...i, ...updates } : i\n ),\n });\n setEditingItemId(null);\n\n try {\n await fetch(`/api/grocery-lists/${selectedList.id}/items/${item.id}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(updates),\n });\n \n // Refresh the list to ensure sync\n const updatedLists = await fetch('/api/grocery-lists').then(r => r.json());\n if (updatedLists.success) {\n const updated = updatedLists.data.find((l: GroceryList) => l.id === selectedList.id);\n if (updated) setSelectedList(updated);\n }\n } catch {\n // Revert on error by refreshing\n const updatedLists = await fetch('/api/grocery-lists').then(r => r.json());\n if (updatedLists.success) {\n const updated = updatedLists.data.find((l: GroceryList) => l.id === selectedList.id);\n if (updated) setSelectedList(updated);\n }\n }\n };\n\n const handleDeleteItem = async (itemId: string) => {\n if (!selectedList || deletingItemId) return;\n\n // Optimistically update first\n setDeletingItemId(itemId);\n setSelectedList({\n ...selectedList,\n items: selectedList.items.filter(i => i.id !== itemId),\n });\n\n try {\n await fetch(`/api/grocery-lists/${selectedList.id}/items/${itemId}`, {\n method: 'DELETE',\n });\n } finally {\n setDeletingItemId(null);\n }\n };\n\n // Toggle all items in a combined group\n const handleToggleCombinedItems = async (items: GroceryListItem[], checked: boolean) => {\n if (!selectedList || togglingItemId) return;\n\n // Use first item id as the toggling indicator\n setTogglingItemId(items[0].id);\n \n // Optimistically update all items\n setSelectedList({\n ...selectedList,\n items: selectedList.items.map(i =>\n items.some(item => item.id === i.id) ? { ...i, checked } : i\n ),\n });\n\n try {\n // Update all items in parallel\n await Promise.all(\n items.map(item =>\n fetch(`/api/grocery-lists/${selectedList.id}/items/${item.id}`, {\n method: 'PATCH',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ checked }),\n })\n )\n );\n } finally {\n setTogglingItemId(null);\n }\n };\n\n // Delete all items in a combined group\n const handleDeleteCombinedItems = async (items: GroceryListItem[]) => {\n if (!selectedList || deletingItemId) return;\n\n // Use first item id as the deleting indicator\n setDeletingItemId(items[0].id);\n \n // Optimistically remove all items\n const itemIds = new Set(items.map(i => i.id));\n setSelectedList({\n ...selectedList,\n items: selectedList.items.filter(i => !itemIds.has(i.id)),\n });\n\n try {\n // Delete all items in parallel\n await Promise.all(\n items.map(item =>\n fetch(`/api/grocery-lists/${selectedList.id}/items/${item.id}`, {\n method: 'DELETE',\n })\n )\n );\n } finally {\n setDeletingItemId(null);\n }\n };\n\n const handleClearAllItems = async () => {\n if (!selectedList || selectedList.items.length === 0 || clearingAllItems) return;\n \n if (!confirm(`Are you sure you want to clear all ${selectedList.items.length} item${selectedList.items.length !== 1 ? 's' : ''} from \"${selectedList.name}\"?`)) {\n return;\n }\n\n setClearingAllItems(true);\n try {\n const response = await fetch(`/api/grocery-lists/${selectedList.id}/items`, {\n method: 'DELETE',\n });\n\n if (response.ok) {\n await onListsChange();\n // Update selected list\n const updatedLists = await fetch('/api/grocery-lists').then(r => r.json());\n if (updatedLists.success) {\n const updated = updatedLists.data.find((l: GroceryList) => l.id === selectedList.id);\n if (updated) setSelectedList(updated);\n }\n }\n } finally {\n setClearingAllItems(false);\n }\n };\n\n return (\n

\n {/* Sidebar - Lists */}\n

Grocery Lists

\n setShowNewListForm(true)}\n className=\"p-1 rounded transition-colors\"\n style={{ color: 'var(--accent)' }}\n >\n \n \n

\n \n {showNewListForm && (\n

\n \n

\n {lists.length === 0 ? (\n

\n No lists yet. Create one to get started.\n

\n ) : (\n

\n {lists.map((list) => (\n setSelectedList(list)}\n >\n

{list.name}

\n {list.items.length} item{list.items.length !== 1 ? 's' : ''}\n

\n {list.name !== DEFAULT_GROCERY_LIST_NAME && (\n {\n e.stopPropagation();\n handleDeleteList(list.id);\n }}\n disabled={deletingListId === list.id}\n className=\"opacity-0 group-hover:opacity-100 p-1 text-gray-400 hover:text-red-500 transition-all disabled:opacity-50\"\n >\n {deletingListId === list.id ? (\n \n ) : (\n \n )}\n \n )}\n

\n ))}\n

\n )}\n

\n \n {/* Main content - List details */}\n

\n {selectedList ? (\n <>\n {/* Header */}\n

{selectedList.name}

\n {selectedList.items.filter(i => i.checked).length} of {selectedList.items.length} checked\n

\n {selectedList.items.length > 0 && (\n \n {clearingAllItems ? (\n \n ) : (\n \n )}\n {clearingAllItems ? 'Clearing...' : 'Clear All'}\n \n )}\n setShowAddItem(true)}\n className=\"btn-secondary text-sm flex items-center gap-1\"\n >\n \n Add Item\n \n setShowAddRecipe(true)}\n className=\"btn-primary text-sm flex items-center gap-1\"\n >\n \n Add Recipe\n \n

\n \n {/* Items */}\n

\n {selectedList.items.length === 0 ? (\n

\n 🛒\n

No items yet

Add items or import from a recipe

\n ) : (\n

\n {combineItems(selectedList.items).map((combinedItem, index) => (\n

\n {combinedItem.sourceItems.length === 1 ? (\n // Single item - use regular GroceryItemRow\n setEditingItemId(combinedItem.sourceItems[0].id)}\n onSave={(updates) => handleUpdateItem(combinedItem.sourceItems[0], updates)}\n onToggleChecked={() => handleToggleItem(combinedItem.sourceItems[0])}\n onDelete={() => handleDeleteItem(combinedItem.sourceItems[0].id)}\n disabled={!!togglingItemId || !!deletingItemId}\n />\n ) : (\n // Multiple items - use CombinedGroceryItemRow\n handleToggleCombinedItems(combinedItem.sourceItems, checked)}\n onDeleteAll={() => handleDeleteCombinedItems(combinedItem.sourceItems)}\n disabled={!!togglingItemId || !!deletingItemId}\n />\n )}\n

\n ))}\n

\n )}\n

\n \n ) : (\n

\n 👈\n

Select a list to view items

\n )}\n

\n \n {/* Add item modal */}\n {showAddItem && selectedList && (\n

setShowAddItem(false)}>\n

e.stopPropagation()}>\n

Add Item

\n {/* Quantity + Unit + Name row */}\n

\n \n setNewItemName(e.target.value)}\n className=\"input flex-1\"\n placeholder=\"Item name\"\n autoFocus\n disabled={addingItem}\n />\n

\n {/* Notes row */}\n \n

\n \n \n

\n )}\n \n {/* Add recipe picker modal */}\n {showAddRecipe && selectedList && (\n

setShowAddRecipe(false)}>\n

e.stopPropagation()}>\n

Add Recipe Ingredients

Select a recipe to add its ingredients

\n {recipes.length === 0 ? (\n

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

\n ) : (\n

\n {recipes.map((recipe) => (\n handleSelectRecipeForPreview(recipe)}\n className=\"w-full p-3 text-left rounded-lg transition-colors flex items-center justify-between hover:bg-opacity-50\"\n style={{ background: 'transparent' }}\n >\n

{recipe.title}

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

\n \n \n ))}\n

\n )}\n

\n \n

\n )}\n\n {/* Add recipe preview modal */}\n {selectedRecipeForPreview && selectedList && (\n handleAddRecipeIngredients(selectedRecipeForPreview.id, servings)}\n onClose={() => setSelectedRecipeForPreview(null)}\n isAdding={addingRecipeId === selectedRecipeForPreview.id}\n />\n )}\n \n );\n}\n\n",[],[341,347,397],{"_103":406,"_96":407,"_159":408,"_161":348,"_162":144,"_163":409,"_165":117,"_105":410,"_100":32,"_167":188,"_169":411,"_170":22,"_171":-5,"_172":412,"_99":413},"11a778a8-eeae-11f0-a362-42dde27851f2","IngredientNutritionModal.tsx","11a77998-eeae-11f0-a362-42dde27851f2",234,["D",1768109183318],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { RecipeIngredient, FDCFood } from \"../../shared/types.ts\";\nimport { NUTRIENT_INFO } from \"../../shared/types.ts\";\n\ninterface IngredientNutritionModalProps {\n ingredient: RecipeIngredient;\n recipeServingSize: number;\n onClose: () => void;\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 IngredientNutritionModal({ \n ingredient, \n recipeServingSize, \n onClose \n}: IngredientNutritionModalProps) {\n const [nutrition, setNutrition] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [showMicronutrients, setShowMicronutrients] = useState(false);\n\n // Fetch nutrition data on mount\n React.useEffect(() => {\n if (!ingredient.fdcId) {\n setError('No FDC data linked');\n setLoading(false);\n return;\n }\n\n const fetchNutrition = async () => {\n try {\n const response = await fetch(`/api/fdc/food/${ingredient.fdcId}`);\n const result = await response.json();\n \n if (result.success) {\n setNutrition(result.data);\n } else {\n setError(result.error || 'Failed to load nutrition data');\n }\n } catch (err) {\n setError('Failed to fetch nutrition data');\n } finally {\n setLoading(false);\n }\n };\n\n fetchNutrition();\n }, [ingredient.fdcId]);\n\n // Calculate nutrition value per serving for this ingredient\n // Formula: (valuePer100g * amountGrams / 100) / servingSize\n const getPerServingNutrition = (valuePer100g: number | null): number | null => {\n if (valuePer100g === null) return null;\n // If we have amountGrams, calculate per-serving contribution\n if (ingredient.amountGrams) {\n const totalForRecipe = (valuePer100g * ingredient.amountGrams) / 100;\n return totalForRecipe / recipeServingSize;\n }\n // Otherwise show per 100g value (fallback)\n return valuePer100g;\n };\n\n return (\n

\n e.stopPropagation()}\n >\n {/* Header */}\n

\n Ingredient Nutrition\n

\n {ingredient.amount && {ingredient.amount} }\n {ingredient.unit && {ingredient.unit} }\n {ingredient.name}\n

\n \n \n \n

\n \n {/* Body */}\n

\n {loading ? (\n

\n \n

\n ) : error ? (\n

\n \n

{error}

\n ) : nutrition && (\n

\n {/* FDC Food Info */}\n

\n \n {nutrition.dataType}\n \n {nutrition.brandOwner && (\n {nutrition.brandOwner}\n )}\n

\n {nutrition.description}\n

\n {ingredient.amountGrams ? (\n

\n Contribution per serving ({ingredient.amountGrams}g ÷ {recipeServingSize} serving{recipeServingSize !== 1 ? 's' : ''})\n

\n ) : (\n

\n Nutrition shown per 100g (amount not specified)\n

\n )}\n

\n \n {/* Macronutrients */}\n

\n Nutrition per Serving\n {ingredient.amountGrams && (\n \n (from this ingredient)\n \n )}\n

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

kcal

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

protein

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

carbs

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

fat

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

fiber

\n \n {/* Micronutrients Toggle */}\n

\n setShowMicronutrients(!showMicronutrients)}\n className=\"flex items-center justify-between w-full text-left p-2 rounded-lg transition-colors\"\n style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border-primary)' }}\n >\n \n Vitamins & Minerals\n \n \n \n \n \n \n {showMicronutrients && (\n

\n {/* Minerals */}\n {(['sodium', 'potassium', 'calcium', 'iron', 'magnesium', 'zinc', 'phosphorus', 'selenium', 'copper', 'manganese'] as const).some(key => nutrition.nutrition[key] !== null) && (\n

\n Minerals\n

\n {(['sodium', 'potassium', 'calcium', 'iron', 'magnesium', 'zinc', 'phosphorus', 'selenium', 'copper', 'manganese'] as const).map(key => {\n const info = NUTRIENT_INFO[key];\n const value = getPerServingNutrition(nutrition.nutrition[key]);\n if (value === null) return null;\n return (\n

\n {info.label}\n \n {formatNutrient(value, info.unit)}{info.unit}\n \n

\n );\n })}\n

\n )}\n \n {/* Vitamins - Fat Soluble */}\n {(['vitaminA', 'vitaminD', 'vitaminE', 'vitaminK'] as const).some(key => nutrition.nutrition[key] !== null) && (\n

\n Vitamins (Fat-Soluble)\n

\n {(['vitaminA', 'vitaminD', 'vitaminE', 'vitaminK'] as const).map(key => {\n const info = NUTRIENT_INFO[key];\n const value = getPerServingNutrition(nutrition.nutrition[key]);\n if (value === null) return null;\n return (\n

\n {info.label}\n \n {formatNutrient(value, info.unit)}{info.unit}\n \n

\n );\n })}\n

\n )}\n \n {/* Vitamins - Water Soluble */}\n {(['vitaminC', 'vitaminB6', 'vitaminB12', 'thiamin', 'riboflavin', 'niacin', 'pantothenicAcid', 'folate', 'choline'] as const).some(key => nutrition.nutrition[key] !== null) && (\n

\n Vitamins (Water-Soluble)\n

\n {(['vitaminC', 'vitaminB6', 'vitaminB12', 'thiamin', 'riboflavin', 'niacin', 'pantothenicAcid', 'folate', 'choline'] as const).map(key => {\n const info = NUTRIENT_INFO[key];\n const value = getPerServingNutrition(nutrition.nutrition[key]);\n if (value === null) return null;\n return (\n

\n {info.label}\n \n {formatNutrient(value, info.unit)}{info.unit}\n \n

\n );\n })}\n

\n )}\n \n {/* Fats Breakdown */}\n {(['saturatedFat', 'transFat', 'monounsaturatedFat', 'polyunsaturatedFat', 'cholesterol'] as const).some(key => nutrition.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 = getPerServingNutrition(nutrition.nutrition[key]);\n if (value === null) return null;\n return (\n

\n {info.label}\n \n {formatNutrient(value, info.unit)}{info.unit}\n \n

\n );\n })}\n

\n )}\n \n {/* Sugars */}\n {(['sugars', 'addedSugars'] as const).some(key => nutrition.nutrition[key] !== null) && (\n

\n Sugars\n

\n {(['sugars', 'addedSugars'] as const).map(key => {\n const info = NUTRIENT_INFO[key];\n const value = getPerServingNutrition(nutrition.nutrition[key]);\n if (value === null) return null;\n return (\n

\n {info.label}\n \n {formatNutrient(value, info.unit)}{info.unit}\n \n

\n );\n })}\n

\n )}\n

\n \n {/* Footer */}\n

\n \n Close\n \n

\n \n );\n}\n\n",[],[341,347,407],{"_103":415,"_96":416,"_159":417,"_161":348,"_162":144,"_163":418,"_165":117,"_105":419,"_100":32,"_167":188,"_169":420,"_170":22,"_171":-5,"_172":421,"_99":422},"7d3b31fc-e78f-11f0-a0ac-42dde27851f2","ItemNameInput.tsx","7d3b32ce-e78f-11f0-a0ac-42dde27851f2",185,["D",1767326391572],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface ItemNameInputProps {\n value: string;\n onChange: (value: string) => void;\n disabled?: boolean;\n className?: string;\n placeholder?: string;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n autoFocus?: boolean;\n}\n\nexport function ItemNameInput({\n value,\n onChange,\n disabled = false,\n className = '',\n placeholder = 'Item name',\n onKeyDown,\n autoFocus = false,\n}: ItemNameInputProps) {\n return (\n onChange(e.target.value)}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n disabled={disabled}\n autoFocus={autoFocus}\n className={`\n px-2 py-1.5 text-sm border rounded-md\n ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}\n border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500\n focus:outline-none transition-colors\n ${className}\n `}\n />\n );\n}\n\n",[],[341,347,416],{"_103":424,"_96":425,"_159":426,"_161":348,"_162":144,"_163":427,"_165":117,"_105":428,"_100":253,"_167":188,"_169":429,"_170":22,"_171":-5,"_172":430,"_99":431},"92d35c16-e793-11f0-8afb-42dde27851f2","Login.tsx","b9001dfa-d3a9-11f0-a755-42dde27851f2",199,["D",1767328145790],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { useTheme, SunIcon, MoonIcon } from \"./ThemeContext.tsx\";\n\nexport function Login() {\n const { resolvedTheme, toggleTheme } = useTheme();\n \n return (\n

\n {/* Theme toggle in corner */}\n \n {resolvedTheme === 'dark' ? (\n \n ) : (\n \n )}\n \n\n

\n {/* Logo and branding */}\n

\n \n

Carmy

Recipe Saver, Meal Planning & Nutrition

\n \n {/* Login card */}\n

Welcome back

\n \n \n \n Continue with Google\n \n \n

\n By signing in, you agree to our terms of service\n

\n \n {/* Features preview */}\n

\n 📖\n

Save Recipes

\n 🛒\n

Grocery Lists

\n 📅\n

Meal Planning

\n 💪\n

Track Nutrition

\n );\n}\n",[],[341,347,425],{"_103":433,"_96":434,"_159":435,"_161":348,"_162":144,"_163":436,"_165":117,"_105":437,"_100":438,"_167":188,"_169":439,"_170":22,"_171":-5,"_172":440,"_99":441},"5fc98c0c-e9d0-11f0-9d93-42dde27851f2","MealPlanView.tsx","b9076826-d3a9-11f0-8004-42dde27851f2",226,["D",1767574161773],29,"/** @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, FDCNutrition } from \"../../shared/types.ts\";\nimport { DAY_NAMES, MEAL_TYPES, MEAL_TYPE_LABELS, NUTRIENT_INFO, createEmptyDailyNutrition } 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 NutrientRowProps {\n nutrientKey: NutrientKey;\n value: number;\n goal?: number | null;\n hideIfZero?: boolean;\n}\n\nfunction NutrientRow({ nutrientKey, value, goal, hideIfZero }: NutrientRowProps) {\n const info = NUTRIENT_INFO[nutrientKey];\n\n // Skip if value is 0 and not a core macro\n const coreMacros = ['calories', 'protein', 'fat', 'carbs', 'fiber'];\n if (hideIfZero && 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\ninterface NutrientSectionProps {\n title: string;\n keys: NutrientKey[];\n data: DailyNutrition;\n nutritionGoals?: NutritionGoals | null;\n hideEmpty?: boolean;\n}\n\nfunction NutrientSection({ title, keys, data, nutritionGoals, hideEmpty }: NutrientSectionProps) {\n const hasAnyData = keys.some(key => (data[key] ?? 0) > 0);\n if (hideEmpty && !hasAnyData && title !== 'Macronutrients') return null;\n\n return (\n

{title}

\n {keys.map(key => {\n let goal: number | null = null;\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 );\n })}\n

\n );\n}\n\nfunction calculateEntryNutrition(entry: MealPlanEntry): DailyNutrition {\n const result = createEmptyDailyNutrition();\n let sourceNutrition: FDCNutrition | null = null;\n let scale = 1;\n\n if (entry.recipe && entry.recipe.nutrition) {\n sourceNutrition = entry.recipe.nutrition;\n scale = entry.servings;\n } else if (entry.customFood) {\n sourceNutrition = entry.customFood;\n scale = (entry.amountGrams ?? entry.customFood.servingSizeGrams) / entry.customFood.servingSizeGrams;\n } else if (entry.fdcId && entry.fdcFood) {\n sourceNutrition = entry.fdcFood.nutrition;\n scale = (entry.amountGrams ?? 100) / 100;\n }\n\n if (sourceNutrition) {\n (Object.keys(NUTRIENT_INFO) as NutrientKey[]).forEach(key => {\n const val = sourceNutrition![key as keyof FDCNutrition];\n if (typeof val === 'number') {\n result[key as keyof DailyNutrition] = val * scale;\n }\n });\n }\n\n return result;\n}\n\nconst ItemDetailModal = ({\n entry,\n nutritionGoals,\n onClose,\n onRemove,\n onDuplicate\n}: {\n entry: MealPlanEntry;\n nutritionGoals: NutritionGoals | null;\n onClose: () => void;\n onRemove: (id: string) => Promise;\n onDuplicate: (entry: MealPlanEntry, days: DayOfWeek[]) => Promise;\n}) => {\n const [showNutrition, setShowNutrition] = useState(false);\n const [showDuplicate, setShowDuplicate] = useState(false);\n const [duplicateDays, setDuplicateDays] = useState([]);\n const [isRemoving, setIsRemoving] = useState(false);\n const [isDuplicating, setIsDuplicating] = useState(false);\n\n const entryNutrition = calculateEntryNutrition(entry);\n\n let name = 'Unknown';\n if (entry.recipeId && entry.recipe) name = entry.recipe.title;\n else if (entry.customFoodId && entry.customFood) name = entry.customFood.name;\n else if (entry.fdcId && entry.fdcFood) name = entry.fdcFood.description;\n\n const handleRemove = async () => {\n setIsRemoving(true);\n await onRemove(entry.id);\n onClose();\n };\n\n const handleDuplicate = async () => {\n if (duplicateDays.length === 0) return;\n setIsDuplicating(true);\n await onDuplicate(entry, duplicateDays);\n onClose();\n };\n\n return (\n

e.stopPropagation()}>\n

{name}

\n {MEAL_TYPE_LABELS[entry.mealType]} • {DAY_NAMES[entry.dayOfWeek]}\n

\n \n

\n\n {!showNutrition && !showDuplicate ? (\n

\n setShowNutrition(true)}\n className=\"w-full flex items-center gap-3 p-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border border-transparent hover:border-gray-100 dark:hover:border-gray-700\"\n >\n

\n \n

View Nutrition

{Math.round(entryNutrition.calories)} kcal • {Math.round(entryNutrition.protein)}g protein

\n \n\n setShowDuplicate(true)}\n className=\"w-full flex items-center gap-3 p-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border border-transparent hover:border-gray-100 dark:hover:border-gray-700\"\n >\n

\n \n

Duplicate

Add to other days of the week

\n \n\n \n

\n {isRemoving ? (\n \n ) : (\n \n )}\n

Delete

\n \n

\n ) : showNutrition ? (\n

\n setShowNutrition(false)}\n className=\"text-xs font-medium flex items-center gap-1 hover:underline\"\n style={{ color: 'var(--accent)' }}\n >\n ← Back to Options\n \n

\n \n \n \n

\n ) : (\n

\n setShowDuplicate(false)}\n className=\"text-xs font-medium flex items-center gap-1 hover:underline mb-2\"\n style={{ color: 'var(--accent)' }}\n >\n ← Back to Options\n \n

\n Select days to add this to:\n

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

\n \n {isDuplicating ? (\n \n ) : null}\n {isDuplicating ? 'Duplicating...' : `Add to ${duplicateDays.length} day${duplicateDays.length === 1 ? '' : 's'}`}\n \n

\n )}\n

\n );\n};\n\nconst AllNutrientsView = ({\n displayData,\n displayLabel,\n nutritionGoals,\n onClose\n}: {\n displayData: DailyNutrition;\n displayLabel: string;\n nutritionGoals?: NutritionGoals | null;\n onClose: () => void;\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 return (\n

e.stopPropagation()}>\n

{displayLabel}

\n \n \n \n

\n\n

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

\n\n

\n \n

\n );\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 const [selectedEntry, setSelectedEntry] = 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 handleDuplicateEntry = async (entry: MealPlanEntry, days: DayOfWeek[]) => {\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({\n weekStartDate: currentWeek,\n mealType: entry.mealType,\n days,\n recipeId: entry.recipeId,\n customFoodId: entry.customFoodId,\n fdcId: entry.fdcId,\n servings: entry.servings,\n amountGrams: entry.amountGrams,\n }),\n });\n\n if (response.ok) {\n await fetchMealPlan();\n }\n } finally {\n setSchedulingMeals(false);\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-1.5 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-1.5 rounded-lg transition-colors\"\n style={{ color: 'var(--text-secondary)' }}\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 font-medium hover:underline\"\n style={{ color: 'var(--accent)' }}\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

\n )}\n

\n );\n })}\n

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

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

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

{/* Label column spacer */}\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-1.5 rounded-lg transition-all cursor-pointer\"\n style={{\n background: isSelected ? 'rgba(59, 130, 246, 0.12)' : 'transparent',\n opacity: selectedDay !== null && !isSelected ? 0.4 : 1,\n border: 'none',\n marginBottom: '0',\n }}\n >\n

{day}

{formatDate(currentWeek, i)}

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

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

\n {MEAL_TYPES.map((mealType, mealIdx) => (\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 isSelected = selectedDay === day;\n const isFirstRow = mealIdx === 0;\n const isLastRow = mealIdx === MEAL_TYPES.length - 1;\n \n return (\n \n {entries.length > 0 ? (\n

\n {entries.map((entry) => {\n let name = 'Unknown';\n if (entry.recipeId && entry.recipe) name = entry.recipe.title;\n else if (entry.customFoodId && entry.customFood) name = entry.customFood.name;\n else if (entry.fdcId && entry.fdcFood) name = entry.fdcFood.description;\n\n return (\n setSelectedEntry(entry)}\n className=\"w-full text-left text-sm p-1.5 rounded hover:bg-white dark:hover:bg-gray-700 shadow-sm border border-transparent hover:border-gray-200 dark:hover:border-gray-600 transition-all\"\n style={{ background: 'var(--bg-secondary)' }}\n >\n

\n {name}\n

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

\n ) : (\n setShowAddMeal({ day: day as DayOfWeek, mealType })}\n className=\"w-full h-full min-h-[40px] flex items-center justify-center text-gray-300 hover:text-gray-500 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-0.5 rounded text-gray-300 hover:text-gray-500 opacity-0 group-hover:opacity-100 transition-all\"\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\"\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 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 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 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\"\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 {\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 return (\n setShowAllNutrients(false)}\n />\n );\n })()}\n\n {/* Item Detail Modal */}\n {selectedEntry && (\n setSelectedEntry(null)}\n onRemove={handleRemoveMeal}\n onDuplicate={handleDuplicateEntry}\n />\n )}\n \n );\n}\n\n\n",[],[341,347,434],{"_103":443,"_96":444,"_159":445,"_161":348,"_162":144,"_163":446,"_165":117,"_105":447,"_100":32,"_167":188,"_169":448,"_170":22,"_171":-5,"_172":449,"_99":450},"7d46564a-e78f-11f0-ac78-42dde27851f2","NotesInput.tsx","7d4656fe-e78f-11f0-ac78-42dde27851f2",187,["D",1767326391573],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface NotesInputProps {\n value: string | null;\n onChange: (value: string | null) => void;\n disabled?: boolean;\n className?: string;\n placeholder?: string;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\nexport function NotesInput({\n value,\n onChange,\n disabled = false,\n className = '',\n placeholder = 'Notes (optional)',\n onKeyDown,\n}: NotesInputProps) {\n const handleChange = (e: React.ChangeEvent) => {\n const newValue = e.target.value;\n onChange(newValue || null);\n };\n\n return (\n \n );\n}\n\n",[],[341,347,444],{"_103":452,"_96":453,"_159":454,"_161":348,"_162":144,"_163":455,"_165":117,"_105":456,"_100":32,"_167":188,"_169":457,"_170":22,"_171":-5,"_172":458,"_99":459},"116b693a-eeae-11f0-b9ca-42dde27851f2","NutritionSection.tsx","116b6a16-eeae-11f0-b9ca-42dde27851f2",232,["D",1768109183239],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Recipe, RecipeIngredient, FDCFood, NutrientKey } from \"../../shared/types.ts\";\nimport { NUTRIENT_INFO } from \"../../shared/types.ts\";\n\n// Type for ingredient nutrition cache\ntype IngredientNutritionMap = Record;\n\ninterface NutritionSectionProps {\n recipe: Recipe;\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 NutritionSection({ recipe }: NutritionSectionProps) {\n const [showMicronutrients, setShowMicronutrients] = useState(false);\n const [expandedNutrient, setExpandedNutrient] = useState(null);\n const [ingredientNutritionCache, setIngredientNutritionCache] = useState(null);\n const [breakdownLoading, setBreakdownLoading] = useState(false);\n\n if (!recipe.nutrition) return null;\n\n // Handle nutrient click to expand and show ingredient breakdown\n const handleNutrientClick = async (nutrient: NutrientKey) => {\n // Toggle off if clicking the same nutrient\n if (expandedNutrient === nutrient) {\n setExpandedNutrient(null);\n return;\n }\n\n setExpandedNutrient(nutrient);\n\n // Check if we already have the nutrition data cached\n if (ingredientNutritionCache) {\n return;\n }\n\n // Fetch ingredient nutrition for this recipe\n setBreakdownLoading(true);\n try {\n const response = await fetch(`/api/recipes/${recipe.id}/ingredient-nutrition`);\n const result = await response.json();\n if (result.success) {\n setIngredientNutritionCache(result.data);\n }\n } catch (error) {\n console.error('Failed to fetch ingredient nutrition:', error);\n } finally {\n setBreakdownLoading(false);\n }\n };\n\n // Calculate ingredient contribution for a specific nutrient\n const getIngredientContributions = (\n nutrient: NutrientKey\n ): Array<{ ingredient: RecipeIngredient; contribution: number | null; hasData: boolean }> => {\n return recipe.ingredients.map(ingredient => {\n if (!ingredient.fdcId || !ingredientNutritionCache || !ingredientNutritionCache[ingredient.fdcId]) {\n return { ingredient, contribution: null, hasData: false };\n }\n\n const fdcFood = ingredientNutritionCache[ingredient.fdcId];\n const valuePer100g = fdcFood.nutrition[nutrient];\n\n if (valuePer100g === null || !ingredient.amountGrams) {\n return { ingredient, contribution: null, hasData: !!fdcFood };\n }\n\n const contribution = (valuePer100g * ingredient.amountGrams / 100) / recipe.servingSize;\n return { ingredient, contribution, hasData: true };\n }).sort((a, b) => {\n if (a.contribution === null && b.contribution === null) return 0;\n if (a.contribution === null) return 1;\n if (b.contribution === null) return -1;\n return b.contribution - a.contribution;\n });\n };\n\n // Render breakdown panel for any nutrient\n const renderBreakdown = (nutrientKeys: readonly NutrientKey[]) => {\n if (!expandedNutrient || !nutrientKeys.includes(expandedNutrient)) return null;\n \n const info = NUTRIENT_INFO[expandedNutrient];\n return (\n

\n \n {info.label}: {formatNutrient(recipe.nutrition![expandedNutrient], info.unit)}{info.unit}/serving\n \n

\n {breakdownLoading ? (\n

\n ) : (\n

\n {getIngredientContributions(expandedNutrient).map(({ ingredient, contribution, hasData }) => (\n

\n {ingredient.name}\n \n {contribution !== null ? `${formatNutrient(contribution, info.unit)}${info.unit}` : hasData ? '-' : 'N/A'}\n \n

\n ))}\n

\n )}\n

\n );\n };\n\n // Render a clickable nutrient card\n const renderNutrientCard = (key: NutrientKey, displayLabel?: string, small = false) => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n \n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className={`${small ? 'p-1.5' : 'p-2'} rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400`}\n style={{ \n background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', \n border: '1px solid var(--border-primary)'\n }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit === 'kcal' ? '' : info.unit}\n

\n {displayLabel || info.label}\n

\n \n );\n };\n\n const macroKeys = ['calories', 'protein', 'carbs', 'fat', 'fiber'] as const;\n const fatsKeys = ['saturatedFat', 'transFat', 'monounsaturatedFat', 'polyunsaturatedFat', 'cholesterol'] as const;\n const sugarsKeys = ['sugars', 'addedSugars', 'starch'] as const;\n const mineralsKeys = ['sodium', 'potassium', 'calcium', 'iron', 'magnesium', 'zinc', 'phosphorus', 'selenium', 'copper', 'manganese'] as const;\n const vitFatKeys = ['vitaminA', 'vitaminD', 'vitaminE', 'vitaminK', 'retinol'] as const;\n const vitWater1Keys = ['vitaminC', 'vitaminB6', 'vitaminB12', 'thiamin', 'riboflavin', 'niacin'] as const;\n const vitWater2Keys = ['pantothenicAcid', 'biotin', 'folate', 'folicAcid', 'choline', 'betaine'] as const;\n const carotenoidKeys = ['betaCarotene', 'alphaCarotene', 'lycopene', 'luteinZeaxanthin'] as const;\n const otherKeys = ['water', 'alcohol', 'caffeine'] as const;\n\n return (\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 {macroKeys.map(key => renderNutrientCard(key, key === 'calories' ? 'kcal' : key))}\n

\n {renderBreakdown(macroKeys)}\n \n {/* Micronutrients */}\n {showMicronutrients && (\n

\n {/* Fats Breakdown */}\n {fatsKeys.some(key => recipe.nutrition![key] !== null) && (\n

\n Fats Breakdown\n

\n {fatsKeys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label.replace(' Fat', '')}

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

\n {renderBreakdown(fatsKeys)}\n

\n )}\n\n {/* Sugars */}\n {sugarsKeys.some(key => recipe.nutrition![key] !== null) && (\n

\n Sugars & Starch\n

\n {sugarsKeys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label}

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

\n {renderBreakdown(sugarsKeys)}\n

\n )}\n\n {/* Minerals */}\n

\n Minerals\n

\n {mineralsKeys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label}

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

\n {renderBreakdown(mineralsKeys)}\n

\n \n {/* Vitamins - Fat Soluble */}\n

\n Vitamins (Fat-Soluble)\n

\n {vitFatKeys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label.replace('Vitamin ', 'Vit ')}

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

\n {renderBreakdown(vitFatKeys)}\n

\n\n {/* Vitamins - Water Soluble */}\n

\n Vitamins (Water-Soluble)\n

\n {vitWater1Keys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label.replace('Vitamin ', 'Vit ').replace(' (B1)', '').replace(' (B2)', '').replace(' (B3)', '')}

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

\n {vitWater2Keys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label.replace(' (B5)', '').replace(' (B7)', '')}

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

\n {renderBreakdown([...vitWater1Keys, ...vitWater2Keys])}\n

\n\n {/* Carotenoids */}\n {carotenoidKeys.some(key => recipe.nutrition![key] !== null) && (\n

\n Carotenoids\n

\n {carotenoidKeys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label}

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

\n {renderBreakdown(carotenoidKeys)}\n

\n )}\n\n {/* Other */}\n {otherKeys.some(key => recipe.nutrition![key] !== null && recipe.nutrition![key]! > 0) && (\n

\n Other\n

\n {otherKeys.map(key => {\n const info = NUTRIENT_INFO[key];\n const value = recipe.nutrition![key];\n if (value === null || value === 0) return null;\n const isExpanded = expandedNutrient === key;\n return (\n handleNutrientClick(key)}\n className=\"p-1.5 rounded cursor-pointer transition-all hover:ring-1 hover:ring-blue-400\"\n style={{ background: isExpanded ? 'var(--accent)' : 'var(--bg-primary)', border: '1px solid var(--border-primary)' }}\n >\n

\n {formatNutrient(value, info.unit)}{info.unit}\n

{info.label}

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

\n {renderBreakdown(otherKeys)}\n

\n )}\n

\n );\n}\n\n",[],[341,347,453],{"_103":461,"_96":462,"_159":463,"_161":348,"_162":144,"_163":464,"_165":117,"_105":465,"_100":253,"_167":188,"_169":466,"_170":22,"_171":-5,"_172":467,"_99":468},"92e29ed8-e793-11f0-bf91-42dde27851f2","NutritionView.tsx","b8f099c0-d3a9-11f0-8d63-42dde27851f2",200,["D",1767328145890],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport type { NutritionGoals, NutritionGoalType, DailyNutrition } from \"../../shared/types.ts\";\nimport { NUTRITION_GOAL_LABELS, NUTRITION_GOAL_UNITS } from \"../../shared/types.ts\";\n\ninterface NutritionViewProps {\n goals: NutritionGoals | null;\n onGoalsChange: () => Promise;\n}\n\nconst GOAL_TYPES: NutritionGoalType[] = ['calories', 'protein', 'fiber', 'fat', 'carbs'];\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\nexport function NutritionView({ goals, onGoalsChange }: NutritionViewProps) {\n const [editing, setEditing] = useState(false);\n const [primaryType, setPrimaryType] = useState(goals?.primaryGoalType || 'calories');\n const [primaryValue, setPrimaryValue] = useState(goals?.primaryGoalValue?.toString() || '2000');\n const [sub1Type, setSub1Type] = useState(goals?.subGoal1Type || '');\n const [sub1Value, setSub1Value] = useState(goals?.subGoal1Value?.toString() || '');\n const [sub2Type, setSub2Type] = useState(goals?.subGoal2Type || '');\n const [sub2Value, setSub2Value] = useState(goals?.subGoal2Value?.toString() || '');\n const [submitting, setSubmitting] = useState(false);\n \n const [weeklyData, setWeeklyData] = useState<{\n daily: Record;\n weeklyAverage: DailyNutrition;\n } | null>(null);\n const [loadingWeekly, setLoadingWeekly] = useState(false);\n\n const fetchWeeklyData = useCallback(async () => {\n setLoadingWeekly(true);\n try {\n const weekStart = getWeekStartDate(new Date());\n const response = await fetch(`/api/nutrition/weekly?weekStartDate=${weekStart}`);\n const data = await response.json();\n if (data.success) {\n setWeeklyData(data.data);\n }\n } catch (err) {\n console.error('Failed to fetch weekly nutrition:', err);\n } finally {\n setLoadingWeekly(false);\n }\n }, []);\n\n useEffect(() => {\n fetchWeeklyData();\n }, [fetchWeeklyData]);\n\n // Update form when goals change\n useEffect(() => {\n if (goals) {\n setPrimaryType(goals.primaryGoalType);\n setPrimaryValue(goals.primaryGoalValue.toString());\n setSub1Type(goals.subGoal1Type || '');\n setSub1Value(goals.subGoal1Value?.toString() || '');\n setSub2Type(goals.subGoal2Type || '');\n setSub2Value(goals.subGoal2Value?.toString() || '');\n }\n }, [goals]);\n\n const handleSave = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!primaryValue) return;\n \n setSubmitting(true);\n \n try {\n const response = await fetch('/api/nutrition/goals', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n primaryGoalType: primaryType,\n primaryGoalValue: parseFloat(primaryValue),\n subGoal1Type: sub1Type || null,\n subGoal1Value: sub1Value ? parseFloat(sub1Value) : null,\n subGoal2Type: sub2Type || null,\n subGoal2Value: sub2Value ? parseFloat(sub2Value) : null,\n }),\n });\n \n if (response.ok) {\n await onGoalsChange();\n setEditing(false);\n }\n } finally {\n setSubmitting(false);\n }\n };\n\n const getProgressColor = (percent: number): string => {\n if (percent >= 90 && percent <= 110) return 'var(--leaf)'; // success\n if (percent > 110) return '#fbbf24'; // warning\n return 'var(--accent)'; // primary\n };\n\n const renderGoalCard = (\n type: NutritionGoalType,\n targetValue: number,\n currentValue: number,\n isPrimary: boolean\n ) => {\n const percent = (currentValue / targetValue) * 100;\n const cappedPercent = Math.min(percent, 100);\n \n return (\n \n

\n \n {type === 'calories' ? '🔥' : type === 'protein' ? '💪' : type === 'fiber' ? '🥬' : type === 'fat' ? '🥑' : '🍞'}\n \n

{NUTRITION_GOAL_LABELS[type]}

\n {isPrimary && (\n \n Primary Goal\n \n )}\n

{Math.round(currentValue)}

of {targetValue} {NUTRITION_GOAL_UNITS[type]}

\n \n

\n {Math.round(percent)}% of daily goal\n = 90 && percent <= 110 ? 'var(--leaf)' : percent > 110 ? '#fbbf24' : 'var(--text-secondary)' }}\n >\n {targetValue - currentValue > 0 ? `${Math.round(targetValue - currentValue)} ${NUTRITION_GOAL_UNITS[type]} remaining` : 'Goal reached!'}\n \n

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

\n {/* Header */}\n

Nutrition Goals

Track your daily nutrition against your goals

\n setEditing(true)}\n className=\"btn-secondary text-sm\"\n >\n {goals ? 'Edit Goals' : 'Set Goals'}\n \n

\n \n {/* Goals display */}\n {goals ? (\n

\n {/* Primary goal */}\n

\n {renderGoalCard(\n goals.primaryGoalType,\n goals.primaryGoalValue,\n weeklyData?.weeklyAverage[goals.primaryGoalType as keyof DailyNutrition] || 0,\n true\n )}\n \n {/* Sub goals */}\n {goals.subGoal1Type && goals.subGoal1Value && (\n renderGoalCard(\n goals.subGoal1Type,\n goals.subGoal1Value,\n weeklyData?.weeklyAverage[goals.subGoal1Type as keyof DailyNutrition] || 0,\n false\n )\n )}\n \n {goals.subGoal2Type && goals.subGoal2Value && (\n renderGoalCard(\n goals.subGoal2Type,\n goals.subGoal2Value,\n weeklyData?.weeklyAverage[goals.subGoal2Type as keyof DailyNutrition] || 0,\n false\n )\n )}\n

\n \n {/* Weekly overview */}\n {weeklyData && (\n

This Week's Overview

\n {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day, i) => {\n const dayData = weeklyData.daily[i];\n const percent = (dayData[goals.primaryGoalType as keyof DailyNutrition] / goals.primaryGoalValue) * 100;\n \n return (\n

{day}

\n \n

\n {Math.round(dayData[goals.primaryGoalType as keyof DailyNutrition])}\n

\n );\n })}\n

\n On target (90-110%)\n

\n Over target\n

\n Under target\n

\n )}\n \n {/* All nutrition breakdown */}\n

Weekly Average Breakdown

\n {GOAL_TYPES.map((type) => {\n const value = weeklyData?.weeklyAverage[type as keyof DailyNutrition] || 0;\n let goal: number | null = null;\n \n if (goals.primaryGoalType === type) goal = goals.primaryGoalValue;\n else if (goals.subGoal1Type === type) goal = goals.subGoal1Value;\n else if (goals.subGoal2Type === type) goal = goals.subGoal2Value;\n \n return (\n

\n {type === 'calories' ? '🔥' : type === 'protein' ? '💪' : type === 'fiber' ? '🥬' : type === 'fat' ? '🥑' : '🍞'}\n

\n {Math.round(value)}\n {NUTRITION_GOAL_UNITS[type]}\n

{NUTRITION_GOAL_LABELS[type]}

\n {goal && (\n

\n {Math.round((value / goal) * 100)}% of goal\n

\n )}\n

\n );\n })}\n

\n ) : (\n

\n 🎯\n

Set Your Nutrition Goals

\n Define your daily nutrition targets to track your progress and stay on track with your health goals.\n

\n \n

\n )}\n

\n \n {/* Edit goals modal */}\n {editing && (\n

setEditing(false)}>\n

e.stopPropagation()}>\n

\n {goals ? 'Edit Nutrition Goals' : 'Set Nutrition Goals'}\n

\n Set one primary goal and up to two sub-goals\n

\n \n

\n {/* Primary goal */}\n

\n \n Primary Goal\n \n

\n Type\n setPrimaryType(e.target.value as NutritionGoalType)}\n className=\"input\"\n >\n {GOAL_TYPES.map((type) => (\n \n ))}\n \n

\n \n Target ({NUTRITION_GOAL_UNITS[primaryType]})\n \n setPrimaryValue(e.target.value)}\n className=\"input\"\n required\n />\n

\n \n {/* Sub-goal 1 */}\n

\n Sub-Goal 1 (Optional)\n {sub1Type && (\n { setSub1Type(''); setSub1Value(''); }}\n className=\"text-xs hover:text-red-500\"\n style={{ color: 'var(--text-secondary)' }}\n >\n Remove\n \n )}\n

\n setSub1Type(e.target.value as NutritionGoalType)}\n className=\"input\"\n >\n \n {GOAL_TYPES.filter(t => t !== primaryType && t !== sub2Type).map((type) => (\n \n ))}\n \n

\n setSub1Value(e.target.value)}\n className=\"input\"\n placeholder={sub1Type ? NUTRITION_GOAL_UNITS[sub1Type] : 'Target'}\n disabled={!sub1Type}\n />\n

\n \n {/* Sub-goal 2 */}\n

\n Sub-Goal 2 (Optional)\n {sub2Type && (\n { setSub2Type(''); setSub2Value(''); }}\n className=\"text-xs hover:text-red-500\"\n style={{ color: 'var(--text-secondary)' }}\n >\n Remove\n \n )}\n

\n setSub2Type(e.target.value as NutritionGoalType)}\n className=\"input\"\n >\n \n {GOAL_TYPES.filter(t => t !== primaryType && t !== sub1Type).map((type) => (\n \n ))}\n \n

\n setSub2Value(e.target.value)}\n className=\"input\"\n placeholder={sub2Type ? NUTRITION_GOAL_UNITS[sub2Type] : 'Target'}\n disabled={!sub2Type}\n />\n

\n \n

\n \n \n

\n )}\n

\n );\n}\n\n\n\n\n",[],[341,347,462],{"_103":470,"_96":471,"_159":472,"_161":348,"_162":144,"_163":473,"_165":117,"_105":474,"_100":32,"_167":188,"_169":475,"_170":22,"_171":-5,"_172":476,"_99":477},"7d52e018-e78f-11f0-8f9e-42dde27851f2","QuantityUnitInput.tsx","7d52e0ae-e78f-11f0-8f9e-42dde27851f2",189,["D",1767326391581],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { UnitSelect } from \"./UnitSelect.tsx\";\n\ninterface QuantityUnitInputProps {\n quantity: number | null;\n unit: string | null;\n onQuantityChange: (value: number | null) => void;\n onUnitChange: (value: string | null) => void;\n disabled?: boolean;\n className?: string;\n}\n\nexport function QuantityUnitInput({\n quantity,\n unit,\n onQuantityChange,\n onUnitChange,\n disabled = false,\n className = '',\n}: QuantityUnitInputProps) {\n const handleQuantityChange = (e: React.ChangeEvent) => {\n const value = e.target.value;\n if (value === '') {\n onQuantityChange(null);\n } else {\n const parsed = parseFloat(value);\n if (!isNaN(parsed)) {\n onQuantityChange(parsed);\n }\n }\n };\n\n return (\n

\n \n \n

\n );\n}\n\n",[],[341,347,471],{"_103":479,"_96":480,"_159":481,"_161":348,"_162":144,"_163":482,"_165":117,"_105":483,"_100":484,"_167":188,"_169":485,"_170":22,"_171":-5,"_172":486,"_99":487},"d9b20db4-eea8-11f0-9126-42dde27851f2","RecipeForm.tsx","b8ea08ee-d3a9-11f0-8d63-42dde27851f2",228,["D",1768106942250],14,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Recipe, CreateRecipeRequest, ParsedRecipeFromUrl, FDCDataType, FDCSearchResult, CreateRecipeIngredient, FDCFood, StarredIngredient } from \"../../shared/types.ts\";\nimport { COMMON_UNITS, NUTRIENT_INFO } from \"../../shared/types.ts\";\n\ninterface FormIngredient {\n amount: string;\n unit: string;\n name: string;\n notes: string;\n // FDC linking\n fdcId: number | null;\n fdcDescription: string | null;\n fdcDataType: FDCDataType | null;\n}\n\ninterface RecipeFormProps {\n recipe?: Recipe;\n importedRecipe?: ParsedRecipeFromUrl | null;\n onSubmit: (data: CreateRecipeRequest) => Promise;\n onClose: () => void;\n}\n\n// Helper to initialize form state from either recipe or importedRecipe\nfunction getInitialIngredients(recipe?: Recipe, importedRecipe?: ParsedRecipeFromUrl | null): FormIngredient[] {\n if (importedRecipe?.ingredients?.length) {\n return importedRecipe.ingredients.map(i => ({\n amount: i.amount?.toString() || '',\n unit: i.unit || '',\n name: i.name,\n notes: i.notes || '',\n fdcId: null,\n fdcDescription: null,\n fdcDataType: null,\n }));\n }\n if (recipe?.ingredients?.length) {\n return recipe.ingredients.map(i => ({\n amount: i.amount?.toString() || '',\n unit: i.unit || '',\n name: i.name,\n notes: i.notes || '',\n fdcId: i.fdcId ?? null,\n fdcDescription: i.fdcDescription ?? null,\n fdcDataType: i.fdcDataType ?? null,\n }));\n }\n return [{ amount: '', unit: '', name: '', notes: '', fdcId: null, fdcDescription: null, fdcDataType: null }];\n}\n\nexport function RecipeForm({ recipe, importedRecipe, onSubmit, onClose }: RecipeFormProps) {\n // Store initial values for dirty checking\n const initialTitle = importedRecipe?.title || recipe?.title || '';\n const initialUrl = importedRecipe?.url || recipe?.url || '';\n const initialServingSize = importedRecipe?.servingSize?.toString() || recipe?.servingSize?.toString() || '1';\n const initialInstructions = importedRecipe?.instructions || recipe?.instructions || '';\n\n const [title, setTitle] = useState(initialTitle);\n const [url, setUrl] = useState(initialUrl);\n const [servingSize, setServingSize] = useState(initialServingSize);\n const [instructions, setInstructions] = useState(initialInstructions);\n const [ingredients, setIngredients] = useState(\n getInitialIngredients(recipe, importedRecipe)\n );\n const [submitting, setSubmitting] = useState(false);\n\n // Exit confirmation state\n const [showExitConfirm, setShowExitConfirm] = useState(false);\n\n // Track unmatched ingredients for passive alert\n const [unmatchedIngredients, setUnmatchedIngredients] = useState([]);\n\n // Import from URL state\n const [showImportUrl, setShowImportUrl] = useState(false);\n const [importUrl, setImportUrl] = useState('');\n const [importLoading, setImportLoading] = useState(false);\n const [importError, setImportError] = useState(null);\n\n // FDC search modal state\n const [fdcSearchOpen, setFdcSearchOpen] = useState(false);\n const [fdcSearchIndex, setFdcSearchIndex] = useState(null);\n const [fdcSearchQuery, setFdcSearchQuery] = useState('');\n const [fdcSearchLoading, setFdcSearchLoading] = useState(false);\n\n // Tabbed search results\n const [fdcActiveTab, setFdcActiveTab] = useState<'starred' | 'foundation' | 'branded'>('starred');\n const [fdcFoundationResults, setFdcFoundationResults] = useState([]);\n\n // Starred ingredients\n const [starredIngredients, setStarredIngredients] = useState([]);\n const [starredLoading, setStarredLoading] = useState(false);\n const [starredLoaded, setStarredLoaded] = useState(false);\n\n // Food detail view state\n const [fdcDetailFood, setFdcDetailFood] = useState(null);\n const [fdcDetailLoading, setFdcDetailLoading] = useState(false);\n const [fdcDetailSearchResult, setFdcDetailSearchResult] = useState(null);\n const [fdcDetailError, setFdcDetailError] = useState(null);\n const [showFdcMicronutrients, setShowFdcMicronutrients] = useState(false);\n\n // Check if form has unsaved changes\n const hasUnsavedChanges = () => {\n if (title !== initialTitle) return true;\n if (url !== initialUrl) return true;\n if (servingSize !== initialServingSize) return true;\n if (instructions !== initialInstructions) return true;\n // Check if any ingredient has content\n const hasIngredientContent = ingredients.some(i => i.name.trim() || i.amount || i.notes.trim());\n if (hasIngredientContent) return true;\n return false;\n };\n\n // Handle close attempt (backdrop click or X button)\n const handleCloseAttempt = () => {\n if (hasUnsavedChanges()) {\n setShowExitConfirm(true);\n } else {\n onClose();\n }\n };\n const [fdcBrandedResults, setFdcBrandedResults] = useState([]);\n\n const addIngredient = () => {\n setIngredients([...ingredients, { amount: '', unit: '', name: '', notes: '', fdcId: null, fdcDescription: null, fdcDataType: null }]);\n };\n\n const removeIngredient = (index: number) => {\n setIngredients(ingredients.filter((_, i) => i !== index));\n };\n\n const updateIngredient = (index: number, field: keyof FormIngredient, value: any) => {\n const updated = [...ingredients];\n (updated[index] as any)[field] = value;\n setIngredients(updated);\n };\n\n // Load starred ingredients\n const loadStarredIngredients = async () => {\n if (starredLoaded) return;\n setStarredLoading(true);\n try {\n const response = await fetch('/api/fdc/starred');\n const result = await response.json();\n if (result.success) {\n setStarredIngredients(result.data);\n setStarredLoaded(true);\n }\n } catch (error) {\n console.error('Failed to load starred ingredients:', error);\n } finally {\n setStarredLoading(false);\n }\n };\n\n // Load starred ingredients on mount\n useEffect(() => {\n loadStarredIngredients();\n }, []);\n\n // Star an ingredient\n const starIngredient = async (food: FDCSearchResult | FDCFood) => {\n try {\n const response = await fetch('/api/fdc/starred', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n fdcId: food.fdcId,\n fdcDescription: food.description,\n fdcDataType: food.dataType,\n brandOwner: food.brandOwner || null,\n }),\n });\n const result = await response.json();\n if (result.success) {\n setStarredIngredients(prev => [result.data, ...prev]);\n }\n } catch (error) {\n console.error('Failed to star ingredient:', error);\n }\n };\n\n // Unstar an ingredient\n const unstarIngredient = async (fdcId: number) => {\n try {\n const response = await fetch(`/api/fdc/starred/${fdcId}`, { method: 'DELETE' });\n const result = await response.json();\n if (result.success) {\n setStarredIngredients(prev => prev.filter(s => s.fdcId !== fdcId));\n }\n } catch (error) {\n console.error('Failed to unstar ingredient:', error);\n }\n };\n\n // Check if an ingredient is starred\n const isStarred = (fdcId: number): boolean => {\n return starredIngredients.some(s => s.fdcId === fdcId);\n };\n\n // Open FDC search modal for an ingredient\n const openFdcSearch = (index: number) => {\n setFdcSearchIndex(index);\n setFdcSearchQuery(ingredients[index].name);\n setFdcFoundationResults([]);\n setFdcBrandedResults([]);\n setFdcActiveTab('starred'); // Start with starred tab\n setFdcDetailFood(null);\n setFdcDetailSearchResult(null);\n setFdcSearchOpen(true);\n };\n\n // Search FDC foods with categorized results\n const handleFdcSearch = async () => {\n if (!fdcSearchQuery.trim()) return;\n\n setFdcSearchLoading(true);\n try {\n const response = await fetch(`/api/fdc/search-categorized?query=${encodeURIComponent(fdcSearchQuery)}&pageSize=15`);\n const result = await response.json();\n\n if (result.success) {\n setFdcFoundationResults(result.data.foundation || []);\n setFdcBrandedResults(result.data.branded || []);\n }\n } catch (error) {\n console.error('FDC search failed:', error);\n } finally {\n setFdcSearchLoading(false);\n }\n };\n\n // View food details before selecting\n const viewFoodDetails = async (searchResult: FDCSearchResult) => {\n setFdcDetailLoading(true);\n setFdcDetailSearchResult(searchResult);\n setFdcDetailError(null);\n try {\n const response = await fetch(`/api/fdc/food/${searchResult.fdcId}`);\n const result = await response.json();\n\n if (result.success) {\n setFdcDetailFood(result.data);\n } else {\n // Handle error (e.g., 404 - food not found)\n setFdcDetailError(result.error || 'This food is no longer available in the USDA database.');\n setFdcDetailFood(null);\n }\n } catch (error) {\n console.error('Failed to fetch food details:', error);\n setFdcDetailError('Failed to load food details. Please try again.');\n setFdcDetailFood(null);\n } finally {\n setFdcDetailLoading(false);\n }\n };\n\n // Go back from detail view to search results\n const backToSearchResults = () => {\n setFdcDetailFood(null);\n setFdcDetailSearchResult(null);\n setFdcDetailError(null);\n setShowFdcMicronutrients(false);\n };\n\n // Select food from detail view\n const selectFoodFromDetail = () => {\n if (fdcDetailSearchResult) {\n selectFdcFood(fdcDetailSearchResult);\n setFdcDetailFood(null);\n setFdcDetailSearchResult(null);\n }\n };\n\n // Count micronutrients that have data\n const countMicronutrients = (food: FDCFood): number => {\n const micronutrientKeys = [\n 'potassium', 'calcium', 'iron', 'magnesium', 'zinc',\n 'vitaminA', 'vitaminC', 'vitaminD', 'vitaminE', 'vitaminK',\n 'vitaminB6', 'vitaminB12', 'thiamin', 'riboflavin', 'niacin', 'folate'\n ] as const;\n\n return micronutrientKeys.filter(key => food.nutrition[key] !== null).length;\n };\n\n // Format nutrient value with appropriate precision\n const formatNutrientValue = (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 if (unit === 'mg') return value.toFixed(1);\n return value.toFixed(1);\n };\n\n // Select an FDC food for an ingredient\n const selectFdcFood = (food: FDCSearchResult | StarredIngredient) => {\n if (fdcSearchIndex === null) return;\n\n const updated = [...ingredients];\n updated[fdcSearchIndex].fdcId = food.fdcId;\n updated[fdcSearchIndex].fdcDescription = food.fdcDescription ?? (food as FDCSearchResult).description;\n updated[fdcSearchIndex].fdcDataType = food.fdcDataType ?? (food as FDCSearchResult).dataType;\n setIngredients(updated);\n\n // Remove from unmatched if it was there\n setUnmatchedIngredients(prev => prev.filter(name => name !== updated[fdcSearchIndex].name));\n\n setFdcSearchOpen(false);\n setFdcSearchIndex(null);\n };\n\n // Select a starred ingredient directly (quick select)\n const selectStarredIngredient = (starred: StarredIngredient) => {\n if (fdcSearchIndex === null) return;\n\n const updated = [...ingredients];\n updated[fdcSearchIndex].fdcId = starred.fdcId;\n updated[fdcSearchIndex].fdcDescription = starred.fdcDescription;\n updated[fdcSearchIndex].fdcDataType = starred.fdcDataType;\n setIngredients(updated);\n\n // Remove from unmatched if it was there\n setUnmatchedIngredients(prev => prev.filter(name => name !== updated[fdcSearchIndex].name));\n\n setFdcSearchOpen(false);\n setFdcSearchIndex(null);\n };\n\n // Clear FDC link from an ingredient\n const clearFdcLink = (index: number) => {\n const updated = [...ingredients];\n updated[index].fdcId = null;\n updated[index].fdcDescription = null;\n updated[index].fdcDataType = null;\n setIngredients(updated);\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 const imported: ParsedRecipeFromUrl = result.data;\n\n // Update form fields with imported data\n setTitle(imported.title);\n setUrl(imported.url);\n setServingSize(imported.servingSize?.toString() || '1');\n setInstructions(imported.instructions || '');\n setIngredients(\n imported.ingredients.map(i => ({\n amount: i.amount?.toString() || '',\n unit: i.unit || '',\n name: i.name,\n notes: i.notes || '',\n fdcId: null,\n fdcDescription: null,\n fdcDataType: null,\n }))\n );\n\n // Clear unmatched state\n setUnmatchedIngredients([]);\n\n // Close import section\n setShowImportUrl(false);\n setImportUrl('');\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 handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n if (!title.trim()) return;\n\n setSubmitting(true);\n\n try {\n // Get ingredient names that don't have FDC links\n const unmatchedNames = ingredients\n .filter(i => i.name.trim() && !i.fdcId)\n .map(i => i.name.trim());\n\n let updatedIngredients = [...ingredients];\n const stillUnmatched: string[] = [];\n\n // Auto-match unlinked ingredients from Foundation Foods\n if (unmatchedNames.length > 0) {\n try {\n const matchResponse = await fetch('/api/fdc/auto-match-batch', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ ingredientNames: unmatchedNames }),\n });\n\n const matchResult = await matchResponse.json();\n\n if (matchResult.success) {\n // Apply matches to ingredients\n for (let i = 0; i < updatedIngredients.length; i++) {\n const ing = updatedIngredients[i];\n const name = ing.name.trim();\n\n if (name && !ing.fdcId && matchResult.data[name]) {\n const matchData = matchResult.data[name];\n if (matchData.match) {\n updatedIngredients[i] = {\n ...ing,\n fdcId: matchData.match.fdcId,\n fdcDescription: matchData.match.description,\n fdcDataType: matchData.match.dataType,\n };\n } else {\n stillUnmatched.push(name);\n }\n } else if (name && !ing.fdcId) {\n stillUnmatched.push(name);\n }\n }\n }\n } catch (error) {\n console.error('Auto-match failed:', error);\n // Continue with submission even if auto-match fails\n }\n }\n\n // Update state with matched ingredients\n setIngredients(updatedIngredients);\n setUnmatchedIngredients(stillUnmatched);\n\n // Build the recipe data\n const data: CreateRecipeRequest = {\n title: title.trim(),\n url: url.trim() || null,\n servingSize: parseInt(servingSize) || 1,\n instructions: instructions.trim() || null,\n ingredients: updatedIngredients\n .filter(i => i.name.trim())\n .map(i => ({\n name: i.name.trim(),\n amount: i.amount ? parseFloat(i.amount) : null,\n unit: i.unit.trim() || null,\n notes: i.notes.trim() || null,\n fdcId: i.fdcId,\n fdcDescription: i.fdcDescription,\n fdcDataType: i.fdcDataType,\n } as CreateRecipeIngredient)),\n };\n\n await onSubmit(data);\n } finally {\n setSubmitting(false);\n }\n };\n\n // Count linked ingredients\n const linkedCount = ingredients.filter(i => i.fdcId !== null).length;\n const totalCount = ingredients.filter(i => i.name.trim()).length;\n\n // Get current tab results\n const currentTabResults = fdcActiveTab === 'foundation' ? fdcFoundationResults : fdcBrandedResults;\n\n return (\n

\n e.stopPropagation()}\n >\n

\n {/* Header */}\n

\n {recipe ? 'Edit Recipe' : 'Add Recipe'}\n

\n \n \n \n

\n\n {/* Body */}\n

\n {/* Import from URL section - only show when not editing */}\n {!recipe && (\n

\n setShowImportUrl(!showImportUrl)}\n className=\"text-sm font-medium flex items-center gap-2 mb-2\"\n style={{ color: 'var(--accent)' }}\n >\n \n Import from URL\n \n\n {showImportUrl && (\n

\n Paste a recipe URL to auto-fill the form with ingredients and instructions.\n

\n setImportUrl(e.target.value)}\n placeholder=\"https://www.example.com/recipe/...\"\n className=\"input flex-1\"\n disabled={importLoading}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n handleImportFromUrl();\n }\n }}\n />\n \n {importLoading ? (\n <>\n \n Importing...\n \n ) : (\n 'Import'\n )}\n \n

\n {importError && (\n

\n {importError}\n

\n )}\n

\n )}\n\n {/* Passive alert for unmatched ingredients */}\n {unmatchedIngredients.length > 0 && (\n

\n \n

\n {unmatchedIngredients.length} ingredient(s) need manual linking:{' '}\n {unmatchedIngredients.join(', ')}. Click \"Link to USDA food\" to search manually.\n

\n )}\n\n {/* Title */}\n

\n \n Recipe Title *\n \n setTitle(e.target.value)}\n className=\"input\"\n placeholder=\"e.g., Chicken Stir Fry\"\n required\n />\n

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

\n \n Recipe URL (optional)\n \n setUrl(e.target.value)}\n className=\"input\"\n placeholder=\"https://...\"\n />\n

\n\n {/* Serving size */}\n

\n \n Serving Size\n \n setServingSize(e.target.value)}\n className=\"input w-32\"\n min=\"1\"\n />\n

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

\n \n Ingredients\n \n {totalCount > 0 && (\n \n {linkedCount}/{totalCount} linked to USDA\n \n )}\n

\n {ingredients.map((ing, index) => (\n

\n {/* Amount */}\n updateIngredient(index, 'amount', e.target.value)}\n className=\"input flex-shrink-0\"\n style={{ width: '4rem' }}\n placeholder=\"Amt\"\n />\n {/* Unit */}\n updateIngredient(index, 'unit', e.target.value)}\n className=\"input flex-shrink-0\"\n style={{ width: '5rem' }}\n >\n \n {COMMON_UNITS.map(u => (\n \n ))}\n \n {/* Name */}\n updateIngredient(index, 'name', e.target.value)}\n className=\"input flex-1 min-w-0\"\n style={{ minWidth: '120px' }}\n placeholder=\"Ingredient name\"\n />\n {/* Notes */}\n updateIngredient(index, 'notes', e.target.value)}\n className=\"input flex-shrink-0 text-sm text-gray-500\"\n style={{ width: '6rem' }}\n placeholder=\"Notes\"\n />\n {/* Remove button */}\n {ingredients.length > 1 && (\n removeIngredient(index)}\n className=\"text-gray-400 hover:text-red-500 transition-colors flex-shrink-0 p-1\"\n >\n \n \n )}\n

\n\n {/* FDC Link Row */}\n

\n {ing.fdcId ? (\n <>\n \n \n {ing.fdcDataType === 'Branded' ? 'Branded' : 'Foundation'}\n \n \n {ing.fdcDescription}\n \n clearFdcLink(index)}\n className=\"text-xs text-gray-400 hover:text-red-500\"\n >\n Clear\n \n openFdcSearch(index)}\n className=\"text-xs text-blue-600 hover:text-blue-800\"\n >\n Change\n \n \n ) : (\n openFdcSearch(index)}\n className=\"text-xs flex items-center gap-1 text-blue-600 hover:text-blue-800\"\n >\n \n Link to USDA food for nutrition\n \n )}\n

\n ))}\n

\n \n \n Add ingredient\n \n

\n\n {/* Instructions */}\n

\n \n Instructions (optional)\n \n setInstructions(e.target.value)}\n className=\"input min-h-[100px] resize-y\"\n placeholder=\"Enter cooking instructions...\"\n />\n

\n\n {/* Nutrition info note */}\n

\n Nutrition is calculated automatically from linked ingredients using USDA FoodData Central.\n Ingredients are auto-matched to Foundation Foods when you save. Link all ingredients to get complete nutrition information.\n

\n\n {/* Footer */}\n

\n \n Cancel\n \n \n {submitting ? 'Saving...' : (recipe ? 'Save Changes' : 'Add Recipe')}\n \n

\n\n {/* Exit Confirmation Dialog */}\n {showExitConfirm && (\n setShowExitConfirm(false)}\n >\n e.stopPropagation()}\n >\n

\n \n

Unsaved Changes

\n You have unsaved changes. What would you like to do?\n

\n {\n setShowExitConfirm(false);\n // Trigger form submission\n const form = document.querySelector('form');\n if (form) {\n form.requestSubmit();\n }\n }}\n className=\"btn-primary w-full flex items-center justify-center gap-2\"\n disabled={!title.trim()}\n >\n \n Save & Exit\n \n {\n setShowExitConfirm(false);\n onClose();\n }}\n className=\"btn-secondary w-full flex items-center justify-center gap-2 text-red-600 border-red-200 hover:bg-red-50\"\n >\n \n Discard & Exit\n \n setShowExitConfirm(false)}\n className=\"btn-secondary w-full flex items-center justify-center gap-2\"\n >\n \n Go Back\n \n

\n \n \n )}\n\n {/* FDC Search Modal with Tabs */}\n {fdcSearchOpen && (\n setFdcSearchOpen(false)}\n >\n e.stopPropagation()}\n >\n

Search USDA Foods

\n Find a food to link for nutrition data\n

\n\n

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

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

\n setFdcActiveTab('starred')}\n className=\"flex-1 px-4 py-3 text-sm font-medium transition-colors\"\n style={fdcActiveTab === 'starred'\n ? { color: 'var(--accent)', borderBottom: '2px solid var(--accent)', background: 'var(--bg-tertiary)' }\n : { color: 'var(--text-secondary)' }}\n >\n ★ Starred\n {starredIngredients.length > 0 && (\n \n {starredIngredients.length}\n \n )}\n \n setFdcActiveTab('foundation')}\n className=\"flex-1 px-4 py-3 text-sm font-medium transition-colors\"\n style={fdcActiveTab === 'foundation'\n ? { color: 'var(--accent)', borderBottom: '2px solid var(--accent)', background: 'var(--bg-tertiary)' }\n : { color: 'var(--text-secondary)' }}\n >\n Foundation\n {fdcFoundationResults.length > 0 && (\n \n {fdcFoundationResults.length}\n \n )}\n \n setFdcActiveTab('branded')}\n className=\"flex-1 px-4 py-3 text-sm font-medium transition-colors\"\n style={fdcActiveTab === 'branded'\n ? { color: 'var(--accent)', borderBottom: '2px solid var(--accent)', background: 'var(--bg-tertiary)' }\n : { color: 'var(--text-secondary)' }}\n >\n Branded\n {fdcBrandedResults.length > 0 && (\n \n {fdcBrandedResults.length}\n \n )}\n \n

\n\n

\n {/* Starred Ingredients Tab */}\n {fdcActiveTab === 'starred' && !fdcDetailFood && !fdcDetailLoading && (\n

\n {starredLoading ? (\n

\n \n

\n ) : starredIngredients.length === 0 ? (\n

⭐

No starred ingredients yet

\n Star your commonly used ingredients from the search results for quick access\n

\n ) : (\n

\n {starredIngredients.map((starred) => (\n \n unstarIngredient(starred.fdcId)}\n className=\"text-amber-500 hover:text-amber-600 flex-shrink-0\"\n title=\"Unstar\"\n >\n \n \n selectStarredIngredient(starred)}\n className=\"flex-1 text-left min-w-0\"\n >\n

{starred.fdcDescription}

\n \n {starred.fdcDataType}\n \n {starred.brandOwner && (\n {starred.brandOwner}\n )}\n

\n \n \n

\n ))}\n

\n )}\n

\n )}\n\n {/* Food Detail View */}\n {(fdcDetailFood || fdcDetailLoading || fdcDetailError) && (\n

\n {fdcDetailLoading ? (\n

\n \n

\n ) : fdcDetailError ? (\n

\n \n

Food Unavailable

\n {fdcDetailError}\n

\n \n ← Back to search results\n \n

\n ) : fdcDetailFood && (\n

\n {/* Food Header */}\n

{fdcDetailFood.description}

\n \n {fdcDetailFood.dataType}\n \n {fdcDetailFood.brandOwner && (\n {fdcDetailFood.brandOwner}\n )}\n

\n {fdcDetailFood.householdServingText && (\n

\n Serving: {fdcDetailFood.householdServingText}\n {fdcDetailFood.servingSize && fdcDetailFood.servingSizeUnit &&\n ` (${fdcDetailFood.servingSize}${fdcDetailFood.servingSizeUnit})`\n }\n

\n )}\n

\n\n {/* Nutrition Facts */}\n

Nutrition Facts

\n\n {/* Header Row */}\n

Per 100g

\n {fdcDetailFood.servingSize && fdcDetailFood.servingSizeUnit\n ? `Per Serving (${fdcDetailFood.servingSize}${fdcDetailFood.servingSizeUnit})`\n : 'Per Serving'\n }\n

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

\n {/* Calories */}\n

Calories

\n {fdcDetailFood.nutrition.calories !== null\n ? `${Math.round(fdcDetailFood.nutrition.calories)} kcal`\n : '—'}\n

\n {fdcDetailFood.nutrition.calories !== null && fdcDetailFood.servingSize\n ? `${Math.round(fdcDetailFood.nutrition.calories * fdcDetailFood.servingSize / 100)} kcal`\n : fdcDetailFood.nutrition.calories !== null ? `${Math.round(fdcDetailFood.nutrition.calories)} kcal` : '—'}\n

\n\n

\n\n {/* Protein */}\n

Protein

\n {fdcDetailFood.nutrition.protein !== null\n ? `${fdcDetailFood.nutrition.protein.toFixed(1)}g`\n : '—'}\n

\n {fdcDetailFood.nutrition.protein !== null && fdcDetailFood.servingSize\n ? `${(fdcDetailFood.nutrition.protein * fdcDetailFood.servingSize / 100).toFixed(1)}g`\n : fdcDetailFood.nutrition.protein !== null ? `${fdcDetailFood.nutrition.protein.toFixed(1)}g` : '—'}\n

\n\n {/* Fat */}\n

Fat

\n {fdcDetailFood.nutrition.fat !== null\n ? `${fdcDetailFood.nutrition.fat.toFixed(1)}g`\n : '—'}\n

\n {fdcDetailFood.nutrition.fat !== null && fdcDetailFood.servingSize\n ? `${(fdcDetailFood.nutrition.fat * fdcDetailFood.servingSize / 100).toFixed(1)}g`\n : fdcDetailFood.nutrition.fat !== null ? `${fdcDetailFood.nutrition.fat.toFixed(1)}g` : '—'}\n

\n\n {/* Carbs */}\n

Carbohydrates

\n {fdcDetailFood.nutrition.carbs !== null\n ? `${fdcDetailFood.nutrition.carbs.toFixed(1)}g`\n : '—'}\n

\n {fdcDetailFood.nutrition.carbs !== null && fdcDetailFood.servingSize\n ? `${(fdcDetailFood.nutrition.carbs * fdcDetailFood.servingSize / 100).toFixed(1)}g`\n : fdcDetailFood.nutrition.carbs !== null ? `${fdcDetailFood.nutrition.carbs.toFixed(1)}g` : '—'}\n

\n\n {/* Fiber */}\n

Fiber

\n {fdcDetailFood.nutrition.fiber !== null\n ? `${fdcDetailFood.nutrition.fiber.toFixed(1)}g`\n : '—'}\n

\n {fdcDetailFood.nutrition.fiber !== null && fdcDetailFood.servingSize\n ? `${(fdcDetailFood.nutrition.fiber * fdcDetailFood.servingSize / 100).toFixed(1)}g`\n : fdcDetailFood.nutrition.fiber !== null ? `${fdcDetailFood.nutrition.fiber.toFixed(1)}g` : '—'}\n

\n\n

\n\n {/* Sodium */}\n

Sodium

\n {fdcDetailFood.nutrition.sodium !== null\n ? `${Math.round(fdcDetailFood.nutrition.sodium)}mg`\n : '—'}\n

\n {fdcDetailFood.nutrition.sodium !== null && fdcDetailFood.servingSize\n ? `${Math.round(fdcDetailFood.nutrition.sodium * fdcDetailFood.servingSize / 100)}mg`\n : fdcDetailFood.nutrition.sodium !== null ? `${Math.round(fdcDetailFood.nutrition.sodium)}mg` : '—'}\n

\n\n {/* Micronutrients Toggle */}\n

\n setShowFdcMicronutrients(!showFdcMicronutrients)}\n className=\"flex items-center justify-between w-full text-left\"\n >\n

\n Micronutrients available:\n \n {countMicronutrients(fdcDetailFood)} / 16\n \n

\n {showFdcMicronutrients ? 'Hide' : 'Show all'}\n \n \n \n

\n \n\n {/* Expanded Micronutrients */}\n {showFdcMicronutrients && (\n

\n {/* Minerals */}\n {(['sodium', 'potassium', 'calcium', 'iron', 'magnesium', 'zinc', 'phosphorus', 'selenium', 'copper', 'manganese'] as const).some(key => fdcDetailFood.nutrition[key] !== null) && (\n

\n Minerals\n

\n {(['sodium', 'potassium', 'calcium', 'iron', 'magnesium', 'zinc', 'phosphorus', 'selenium', 'copper', 'manganese'] as const).map(key => {\n const info = NUTRIENT_INFO[key];\n const value = fdcDetailFood.nutrition[key];\n if (value === null) return null;\n const servingValue = fdcDetailFood.servingSize ? value * fdcDetailFood.servingSize / 100 : value;\n return (\n

\n {info.label}\n \n {formatNutrientValue(servingValue, info.unit)}{info.unit}\n \n

\n );\n })}\n

\n )}\n\n {/* Vitamins - Fat Soluble */}\n {(['vitaminA', 'vitaminD', 'vitaminE', 'vitaminK'] as const).some(key => fdcDetailFood.nutrition[key] !== null) && (\n

\n Vitamins (Fat-Soluble)\n

\n {(['vitaminA', 'vitaminD', 'vitaminE', 'vitaminK'] as const).map(key => {\n const info = NUTRIENT_INFO[key];\n const value = fdcDetailFood.nutrition[key];\n if (value === null) return null;\n const servingValue = fdcDetailFood.servingSize ? value * fdcDetailFood.servingSize / 100 : value;\n return (\n

\n {info.label}\n \n {formatNutrientValue(servingValue, info.unit)}{info.unit}\n \n

\n );\n })}\n

\n )}\n\n {/* Vitamins - Water Soluble */}\n {(['vitaminC', 'vitaminB6', 'vitaminB12', 'thiamin', 'riboflavin', 'niacin', 'pantothenicAcid', 'folate', 'choline'] as const).some(key => fdcDetailFood.nutrition[key] !== null) && (\n

\n Vitamins (Water-Soluble)\n

\n {(['vitaminC', 'vitaminB6', 'vitaminB12', 'thiamin', 'riboflavin', 'niacin', 'pantothenicAcid', 'folate', 'choline'] as const).map(key => {\n const info = NUTRIENT_INFO[key];\n const value = fdcDetailFood.nutrition[key];\n if (value === null) return null;\n const servingValue = fdcDetailFood.servingSize ? value * fdcDetailFood.servingSize / 100 : value;\n return (\n

\n {info.label}\n \n {formatNutrientValue(servingValue, info.unit)}{info.unit}\n \n

\n );\n })}\n

\n )}\n\n {/* Fats Breakdown */}\n {(['saturatedFat', 'transFat', 'monounsaturatedFat', 'polyunsaturatedFat', 'cholesterol'] as const).some(key => fdcDetailFood.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 = fdcDetailFood.nutrition[key];\n if (value === null) return null;\n const servingValue = fdcDetailFood.servingSize ? value * fdcDetailFood.servingSize / 100 : value;\n return (\n

\n {info.label}\n \n {formatNutrientValue(servingValue, info.unit)}{info.unit}\n \n

\n );\n })}\n

\n )}\n\n {/* Sugars */}\n {(['sugars', 'addedSugars'] as const).some(key => fdcDetailFood.nutrition[key] !== null) && (\n

\n Sugars\n

\n {(['sugars', 'addedSugars'] as const).map(key => {\n const info = NUTRIENT_INFO[key];\n const value = fdcDetailFood.nutrition[key];\n if (value === null) return null;\n const servingValue = fdcDetailFood.servingSize ? value * fdcDetailFood.servingSize / 100 : value;\n return (\n

\n {info.label}\n \n {formatNutrientValue(servingValue, info.unit)}{info.unit}\n \n

\n );\n })}\n

\n )}\n

\n\n {/* Action Buttons */}\n

\n {/* Star/Unstar Button */}\n {isStarred(fdcDetailFood.fdcId) ? (\n unstarIngredient(fdcDetailFood.fdcId)}\n className=\"w-full py-2 px-4 rounded-lg border border-amber-300 bg-amber-50 text-amber-700 font-medium text-sm flex items-center justify-center gap-2 hover:bg-amber-100 transition-colors\"\n >\n \n Remove from Starred\n \n ) : (\n starIngredient(fdcDetailFood)}\n className=\"w-full py-2 px-4 rounded-lg border border-gray-300 bg-white text-gray-700 font-medium text-sm flex items-center justify-center gap-2 hover:bg-amber-50 hover:border-amber-300 hover:text-amber-700 transition-colors\"\n >\n \n Add to Starred\n \n )}\n\n

\n \n \n Back\n \n \n \n Select This Food\n \n

\n )}\n

\n )}\n\n {/* Search Results List (Foundation/Branded tabs only) */}\n {fdcActiveTab !== 'starred' && !fdcDetailFood && !fdcDetailLoading && (\n currentTabResults.length === 0 ? (\n

\n {fdcSearchLoading ? 'Searching...' : 'Enter a search term and click Search'}\n

\n ) : (\n

\n {currentTabResults.map((food) => (\n \n {/* Star button */}\n {\n e.stopPropagation();\n if (isStarred(food.fdcId)) {\n unstarIngredient(food.fdcId);\n } else {\n starIngredient(food);\n }\n }}\n className={`flex-shrink-0 ${isStarred(food.fdcId) ? 'text-amber-500' : 'text-gray-300 hover:text-amber-400'}`}\n title={isStarred(food.fdcId) ? 'Unstar' : 'Add to starred'}\n >\n \n \n\n viewFoodDetails(food)}\n className=\"flex-1 text-left min-w-0\"\n >\n

{food.description}

\n \n {food.dataType}\n \n {food.micronutrientCount !== null && (\n = 12\n ? 'bg-emerald-100 text-emerald-700'\n : food.micronutrientCount >= 6\n ? 'bg-amber-100 text-amber-700'\n : 'bg-gray-100 text-gray-600'\n }`} title=\"Micronutrients available\">\n 🧬 {food.micronutrientCount}/16\n \n )}\n {food.brandOwner && (\n {food.brandOwner}\n )}\n

\n \n

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

\n setFdcSearchOpen(false)}\n className=\"btn-secondary w-full\"\n >\n Cancel\n \n

\n \n \n )}\n \n );\n}\n",[],[341,347,480],{"_103":489,"_96":490,"_159":491,"_161":348,"_162":144,"_163":492,"_165":117,"_105":493,"_100":198,"_167":188,"_169":494,"_170":22,"_171":-5,"_172":495,"_99":496},"1173ee84-eeae-11f0-b2bd-42dde27851f2","RecipesView.tsx","b8e58968-d3a9-11f0-a23f-42dde27851f2",233,["D",1768109183278],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Recipe, CreateRecipeRequest, ParsedRecipeFromUrl, CustomFood, CreateCustomFoodRequest, RecipeIngredient } from \"../../shared/types.ts\";\nimport { RecipeForm } from \"./RecipeForm.tsx\";\nimport { CustomFoodForm } from \"./CustomFoodForm.tsx\";\nimport { NutritionSection } from \"./NutritionSection.tsx\";\nimport { IngredientNutritionModal } from \"./IngredientNutritionModal.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\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 // 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 // Ingredient nutrition modal state\n const [selectedIngredient, setSelectedIngredient] = useState(null);\n const [selectedIngredientServingSize, setSelectedIngredientServingSize] = useState(1);\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 // Handle clicking on a linked ingredient to view its nutrition\n const handleIngredientClick = (ingredient: RecipeIngredient, recipeServingSize: number) => {\n if (!ingredient.fdcId) return;\n setSelectedIngredient(ingredient);\n setSelectedIngredientServingSize(recipeServingSize);\n };\n\n const closeIngredientModal = () => {\n setSelectedIngredient(null);\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.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 {/* Nutrition details */}\n \n\n {/* Ingredients */}\n

\n Ingredients\n \n (click linked items for nutrition)\n \n

\n \n
\n {ing.fdcId ? (\n handleIngredientClick(ing, recipe.servingSize)}\n className=\"text-left hover:underline inline-flex items-center gap-1 group\"\n style={{ color: 'var(--text-secondary)' }}\n >\n \n {ing.amount && {ing.amount} }\n {ing.unit && {ing.unit} }\n {ing.name}\n \n {ing.notes && (\n ({ing.notes})\n )}\n \n \n [{ing.fdcDataType === 'Branded' ? 'B' : 'USDA'}]\n \n \n ) : (\n \n {ing.amount && {ing.amount} }\n {ing.unit && {ing.unit} }\n {ing.name}\n {ing.notes && (\n ({ing.notes})\n )}\n \n )}\n
\n

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

Instructions

{recipe.instructions}

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

\n setEditingRecipe(recipe)}\n className=\"btn-secondary text-sm flex-1\"\n >\n Edit\n \n handleDuplicate(recipe.id)}\n disabled={duplicatingRecipeId !== null}\n className=\"btn-secondary text-sm flex-1 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {duplicatingRecipeId === recipe.id ? 'Duplicating...' : 'Duplicate'}\n \n handleDelete(recipe.id)}\n disabled={deletingRecipeId !== null}\n className=\"btn-secondary text-sm text-red-600 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {deletingRecipeId === recipe.id ? 'Deleting...' : 'Delete'}\n \n

\n )}\n

\n );\n })}\n

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

\n 🍎\n

\n {searchQuery ? 'No custom foods found' : 'No custom foods yet'}\n

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

\n ) : (\n

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

{food.name}

\n Per {food.servingSizeGrams}g serving\n

\n \n Custom\n \n

\n \n {/* Nutrition preview */}\n

\n {food.calories !== null && (\n \n {Math.round(food.calories)} kcal\n \n )}\n {food.protein !== null && (\n \n {Math.round(food.protein)}g protein\n \n )}\n {food.carbs !== null && (\n \n {Math.round(food.carbs)}g carbs\n \n )}\n {food.fat !== null && (\n \n {Math.round(food.fat)}g fat\n \n )}\n

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

\n setEditingCustomFood(food)}\n className=\"btn-secondary text-sm flex-1\"\n >\n Edit\n \n handleDeleteCustomFood(food.id)}\n disabled={deletingCustomFoodId !== null}\n className=\"btn-secondary text-sm text-red-600 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {deletingCustomFoodId === food.id ? 'Deleting...' : 'Delete'}\n \n

\n ))}\n

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

\n \n {/* Import from URL modal */}\n {showImportModal && (\n

setShowImportModal(false)}>\n e.stopPropagation()}\n >\n

Import from URL

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

\n \n

\n Paste a recipe URL to automatically extract ingredients and instructions. You'll need to link ingredients to USDA foods for nutrition data.\n

\n \n setImportUrl(e.target.value)}\n placeholder=\"https://www.example.com/recipe/...\"\n className=\"input w-full mb-4\"\n disabled={importLoading}\n onKeyDown={(e) => {\n if (e.key === 'Enter' && !importLoading) {\n handleImportFromUrl();\n }\n }}\n />\n \n {importError && (\n

\n {importError}\n

\n )}\n \n

\n setShowImportModal(false)}\n className=\"btn-secondary flex-1\"\n disabled={importLoading}\n >\n Cancel\n \n \n {importLoading ? (\n <>\n \n Importing...\n \n ) : (\n 'Import'\n )}\n \n

\n \n )}\n \n {/* Create recipe modal */}\n {showForm && (\n \n )}\n \n {/* Edit recipe modal */}\n {editingRecipe && (\n setEditingRecipe(null)}\n />\n )}\n \n {/* Create custom food modal */}\n {showCustomFoodForm && (\n setShowCustomFoodForm(false)}\n />\n )}\n \n {/* Edit custom food modal */}\n {editingCustomFood && (\n setEditingCustomFood(null)}\n />\n )}\n \n {/* Ingredient nutrition modal */}\n {selectedIngredient && (\n \n )}\n \n );\n}\n",[],[341,347,490],{"_103":498,"_96":499,"_159":500,"_161":348,"_162":144,"_163":501,"_165":117,"_105":502,"_100":225,"_167":188,"_169":503,"_170":22,"_171":-5,"_172":504,"_99":505},"22826d4a-e797-11f0-992e-42dde27851f2","ScraperEvalView.tsx","0850829e-d91f-11f0-bf8f-42dde27851f2",203,["D",1767329675344],"/** @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",[],[341,347,499],{"_103":507,"_96":508,"_159":509,"_161":348,"_162":144,"_163":510,"_165":117,"_105":511,"_100":32,"_167":188,"_169":512,"_170":22,"_171":-5,"_172":513,"_99":514},"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",[],[341,347,508],{"_103":516,"_96":517,"_159":518,"_161":348,"_162":144,"_163":519,"_165":117,"_105":520,"_100":32,"_167":188,"_169":521,"_170":22,"_171":-5,"_172":522,"_99":523},"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",[],[341,347,517],{"_103":525,"_96":526,"_159":527,"_161":348,"_162":144,"_163":528,"_165":117,"_105":529,"_100":32,"_167":188,"_169":530,"_170":22,"_171":-5,"_172":531,"_99":532},"9268a86c-e793-11f0-aabf-42dde27851f2","UserDropdown.tsx","9268a948-e793-11f0-aabf-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",[],[341,347,526],[341,347],{"_103":535,"_96":536,"_159":537,"_161":342,"_162":144,"_163":538,"_165":117,"_105":539,"_100":216,"_167":540,"_169":541,"_170":22,"_171":-5,"_172":542,"_99":543},"8307e934-e13d-11f0-b455-42dde27851f2","favicon.svg","b8f8fbb0-d3a9-11f0-897f-42dde27851f2",155,["D",1766631475442],"file","\n\n\n\n\n",[],[341,536],{"_103":545,"_96":546,"_159":547,"_161":342,"_162":144,"_163":548,"_165":117,"_105":549,"_100":253,"_167":540,"_169":550,"_170":22,"_171":-5,"_172":551,"_99":552},"926f71f6-e793-11f0-bf91-42dde27851f2","index.html","b8d03d1a-d3a9-11f0-8004-42dde27851f2",196,["D",1767328145120],"\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",[],[341,546],{"_103":554,"_96":555,"_159":556,"_161":342,"_162":144,"_163":557,"_165":117,"_105":558,"_100":216,"_167":188,"_169":559,"_170":22,"_171":-5,"_172":560,"_99":561},"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",[],[341,555],[341],{"_103":564,"_96":565,"_159":566,"_161":-5,"_162":144,"_163":216,"_165":117,"_105":567,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":568,"_99":579},"b856c354-d3a9-11f0-8e4b-42dde27851f2","shared","b856c412-d3a9-11f0-8e4b-42dde27851f2",["D",1765138634405],[569],{"_103":570,"_96":571,"_159":572,"_161":566,"_162":144,"_163":573,"_165":117,"_105":574,"_100":575,"_167":188,"_169":576,"_170":22,"_171":-5,"_172":577,"_99":578},"efcdfff6-eeb5-11f0-8b42-42dde27851f2","types.ts","b9331f48-d3a9-11f0-a755-42dde27851f2",239,["D",1768112562659],11,"// 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 servings?: number; // Number of servings to add (defaults to recipe's serving size)\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",[],[565,571],[565],{"_103":581,"_96":582,"_159":583,"_161":-5,"_162":144,"_163":438,"_165":117,"_105":584,"_100":32,"_167":540,"_169":585,"_170":22,"_171":-5,"_172":586,"_99":587},"b93ee7d8-d3a9-11f0-b1e3-42dde27851f2",".vtignore","b93ee86e-d3a9-11f0-b1e3-42dde27851f2",["D",1765138635895],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[582],{"_103":589,"_96":590,"_159":591,"_161":-5,"_162":144,"_163":592,"_165":117,"_105":593,"_100":32,"_167":540,"_169":594,"_170":22,"_171":-5,"_172":595,"_99":596},"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",[],[590],{"_103":598,"_96":599,"_159":600,"_161":-5,"_162":144,"_163":601,"_165":117,"_105":602,"_100":32,"_167":540,"_169":603,"_170":22,"_171":-5,"_172":604,"_99":605},"b8fc0cce-d3a9-11f0-a23f-42dde27851f2","deno.json","b8fc0d82-d3a9-11f0-a23f-42dde27851f2",16,["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}",[],[599],"files",[156,174,181,192,203,210,221,228,237,247,257,266,275,284,293,303,310,319,329,339,345,351,360,369,377,386,395,405,414,423,432,442,451,460,469,478,488,497,506,515,524,534,544,553,563,569,580,588,597],"counts",{"_610":32,"_611":243,"_612":32,"_613":614,"_617":618},"pulls","branches","forks","envVars",{"_615":216,"_616":32},"count","emptyCount","connections",{"_615":32,"_619":32},"unfilledCount","contents",[622,625,628,631,634,637],{"_103":157,"_96":158,"_159":160,"_161":-5,"_162":144,"_163":164,"_165":117,"_105":623,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_99":624},["D",1765138634257],[158],{"_103":340,"_96":341,"_159":342,"_161":-5,"_162":144,"_163":243,"_165":117,"_105":626,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_99":627},["D",1765138634122],[341],{"_103":564,"_96":565,"_159":566,"_161":-5,"_162":144,"_163":216,"_165":117,"_105":629,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_99":630},["D",1765138634405],[565],{"_103":581,"_96":582,"_159":583,"_161":-5,"_162":144,"_163":438,"_165":117,"_105":632,"_100":32,"_167":540,"_169":585,"_170":22,"_171":-5,"_99":633},["D",1765138635895],[582],{"_103":589,"_96":590,"_159":591,"_161":-5,"_162":144,"_163":592,"_165":117,"_105":635,"_100":32,"_167":540,"_169":594,"_170":22,"_171":-5,"_99":636},["D",1765138635892],[590],{"_103":598,"_96":599,"_159":600,"_161":-5,"_162":144,"_163":601,"_165":117,"_105":638,"_100":32,"_167":540,"_169":603,"_170":22,"_171":-5,"_99":639},["D",1765138635487],[599],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_94":95,"_96":97,"_101":648,"_613":653,"_672":22},{"_103":104,"_96":97,"_105":649,"_107":-5,"_108":22,"_109":110,"_111":73,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":117,"_119":-5,"_120":32,"_16":121,"_122":-5,"_123":-5,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":650,"_136":651,"_141":652,"_153":22},["D",1765137234131],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":113,"_139":140},{"_100":143,"_96":44,"_103":144,"_145":104,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":97,"_152":95},[654,662,667],{"_655":656,"_105":657,"_658":659,"_111":660,"_661":22},"key","FDC_API_KEY",["D",1765859592133],"updatedAt",["D",1765859834357],"USDA API Key","isEmpty",{"_655":663,"_105":664,"_658":665,"_111":666,"_661":22},"GOOGLE_CLIENT_SECRET",["D",1765139479333],["D",1765139516300],"carmy valtown client secret",{"_655":668,"_105":669,"_658":670,"_111":671,"_661":22},"GOOGLE_CLIENT_ID",["D",1765139456519],["D",1765139505878],"carmy valtown client id","isTeamOrg","actionData","errors"]

shapedlines

carmy

Environment variables