[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_563":564,"_565":566},"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",228,"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: 'var(--accent)' }}\n >\n \n Import from URL\n \n\n {showImportUrl && (\n

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

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

\n {importError && (\n

\n {importError}\n

\n )}\n

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

\n \n

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

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

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

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

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

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

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

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

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

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

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

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

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

\n ))}\n

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

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

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

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

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

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

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

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

\n \n

Unsaved Changes

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

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

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

Search USDA Foods

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

\n\n

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

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

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

\n\n

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

\n {starredLoading ? (\n

\n \n

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

⭐

No starred ingredients yet

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

\n ) : (\n

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

{starred.fdcDescription}

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

\n \n \n

\n ))}\n

\n )}\n

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

\n {fdcDetailLoading ? (\n

\n \n

\n ) : fdcDetailError ? (\n

\n \n

Food Unavailable

\n {fdcDetailError}\n

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

\n ) : fdcDetailFood && (\n

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

{fdcDetailFood.description}

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

\n {fdcDetailFood.householdServingText && (\n

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

\n )}\n

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

Nutrition Facts

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

Per 100g

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

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

\n {/* Calories */}\n

Calories

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

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

\n\n

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

Protein

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

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

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

Fat

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

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

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

Carbohydrates

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

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

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

Fiber

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

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

\n\n

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

Sodium

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

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

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

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

\n {/* Header */}\n

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

\n \n \n \n

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

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

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

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

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

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

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

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

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

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

\n Minerals\n

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