[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_561":562,"_563":564},"routes/_app.x.$handle.$name",{"_98":97,"_32":46,"_106":88,"_27":54,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":60,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",206,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/RecipeForm.tsx","latestPath","fileId","b8ea08ee-d3a9-11f0-8d63-42dde27851f2","name","RecipeForm.tsx","fileType","script","content","/** @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 } 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\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 };\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 // 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: '#0f2763' }}\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 ${fdcActiveTab === 'starred'\n ? 'text-amber-600 border-b-2 border-amber-500 bg-amber-50'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'\n }`}\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 ${fdcActiveTab === 'foundation'\n ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'\n }`}\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 ${fdcActiveTab === 'branded'\n ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'\n }`}\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 Count */}\n

\n Micronutrients available:\n \n {countMicronutrients(fdcDetailFood)} / 16\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","/** @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 } 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\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 };\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 // 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 {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\n {/* FDC Link Row */}\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\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 \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\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

{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\n

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

Protein

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

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

Fat

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

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

Carbohydrates

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

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

Fiber

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

\n\n

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

Sodium

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

\n\n {/* Micronutrients Count */}\n

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

\n\n {/* Action Buttons */}\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

{food.description}

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

Hi

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

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

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

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

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

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

\n )}\n \n \n

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

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

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

\n {user.email}\n

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

\n Appearance\n

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

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

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

\n )}\n

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

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

\n {customMode ? (\n

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

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

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

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

\n \n )}\n

\n )}\n

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

\n Loading saved URLs...\n

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

\n {/* Header */}\n

\n Recipe Scraper Evaluation\n

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

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

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

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

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

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

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

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

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

\n )}\n

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

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

\n Loading...\n

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

\n ❌\n Error\n

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

\n                                  {summary.text}\n

\n )}\n

\n ) : (\n

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

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

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

\n {cellExpanded && (\n

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

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

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

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

Name:

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

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

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

\n •{ing}\n

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

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

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

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

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

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

\n ) : (\n

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

\n )}\n

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

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

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

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

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

🔍

No recipe URLs saved yet

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

\n )}\n

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

\n {/* Header */}\n

Recipes & Foods

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

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

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

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

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

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

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

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

\n 📖\n

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

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

\n ) : (\n

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

{recipe.title}

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

\n \n \n \n

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

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

\n ) : (\n

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

\n )}\n

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

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

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

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

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

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

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

Ingredients

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

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

Instructions

{recipe.instructions}

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

Nutrition (per serving)

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

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

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

kcal

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

protein

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

carbs

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

fat

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

fiber

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

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

\n Fats Breakdown\n

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

Diff · v206