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

= {\n 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],"da457bd0-e9c1-11f0-97e2-42dde27851f2","RecipesView.tsx","b8e58968-d3a9-11f0-a23f-42dde27851f2",208,["D",1767567924833],8,"/** @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.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 · v222