From 6d18839589c2db179f2ebfd4e6463d1faa497801 Mon Sep 17 00:00:00 2001
From: Paul R Kartchner <pkartch@gmail.com>
Date: Sat, 1 Nov 2025 05:09:09 +0000
Subject: [PATCH] feat: unified recipe editing interface with integrated
 ingredient mapping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Major Features

### Unified Edit Interface
- Created new UnifiedEditRecipe component combining recipe editing and ingredient-instruction mapping
- Two-column layout: sticky ingredients panel (left) + instructions with drop zones (right)
- Eliminated need to switch between separate edit and mapping pages

### Ingredient Management
- Multi-select checkboxes for bulk operations
- Inline editing of ingredient amounts, units, and names
- Drag-and-drop ingredients to instruction steps
- Bulk mapping: select multiple ingredients and assign to a step
- Delete selected ingredients in bulk
- Sticky ingredient panel with improved scrolling

### Instruction Editing
- Click-to-edit inline editing for instruction text and timing
- Edit/Delete buttons on each instruction step
- Visual drop zones that highlight when dragging ingredients
- Shows mapped ingredients directly in each step with remove buttons
- Add new instructions with + button

### UI/UX Improvements
- Collapsible recipe details section (compact layout)
- 50/50 column split for balanced view
- Sticky footer with Save/Cancel buttons
- Compact, professional styling from mapping interface
- Smaller image preview (200px)
- Improved form spacing and padding
- Fixed scrolling issues in ingredient panel

### Save Logic Enhancements
- Improved ID matching algorithm using position and content
- Handles newly added ingredients and instructions correctly
- Matches by index position to handle duplicates better
- Two-step fallback matching (index + content, then exact content)
- Better error handling and logging

### Route Changes
- Updated /recipes/:id/edit to use UnifiedEditRecipe
- Removed /recipes/:id/manage-mappings route (no longer needed)
- Updated Cooking Mode button: "Manage Ingredients" → "Edit Recipe"

## Technical Details

- New Files:
  - packages/web/src/pages/UnifiedEditRecipe.tsx (~1000 lines)
  - packages/web/src/styles/UnifiedRecipeEdit.css (~850 lines)

- Modified Files:
  - packages/web/src/App.tsx (removed old mapping route)
  - packages/web/src/pages/CookingMode.tsx (updated button)

- Technologies: React, TypeScript, CSS Grid, Flexbox, Drag & Drop API

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 packages/web/src/App.tsx                      |    6 +-
 packages/web/src/pages/CookingMode.tsx        |    4 +-
 packages/web/src/pages/UnifiedEditRecipe.tsx  | 1101 +++++++++++++++++
 packages/web/src/styles/UnifiedRecipeEdit.css |  861 +++++++++++++
 4 files changed, 1966 insertions(+), 6 deletions(-)
 create mode 100644 packages/web/src/pages/UnifiedEditRecipe.tsx
 create mode 100644 packages/web/src/styles/UnifiedRecipeEdit.css

diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index 3cf8728..c1dbc1f 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -3,9 +3,8 @@ import RecipeList from './pages/RecipeList';
 import RecipeDetail from './pages/RecipeDetail';
 import RecipeImport from './pages/RecipeImport';
 import NewRecipe from './pages/NewRecipe';
-import EditRecipe from './pages/EditRecipe';
+import UnifiedEditRecipe from './pages/UnifiedEditRecipe';
 import CookingMode from './pages/CookingMode';
-import ManageIngredientMappings from './pages/ManageIngredientMappings';
 import './App.css';
 
 function App() {
@@ -28,9 +27,8 @@ function App() {
             <Routes>
               <Route path="/" element={<RecipeList />} />
               <Route path="/recipes/:id" element={<RecipeDetail />} />
-              <Route path="/recipes/:id/edit" element={<EditRecipe />} />
+              <Route path="/recipes/:id/edit" element={<UnifiedEditRecipe />} />
               <Route path="/recipes/:id/cook" element={<CookingMode />} />
-              <Route path="/recipes/:id/manage-mappings" element={<ManageIngredientMappings />} />
               <Route path="/new" element={<NewRecipe />} />
               <Route path="/import" element={<RecipeImport />} />
             </Routes>
diff --git a/packages/web/src/pages/CookingMode.tsx b/packages/web/src/pages/CookingMode.tsx
index 004b8e1..df06c3c 100644
--- a/packages/web/src/pages/CookingMode.tsx
+++ b/packages/web/src/pages/CookingMode.tsx
@@ -219,8 +219,8 @@ function CookingMode() {
             Show ingredients with steps
           </label>
 
-          <button onClick={() => navigate(`/recipes/${id}/manage-mappings`)} className="manage-btn">
-            ⚙️ Manage Ingredients
+          <button onClick={() => navigate(`/recipes/${id}/edit`)} className="manage-btn">
+            ✏️ Edit Recipe
           </button>
 
           <button onClick={toggleFullscreen} className="fullscreen-btn">
diff --git a/packages/web/src/pages/UnifiedEditRecipe.tsx b/packages/web/src/pages/UnifiedEditRecipe.tsx
new file mode 100644
index 0000000..7694d16
--- /dev/null
+++ b/packages/web/src/pages/UnifiedEditRecipe.tsx
@@ -0,0 +1,1101 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { Recipe, Ingredient, Instruction, RecipeSection } from '@basil/shared';
+import { recipesApi } from '../services/api';
+import '../styles/UnifiedRecipeEdit.css';
+
+interface MappingChange {
+  ingredientId: string;
+  instructionId: string;
+  order: number;
+}
+
+function UnifiedEditRecipe() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  // Recipe data
+  const [recipe, setRecipe] = useState<Recipe | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Basic info fields
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [prepTime, setPrepTime] = useState('');
+  const [cookTime, setCookTime] = useState('');
+  const [servings, setServings] = useState('');
+  const [cuisine, setCuisine] = useState('');
+  const [category, setCategory] = useState('');
+
+  // Section mode
+  const [useSections, setUseSections] = useState(false);
+  const [sections, setSections] = useState<RecipeSection[]>([]);
+
+  // Simple mode
+  const [ingredients, setIngredients] = useState<Ingredient[]>([]);
+  const [instructions, setInstructions] = useState<Instruction[]>([]);
+
+  // Ingredient-Instruction mappings
+  const [localMappings, setLocalMappings] = useState<Record<string, string[]>>({}); // instructionId -> [ingredientIds]
+
+  // UI state
+  const [hasChanges, setHasChanges] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [basicInfoCollapsed, setBasicInfoCollapsed] = useState(false);
+  const [selectedIngredients, setSelectedIngredients] = useState<Set<string>>(new Set());
+  const [editingInstructionId, setEditingInstructionId] = useState<string | null>(null);
+  const [editingInstructionText, setEditingInstructionText] = useState('');
+  const [editingInstructionTiming, setEditingInstructionTiming] = useState('');
+  const [draggedIngredient, setDraggedIngredient] = useState<Ingredient | null>(null);
+  const [dragOverInstructionId, setDragOverInstructionId] = useState<string | null>(null);
+  const [bulkMapTarget, setBulkMapTarget] = useState('');
+
+  // Image handling
+  const [uploadingImage, setUploadingImage] = useState(false);
+  const [processingImage, setProcessingImage] = useState(false);
+  const [imageError, setImageError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (id) {
+      loadRecipe(id);
+    }
+  }, [id]);
+
+  const loadRecipe = async (recipeId: string) => {
+    try {
+      setLoading(true);
+      const response = await recipesApi.getById(recipeId);
+      const loadedRecipe = response.data || null;
+      setRecipe(loadedRecipe);
+
+      if (loadedRecipe) {
+        // Set basic info
+        setTitle(loadedRecipe.title);
+        setDescription(loadedRecipe.description || '');
+        setPrepTime(loadedRecipe.prepTime?.toString() || '');
+        setCookTime(loadedRecipe.cookTime?.toString() || '');
+        setServings(loadedRecipe.servings?.toString() || '');
+        setCuisine(loadedRecipe.cuisine || '');
+        setCategory(loadedRecipe.category || '');
+
+        // Set sections or simple mode
+        const hasSections = !!(loadedRecipe.sections && loadedRecipe.sections.length > 0);
+        setUseSections(hasSections);
+
+        if (hasSections) {
+          setSections(loadedRecipe.sections || []);
+        } else {
+          setIngredients(loadedRecipe.ingredients || []);
+          setInstructions(loadedRecipe.instructions || []);
+        }
+
+        // Initialize mappings from database
+        const mappings: Record<string, string[]> = {};
+
+        if (hasSections) {
+          loadedRecipe.sections?.forEach(section => {
+            section.instructions?.forEach(instruction => {
+              if (instruction.id && instruction.ingredients) {
+                mappings[instruction.id] = instruction.ingredients
+                  .sort((a, b) => a.order - b.order)
+                  .map(m => m.ingredient?.id || '')
+                  .filter(id => id !== '');
+              }
+            });
+          });
+        } else {
+          loadedRecipe.instructions?.forEach(instruction => {
+            if (instruction.id && instruction.ingredients) {
+              mappings[instruction.id] = instruction.ingredients
+                .sort((a, b) => a.order - b.order)
+                .map(m => m.ingredient?.id || '')
+                .filter(id => id !== '');
+            }
+          });
+        }
+
+        setLocalMappings(mappings);
+      }
+
+      setError(null);
+    } catch (err) {
+      setError('Failed to load recipe');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Get all ingredients (either from sections or simple mode)
+  const getAllIngredients = (): Ingredient[] => {
+    if (useSections) {
+      const allIngs: Ingredient[] = [];
+      sections.forEach(section => {
+        if (section.ingredients) {
+          allIngs.push(...section.ingredients);
+        }
+      });
+      return allIngs;
+    }
+    return ingredients;
+  };
+
+  // Get all instructions (either from sections or simple mode)
+  const getAllInstructions = (): Instruction[] => {
+    if (useSections) {
+      const allInsts: Instruction[] = [];
+      sections.forEach(section => {
+        if (section.instructions) {
+          allInsts.push(...section.instructions);
+        }
+      });
+      return allInsts;
+    }
+    return instructions;
+  };
+
+  // Ingredient management
+  const addIngredient = () => {
+    const newIngredient: Ingredient = {
+      name: '',
+      amount: '',
+      unit: '',
+      order: ingredients.length,
+      id: `temp-${Date.now()}`, // Temporary ID for UI purposes
+    };
+    setIngredients([...ingredients, newIngredient]);
+    setHasChanges(true);
+  };
+
+  const updateIngredient = (index: number, field: keyof Ingredient, value: string) => {
+    const newIngredients = [...ingredients];
+    newIngredients[index] = { ...newIngredients[index], [field]: value };
+    setIngredients(newIngredients);
+    setHasChanges(true);
+  };
+
+  const removeIngredient = (index: number) => {
+    const ingredientId = ingredients[index].id;
+    setIngredients(ingredients.filter((_, i) => i !== index));
+
+    // Remove from mappings
+    if (ingredientId) {
+      const newMappings = { ...localMappings };
+      Object.keys(newMappings).forEach(instructionId => {
+        newMappings[instructionId] = newMappings[instructionId].filter(id => id !== ingredientId);
+      });
+      setLocalMappings(newMappings);
+    }
+
+    setHasChanges(true);
+  };
+
+  const deleteSelectedIngredients = () => {
+    if (selectedIngredients.size === 0) return;
+
+    if (!confirm(`Delete ${selectedIngredients.size} selected ingredient(s)?`)) return;
+
+    // Remove from ingredients list
+    const newIngredients = ingredients.filter(ing => !selectedIngredients.has(ing.id || ''));
+    setIngredients(newIngredients);
+
+    // Remove from mappings
+    const newMappings = { ...localMappings };
+    Object.keys(newMappings).forEach(instructionId => {
+      newMappings[instructionId] = newMappings[instructionId].filter(
+        id => !selectedIngredients.has(id)
+      );
+    });
+    setLocalMappings(newMappings);
+
+    setSelectedIngredients(new Set());
+    setHasChanges(true);
+  };
+
+  const toggleIngredientSelection = (ingredientId: string) => {
+    const newSelection = new Set(selectedIngredients);
+    if (newSelection.has(ingredientId)) {
+      newSelection.delete(ingredientId);
+    } else {
+      newSelection.add(ingredientId);
+    }
+    setSelectedIngredients(newSelection);
+  };
+
+  // Instruction management
+  const addInstruction = () => {
+    const newInstruction: Instruction = {
+      step: instructions.length + 1,
+      text: '',
+      timing: '',
+      id: `temp-${Date.now()}`, // Temporary ID for UI purposes
+    };
+    setInstructions([...instructions, newInstruction]);
+    setHasChanges(true);
+  };
+
+  const startEditingInstruction = (instruction: Instruction) => {
+    setEditingInstructionId(instruction.id || null);
+    setEditingInstructionText(instruction.text);
+    setEditingInstructionTiming(instruction.timing || '');
+  };
+
+  const cancelEditingInstruction = () => {
+    setEditingInstructionId(null);
+    setEditingInstructionText('');
+    setEditingInstructionTiming('');
+  };
+
+  const saveEditingInstruction = () => {
+    if (!editingInstructionId) return;
+
+    const index = instructions.findIndex(inst => inst.id === editingInstructionId);
+    if (index >= 0) {
+      const newInstructions = [...instructions];
+      newInstructions[index] = {
+        ...newInstructions[index],
+        text: editingInstructionText,
+        timing: editingInstructionTiming,
+      };
+      setInstructions(newInstructions);
+      setHasChanges(true);
+    }
+
+    cancelEditingInstruction();
+  };
+
+  const removeInstruction = (index: number) => {
+    if (!confirm('Delete this instruction?')) return;
+
+    const instructionId = instructions[index].id;
+
+    // Remove instruction
+    const newInstructions = instructions
+      .filter((_, i) => i !== index)
+      .map((inst, i) => ({ ...inst, step: i + 1 }));
+    setInstructions(newInstructions);
+
+    // Remove from mappings
+    if (instructionId) {
+      const newMappings = { ...localMappings };
+      delete newMappings[instructionId];
+      setLocalMappings(newMappings);
+    }
+
+    setHasChanges(true);
+  };
+
+  // Drag and drop
+  const handleIngredientDragStart = (ingredient: Ingredient) => {
+    setDraggedIngredient(ingredient);
+  };
+
+  const handleIngredientDragEnd = () => {
+    setDraggedIngredient(null);
+    setDragOverInstructionId(null);
+  };
+
+  const handleInstructionDragOver = (e: React.DragEvent, instructionId: string) => {
+    e.preventDefault();
+    setDragOverInstructionId(instructionId);
+  };
+
+  const handleInstructionDragLeave = () => {
+    setDragOverInstructionId(null);
+  };
+
+  const handleInstructionDrop = (e: React.DragEvent, instructionId: string) => {
+    e.preventDefault();
+    setDragOverInstructionId(null);
+
+    if (draggedIngredient && draggedIngredient.id) {
+      const newMappings = { ...localMappings };
+
+      if (!newMappings[instructionId]) {
+        newMappings[instructionId] = [];
+      }
+
+      if (!newMappings[instructionId].includes(draggedIngredient.id)) {
+        newMappings[instructionId] = [...newMappings[instructionId], draggedIngredient.id];
+        setLocalMappings(newMappings);
+        setHasChanges(true);
+      }
+    }
+
+    setDraggedIngredient(null);
+  };
+
+  const removeIngredientFromInstruction = (ingredientId: string, instructionId: string) => {
+    const newMappings = { ...localMappings };
+    if (newMappings[instructionId]) {
+      newMappings[instructionId] = newMappings[instructionId].filter(id => id !== ingredientId);
+      setLocalMappings(newMappings);
+      setHasChanges(true);
+    }
+  };
+
+  // Bulk mapping
+  const handleBulkMapToInstruction = () => {
+    if (!bulkMapTarget || selectedIngredients.size === 0) return;
+
+    const newMappings = { ...localMappings };
+    if (!newMappings[bulkMapTarget]) {
+      newMappings[bulkMapTarget] = [];
+    }
+
+    selectedIngredients.forEach(ingredientId => {
+      if (!newMappings[bulkMapTarget].includes(ingredientId)) {
+        newMappings[bulkMapTarget].push(ingredientId);
+      }
+    });
+
+    setLocalMappings(newMappings);
+    setSelectedIngredients(new Set());
+    setBulkMapTarget('');
+    setHasChanges(true);
+  };
+
+  // Image handling
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !id) return;
+
+    const hasExistingImage = !!recipe?.imageUrl;
+
+    setProcessingImage(true);
+    setImageError(null);
+
+    setTimeout(async () => {
+      if (hasExistingImage) {
+        const confirmed = window.confirm(
+          'This will replace the current recipe image. Are you sure?'
+        );
+        if (!confirmed) {
+          e.target.value = '';
+          setProcessingImage(false);
+          return;
+        }
+      }
+
+      try {
+        setUploadingImage(true);
+        setProcessingImage(false);
+        await recipesApi.uploadImage(id, file);
+        window.location.reload();
+      } catch (error) {
+        console.error('Failed to upload image:', error);
+        setImageError('Failed to upload image. Please try again.');
+      } finally {
+        setUploadingImage(false);
+        setProcessingImage(false);
+        e.target.value = '';
+      }
+    }, 10);
+  };
+
+  const handleImageDelete = async () => {
+    if (!id || !recipe?.imageUrl) return;
+
+    const confirmed = window.confirm(
+      'Are you sure you want to delete this image? This action cannot be undone.'
+    );
+    if (!confirmed) return;
+
+    try {
+      setUploadingImage(true);
+      setImageError(null);
+      await recipesApi.deleteImage(id);
+      window.location.reload();
+    } catch (error) {
+      console.error('Failed to delete image:', error);
+      setImageError('Failed to delete image. Please try again.');
+    } finally {
+      setUploadingImage(false);
+    }
+  };
+
+  // Regenerate mappings
+  const regenerateMappings = async () => {
+    if (!id || !confirm('Regenerate all ingredient mappings automatically? This will replace your current mappings.')) {
+      return;
+    }
+
+    try {
+      setSaving(true);
+      await recipesApi.regenerateMappings(id);
+      await loadRecipe(id);
+      setHasChanges(false);
+      alert('Mappings regenerated successfully!');
+    } catch (err) {
+      console.error('Error regenerating mappings:', err);
+      alert('Failed to regenerate mappings');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Save everything
+  const handleSaveAll = async () => {
+    if (!id) return;
+
+    try {
+      setSaving(true);
+
+      // 1. Save recipe data (ingredients & instructions)
+      const recipeUpdate: Partial<Recipe> = {
+        title,
+        description: description || undefined,
+        prepTime: prepTime ? parseInt(prepTime) : undefined,
+        cookTime: cookTime ? parseInt(cookTime) : undefined,
+        servings: servings ? parseInt(servings) : undefined,
+        cuisine: cuisine || undefined,
+        category: category || undefined,
+      };
+
+      if (useSections) {
+        recipeUpdate.sections = sections.filter((s) => s.name.trim() !== '');
+        recipeUpdate.ingredients = [];
+        recipeUpdate.instructions = [];
+      } else {
+        recipeUpdate.ingredients = ingredients.filter((i) => i.name.trim() !== '');
+        recipeUpdate.instructions = instructions.filter((i) => i.text.trim() !== '');
+        recipeUpdate.sections = [];
+      }
+
+      await recipesApi.update(id, recipeUpdate);
+
+      // 2. Reload the recipe to get the new IDs for ingredients and instructions
+      const reloadResponse = await recipesApi.getById(id);
+      const reloadedRecipe = reloadResponse.data;
+
+      if (!reloadedRecipe) {
+        throw new Error('Failed to reload recipe after save');
+      }
+
+      // 3. Build mappings using the NEW IDs by matching ingredient/instruction content and order
+      const mappings: MappingChange[] = [];
+      const newIngredients = reloadedRecipe.ingredients || [];
+      const newInstructions = reloadedRecipe.instructions || [];
+
+      // Build a map of old ingredient index to new ingredient for better matching
+      const ingredientIndexMap = new Map<number, Ingredient>();
+      ingredients.forEach((oldIng, oldIndex) => {
+        // Find matching new ingredient by comparing content AND order/index
+        // This handles duplicates better by using position
+        const matchingNew = newIngredients.find((newIng, newIndex) => {
+          return newIng.name === oldIng.name &&
+                 newIng.amount === oldIng.amount &&
+                 newIng.unit === oldIng.unit &&
+                 Math.abs(newIndex - oldIndex) <= 1; // Allow for minor position differences
+        });
+        if (matchingNew) {
+          ingredientIndexMap.set(oldIndex, matchingNew);
+        }
+      });
+
+      // Build a map of old instruction step to new instruction
+      const instructionStepMap = new Map<number, Instruction>();
+      instructions.forEach((oldInst) => {
+        const matchingNew = newInstructions.find(newInst => newInst.step === oldInst.step);
+        if (matchingNew) {
+          instructionStepMap.set(oldInst.step, matchingNew);
+        }
+      });
+
+      Object.entries(localMappings).forEach(([oldInstructionId, oldIngredientIds]) => {
+        // Find the old instruction in our local state
+        const oldInstruction = instructions.find(inst => inst.id === oldInstructionId);
+        if (!oldInstruction) return;
+
+        // Find the matching new instruction by step number
+        const newInstruction = instructionStepMap.get(oldInstruction.step);
+        if (!newInstruction?.id) return;
+
+        // For each old ingredient ID in the mapping
+        oldIngredientIds.forEach((oldIngredientId, mappingOrder) => {
+          // Find the old ingredient in our local state
+          const oldIngredientIndex = ingredients.findIndex(ing => ing.id === oldIngredientId);
+          if (oldIngredientIndex === -1) return;
+
+          const oldIngredient = ingredients[oldIngredientIndex];
+
+          // Get the matching new ingredient from our map
+          let newIngredient = ingredientIndexMap.get(oldIngredientIndex);
+
+          // Fallback: try to find by exact content match if map lookup failed
+          if (!newIngredient) {
+            newIngredient = newIngredients.find(
+              ing => ing.name === oldIngredient.name &&
+                     ing.amount === oldIngredient.amount &&
+                     ing.unit === oldIngredient.unit
+            );
+          }
+
+          if (!newIngredient?.id || !newInstruction.id) {
+            console.warn('Could not find matching ingredient or instruction for:', oldIngredient);
+            return;
+          }
+
+          // Add the mapping with the NEW IDs
+          mappings.push({
+            ingredientId: newIngredient.id,
+            instructionId: newInstruction.id,
+            order: mappingOrder,
+          });
+        });
+      });
+
+      // 4. Save mappings with the new IDs
+      if (mappings.length > 0) {
+        await recipesApi.updateMappings(id, mappings);
+      }
+
+      setHasChanges(false);
+      alert('Recipe saved successfully!');
+      navigate(`/recipes/${id}`);
+    } catch (err) {
+      console.error('Error saving recipe:', err);
+      alert('Failed to save recipe. Please try again.');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (hasChanges && !confirm('You have unsaved changes. Are you sure you want to cancel?')) {
+      return;
+    }
+    navigate(`/recipes/${id}`);
+  };
+
+  const getIngredientText = (ingredient: Ingredient): string => {
+    let ingredientStr = '';
+    if (ingredient.amount && ingredient.unit) {
+      ingredientStr = `${ingredient.amount} ${ingredient.unit} ${ingredient.name}`;
+    } else if (ingredient.amount) {
+      ingredientStr = `${ingredient.amount} ${ingredient.name}`;
+    } else {
+      ingredientStr = ingredient.name;
+    }
+    return ingredient.notes ? `${ingredientStr} (${ingredient.notes})` : ingredientStr;
+  };
+
+  const getMappedIngredientsForInstruction = (instructionId: string): Ingredient[] => {
+    const ingredientIds = localMappings[instructionId] || [];
+    const allIngs = getAllIngredients();
+    return ingredientIds
+      .map(id => allIngs.find(ing => ing.id === id))
+      .filter((ing): ing is Ingredient => ing !== undefined);
+  };
+
+  if (loading) {
+    return (
+      <div className="unified-recipe-edit">
+        <div className="loading">Loading recipe...</div>
+      </div>
+    );
+  }
+
+  if (error || !recipe) {
+    return (
+      <div className="unified-recipe-edit">
+        <div className="error">{error || 'Recipe not found'}</div>
+        <button onClick={() => navigate('/')}>← Back to Recipes</button>
+      </div>
+    );
+  }
+
+  const allIngredients = getAllIngredients();
+  const allInstructions = getAllInstructions();
+
+  return (
+    <div className="unified-recipe-edit">
+      {/* Header */}
+      <div className="unified-header">
+        <div className="unified-title">
+          <h1>Edit Recipe</h1>
+          <h2>{title || 'Untitled Recipe'}</h2>
+        </div>
+
+        <div className="unified-controls">
+          <button
+            onClick={handleSaveAll}
+            disabled={!hasChanges || saving}
+            className="save-btn"
+          >
+            {saving ? 'Saving...' : '💾 Save All Changes'}
+          </button>
+
+          <button
+            onClick={regenerateMappings}
+            disabled={saving}
+            className="regenerate-btn"
+          >
+            🔄 Regenerate Mappings
+          </button>
+
+          <button onClick={handleCancel} className="cancel-btn">
+            Cancel
+          </button>
+        </div>
+      </div>
+
+      {/* Unsaved changes banner */}
+      {hasChanges && (
+        <div className="unsaved-changes-banner">
+          ⚠️ You have unsaved changes. Click "Save All Changes" to persist them.
+        </div>
+      )}
+
+      {/* Collapsible Basic Info Section */}
+      <div className="basic-info-section">
+        <div
+          className="basic-info-header"
+          onClick={() => setBasicInfoCollapsed(!basicInfoCollapsed)}
+        >
+          <h3>Recipe Details</h3>
+          <span className={`collapse-icon ${basicInfoCollapsed ? 'collapsed' : ''}`}>
+            ▼
+          </span>
+        </div>
+
+        {!basicInfoCollapsed && (
+          <div className="basic-info-content">
+            <div className="form-group">
+              <label htmlFor="title">Title *</label>
+              <input
+                type="text"
+                id="title"
+                value={title}
+                onChange={(e) => {
+                  setTitle(e.target.value);
+                  setHasChanges(true);
+                }}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="description">Description</label>
+              <textarea
+                id="description"
+                value={description}
+                onChange={(e) => {
+                  setDescription(e.target.value);
+                  setHasChanges(true);
+                }}
+              />
+            </div>
+
+            <div className="form-row">
+              <div className="form-group">
+                <label htmlFor="prepTime">Prep Time (minutes)</label>
+                <input
+                  type="number"
+                  id="prepTime"
+                  value={prepTime}
+                  onChange={(e) => {
+                    setPrepTime(e.target.value);
+                    setHasChanges(true);
+                  }}
+                />
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="cookTime">Cook Time (minutes)</label>
+                <input
+                  type="number"
+                  id="cookTime"
+                  value={cookTime}
+                  onChange={(e) => {
+                    setCookTime(e.target.value);
+                    setHasChanges(true);
+                  }}
+                />
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="servings">Servings</label>
+                <input
+                  type="number"
+                  id="servings"
+                  value={servings}
+                  onChange={(e) => {
+                    setServings(e.target.value);
+                    setHasChanges(true);
+                  }}
+                />
+              </div>
+            </div>
+
+            <div className="form-row">
+              <div className="form-group">
+                <label htmlFor="cuisine">Cuisine</label>
+                <input
+                  type="text"
+                  id="cuisine"
+                  value={cuisine}
+                  onChange={(e) => {
+                    setCuisine(e.target.value);
+                    setHasChanges(true);
+                  }}
+                />
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="category">Category</label>
+                <input
+                  type="text"
+                  id="category"
+                  value={category}
+                  onChange={(e) => {
+                    setCategory(e.target.value);
+                    setHasChanges(true);
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* Image Upload */}
+            <div className="form-group image-upload-section">
+              <label>Recipe Image</label>
+
+              {recipe.imageUrl && (
+                <div className="current-image">
+                  <img src={recipe.imageUrl} alt="Recipe" />
+                  <div className="image-actions">
+                    <p className="image-note">Current main image</p>
+                    <button
+                      type="button"
+                      onClick={handleImageDelete}
+                      disabled={uploadingImage || processingImage}
+                      className="btn-delete-image"
+                    >
+                      Delete Image
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              <div className="image-upload-control">
+                <input
+                  type="file"
+                  id="imageUpload"
+                  accept="image/*"
+                  onChange={handleImageUpload}
+                  disabled={uploadingImage || processingImage}
+                  className="file-input"
+                />
+                <label htmlFor="imageUpload" className="file-input-label">
+                  {processingImage
+                    ? 'Processing...'
+                    : uploadingImage
+                    ? 'Uploading...'
+                    : recipe.imageUrl
+                    ? 'Replace Image'
+                    : 'Upload Image'}
+                </label>
+              </div>
+
+              {imageError && <div className="error">{imageError}</div>}
+
+              <p className="image-help-text">
+                Supported formats: JPG, PNG, GIF, WEBP. Max size: 20MB
+              </p>
+            </div>
+
+            {/* Section mode toggle - disabled for now, only support simple mode */}
+            <div className="form-group">
+              <label className="checkbox-label">
+                <input
+                  type="checkbox"
+                  checked={useSections}
+                  onChange={(e) => {
+                    setUseSections(e.target.checked);
+                    setHasChanges(true);
+                  }}
+                  disabled={true} // TODO: Add section support later
+                />
+                <span>Multi-section recipe (coming soon)</span>
+              </label>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Two-Column Layout: Ingredients + Instructions */}
+      {!useSections && (
+        <div className="edit-content">
+          {/* Left Column: Ingredients Panel (Sticky) */}
+          <div className="ingredients-panel">
+            <h3>Ingredients</h3>
+
+            <ul className="ingredients-list">
+              {allIngredients.map((ingredient, index) => (
+                <li
+                  key={ingredient.id || index}
+                  className={`ingredient-item ${
+                    selectedIngredients.has(ingredient.id || '') ? 'selected' : ''
+                  } ${draggedIngredient?.id === ingredient.id ? 'dragging' : ''}`}
+                  draggable
+                  onDragStart={() => handleIngredientDragStart(ingredient)}
+                  onDragEnd={handleIngredientDragEnd}
+                >
+                  <input
+                    type="checkbox"
+                    className="ingredient-checkbox"
+                    checked={selectedIngredients.has(ingredient.id || '')}
+                    onChange={() => toggleIngredientSelection(ingredient.id || '')}
+                    draggable={false}
+                    onMouseDown={(e) => e.stopPropagation()}
+                  />
+
+                  <span className="drag-handle">⋮⋮</span>
+
+                  <div className="ingredient-content">
+                    <div className="ingredient-inputs">
+                      <input
+                        type="text"
+                        value={ingredient.amount || ''}
+                        onChange={(e) => updateIngredient(index, 'amount', e.target.value)}
+                        placeholder="Amt"
+                        draggable={false}
+                        onMouseDown={(e) => e.stopPropagation()}
+                      />
+                      <input
+                        type="text"
+                        value={ingredient.unit || ''}
+                        onChange={(e) => updateIngredient(index, 'unit', e.target.value)}
+                        placeholder="Unit"
+                        draggable={false}
+                        onMouseDown={(e) => e.stopPropagation()}
+                      />
+                      <input
+                        type="text"
+                        value={ingredient.name}
+                        onChange={(e) => updateIngredient(index, 'name', e.target.value)}
+                        placeholder="Name"
+                        required
+                        draggable={false}
+                        onMouseDown={(e) => e.stopPropagation()}
+                      />
+                    </div>
+                  </div>
+
+                  <button
+                    className="btn-remove-ingredient"
+                    onClick={() => removeIngredient(index)}
+                    title="Remove ingredient"
+                    draggable={false}
+                  >
+                    ✕
+                  </button>
+                </li>
+              ))}
+            </ul>
+
+            <div className="ingredient-actions">
+              <button className="btn-add-ingredient" onClick={addIngredient}>
+                + Add
+              </button>
+              <button
+                className="btn-delete-selected"
+                onClick={deleteSelectedIngredients}
+                disabled={selectedIngredients.size === 0}
+              >
+                Delete ({selectedIngredients.size})
+              </button>
+            </div>
+
+            {/* Bulk Actions */}
+            {selectedIngredients.size > 0 && allInstructions.length > 0 && (
+              <div className="bulk-actions">
+                <p>
+                  <strong>Map {selectedIngredients.size} selected to:</strong>
+                </p>
+                <select
+                  value={bulkMapTarget}
+                  onChange={(e) => setBulkMapTarget(e.target.value)}
+                >
+                  <option value="">Select a step...</option>
+                  {allInstructions.map((instruction) => (
+                    <option key={instruction.id} value={instruction.id}>
+                      Step {instruction.step}
+                    </option>
+                  ))}
+                </select>
+                <button
+                  onClick={handleBulkMapToInstruction}
+                  disabled={!bulkMapTarget}
+                >
+                  Map to Step
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Right Column: Instructions Panel */}
+          <div className="instructions-panel">
+            <h3>Instructions</h3>
+
+            <ul className="instructions-list">
+              {allInstructions.map((instruction, index) => {
+                const isEditing = editingInstructionId === instruction.id;
+                const mappedIngredients = getMappedIngredientsForInstruction(
+                  instruction.id || ''
+                );
+                const isDragOver = dragOverInstructionId === instruction.id;
+
+                return (
+                  <li
+                    key={instruction.id || index}
+                    className={`instruction-item ${isDragOver ? 'drag-over' : ''}`}
+                    onDragOver={(e) => handleInstructionDragOver(e, instruction.id || '')}
+                    onDragLeave={handleInstructionDragLeave}
+                    onDrop={(e) => handleInstructionDrop(e, instruction.id || '')}
+                  >
+                    <div className="instruction-header">
+                      <span className="step-number">Step {instruction.step}</span>
+
+                      {!isEditing && (
+                        <div className="instruction-controls">
+                          <button
+                            className="btn-edit-instruction"
+                            onClick={() => startEditingInstruction(instruction)}
+                          >
+                            Edit
+                          </button>
+                          <button
+                            className="btn-delete-instruction"
+                            onClick={() => removeInstruction(index)}
+                          >
+                            Delete
+                          </button>
+                        </div>
+                      )}
+                    </div>
+
+                    {isEditing ? (
+                      <>
+                        <input
+                          type="text"
+                          className="instruction-timing-input"
+                          value={editingInstructionTiming}
+                          onChange={(e) => setEditingInstructionTiming(e.target.value)}
+                          placeholder="Timing (optional, e.g., 8:00am)"
+                        />
+                        <textarea
+                          className="instruction-text-input"
+                          value={editingInstructionText}
+                          onChange={(e) => setEditingInstructionText(e.target.value)}
+                          placeholder="Instruction text"
+                          autoFocus
+                        />
+                        <div className="instruction-edit-actions">
+                          <button
+                            className="btn-save-instruction"
+                            onClick={saveEditingInstruction}
+                          >
+                            Save
+                          </button>
+                          <button
+                            className="btn-cancel-instruction"
+                            onClick={cancelEditingInstruction}
+                          >
+                            Cancel
+                          </button>
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        {instruction.timing && (
+                          <div className="instruction-timing-display">
+                            {instruction.timing}
+                          </div>
+                        )}
+                        <div
+                          className="instruction-text-display"
+                          onClick={() => startEditingInstruction(instruction)}
+                          title="Click to edit"
+                        >
+                          {instruction.text || <em>Click to add instruction text</em>}
+                        </div>
+                      </>
+                    )}
+
+                    {/* Drop zone for ingredients */}
+                    <div className="drop-zone">
+                      <span className="drop-zone-header">
+                        Ingredients for this step:
+                      </span>
+
+                      {mappedIngredients.length === 0 ? (
+                        <p className="no-ingredients-mapped">
+                          Drag ingredients here or use bulk actions
+                        </p>
+                      ) : (
+                        <ul className="mapped-ingredients-list">
+                          {mappedIngredients.map((ingredient) => (
+                            <li
+                              key={ingredient.id}
+                              className="mapped-ingredient-item"
+                            >
+                              <span className="mapped-ingredient-text">
+                                {getIngredientText(ingredient)}
+                              </span>
+                              <button
+                                className="btn-remove-ingredient"
+                                onClick={() =>
+                                  removeIngredientFromInstruction(
+                                    ingredient.id || '',
+                                    instruction.id || ''
+                                  )
+                                }
+                                title="Remove ingredient from this step"
+                              >
+                                ✕
+                              </button>
+                            </li>
+                          ))}
+                        </ul>
+                      )}
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+
+            <button className="btn-add-instruction" onClick={addInstruction}>
+              + Add Instruction
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* TODO: Add section support later */}
+      {useSections && (
+        <div style={{ padding: '2rem', textAlign: 'center', color: '#666' }}>
+          <p>Multi-section recipe editing coming soon!</p>
+          <p>For now, please uncheck "Multi-section recipe" above.</p>
+        </div>
+      )}
+
+      {/* Footer with Save/Cancel buttons */}
+      <div className="unified-footer">
+        <button
+          onClick={handleSaveAll}
+          disabled={!hasChanges || saving}
+          className="save-btn-large"
+        >
+          {saving ? 'Saving...' : '💾 Save All Changes'}
+        </button>
+        <button onClick={handleCancel} className="cancel-btn-large">
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default UnifiedEditRecipe;
diff --git a/packages/web/src/styles/UnifiedRecipeEdit.css b/packages/web/src/styles/UnifiedRecipeEdit.css
new file mode 100644
index 0000000..a93a311
--- /dev/null
+++ b/packages/web/src/styles/UnifiedRecipeEdit.css
@@ -0,0 +1,861 @@
+/* Unified Recipe Edit - All-in-One Interface */
+
+.unified-recipe-edit {
+  background-color: #fafafa;
+  min-height: 100vh;
+  padding: 1.5rem;
+  font-size: 1.05rem;
+}
+
+/* Header */
+.unified-header {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 3px solid #1976d2;
+}
+
+.unified-title h1 {
+  font-size: 2rem;
+  margin: 0;
+  color: #1976d2;
+  line-height: 1.2;
+}
+
+.unified-title h2 {
+  font-size: 1.5rem;
+  margin: 0.5rem 0 0 0;
+  color: #555;
+  font-weight: normal;
+}
+
+.unified-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: center;
+}
+
+.unified-controls button {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: #1976d2;
+  color: white;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.unified-controls button:hover:not(:disabled) {
+  background-color: #0d47a1;
+}
+
+.unified-controls button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.unified-controls .save-btn {
+  background-color: #2e7d32;
+}
+
+.unified-controls .save-btn:hover:not(:disabled) {
+  background-color: #1b5e20;
+}
+
+.unified-controls .regenerate-btn {
+  background-color: #ff9800;
+}
+
+.unified-controls .regenerate-btn:hover:not(:disabled) {
+  background-color: #f57c00;
+}
+
+.unified-controls .cancel-btn {
+  background-color: #757575;
+}
+
+.unified-controls .cancel-btn:hover {
+  background-color: #424242;
+}
+
+/* Unsaved changes banner */
+.unsaved-changes-banner {
+  background-color: #fff3e0;
+  border: 2px solid #ff9800;
+  border-radius: 8px;
+  padding: 1rem 1.5rem;
+  margin-bottom: 1.5rem;
+  font-weight: 500;
+  color: #e65100;
+}
+
+/* Collapsible Basic Info Section */
+.basic-info-section {
+  background-color: white;
+  border: 2px solid #1976d2;
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+}
+
+.basic-info-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background-color: #e3f2fd;
+  cursor: pointer;
+  user-select: none;
+}
+
+.basic-info-header:hover {
+  background-color: #bbdefb;
+}
+
+.basic-info-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: #1976d2;
+}
+
+.collapse-icon {
+  font-size: 1.2rem;
+  color: #1976d2;
+  transition: transform 0.3s;
+}
+
+.collapse-icon.collapsed {
+  transform: rotate(-90deg);
+}
+
+.basic-info-content {
+  padding: 1rem;
+}
+
+.form-group {
+  margin-bottom: 0.75rem;
+}
+
+.form-group label {
+  display: block;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+  color: #333;
+  font-size: 0.9rem;
+}
+
+.form-group input[type="text"],
+.form-group input[type="number"],
+.form-group textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 0.95rem;
+  font-family: inherit;
+}
+
+.form-group textarea {
+  min-height: 60px;
+  resize: vertical;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-weight: normal;
+}
+
+.checkbox-label input[type="checkbox"] {
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+}
+
+/* Image Upload Section */
+.image-upload-section {
+  padding: 0.75rem;
+  background-color: #f5f5f5;
+  border-radius: 6px;
+}
+
+.current-image {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+}
+
+.current-image img {
+  max-width: 200px;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.image-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.image-note {
+  color: #666;
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+.btn-delete-image {
+  padding: 0.5rem 1rem;
+  background-color: #d32f2f;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.btn-delete-image:hover:not(:disabled) {
+  background-color: #b71c1c;
+}
+
+.file-input {
+  display: none;
+}
+
+.file-input-label {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background-color: #1976d2;
+  color: white;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  border: none;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.file-input-label:hover {
+  background-color: #0d47a1;
+}
+
+.image-upload-control {
+  display: inline-block;
+}
+
+.image-help-text {
+  font-size: 0.85rem;
+  color: #666;
+  margin-top: 0.5rem;
+}
+
+/* Two-Column Main Layout */
+.edit-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  align-items: start;
+}
+
+/* Left Column: Ingredients Panel (Sticky) */
+.ingredients-panel {
+  position: sticky;
+  top: 1.5rem;
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: 12px;
+  border: 2px solid #2e7d32;
+  max-height: calc(100vh - 10rem);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.ingredients-panel h3 {
+  margin-top: 0;
+  font-size: 1.5rem;
+  color: #2e7d32;
+  margin-bottom: 1rem;
+}
+
+.ingredients-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1rem 0;
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.ingredient-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  border-bottom: 1px solid #e0e0e0;
+  margin-bottom: 0.5rem;
+}
+
+.ingredient-item:hover {
+  background-color: #e8f5e9;
+}
+
+.ingredient-item.selected {
+  background-color: #c8e6c9;
+  border: 2px solid #2e7d32;
+}
+
+.ingredient-checkbox {
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+}
+
+.drag-handle {
+  color: #9e9e9e;
+  font-size: 1rem;
+  cursor: grab;
+  user-select: none;
+}
+
+.ingredient-item.dragging {
+  opacity: 0.5;
+  cursor: grabbing;
+}
+
+.ingredient-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.ingredient-inputs {
+  display: grid;
+  grid-template-columns: 60px 60px 1fr;
+  gap: 0.25rem;
+}
+
+.ingredient-inputs input {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+
+.ingredient-display {
+  font-size: 1.05rem;
+  cursor: pointer;
+}
+
+.ingredient-display:hover {
+  color: #1b5e20;
+}
+
+.btn-remove-ingredient {
+  background: none;
+  border: none;
+  color: #d32f2f;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  line-height: 1;
+}
+
+.btn-remove-ingredient:hover {
+  background-color: #ffebee;
+}
+
+.ingredient-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  flex-shrink: 0;
+}
+
+.btn-add-ingredient,
+.btn-delete-selected {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.btn-add-ingredient {
+  background-color: #2e7d32;
+  color: white;
+}
+
+.btn-add-ingredient:hover {
+  background-color: #1b5e20;
+}
+
+.btn-delete-selected {
+  background-color: #d32f2f;
+  color: white;
+}
+
+.btn-delete-selected:hover:not(:disabled) {
+  background-color: #b71c1c;
+}
+
+.btn-delete-selected:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.bulk-actions {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 2px solid #e0e0e0;
+  flex-shrink: 0;
+}
+
+.bulk-actions p {
+  font-size: 0.9rem;
+  color: #666;
+  margin: 0 0 0.5rem 0;
+}
+
+.bulk-actions select {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
+.bulk-actions button {
+  width: 100%;
+  padding: 0.5rem 1rem;
+  background-color: #1976d2;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.bulk-actions button:hover:not(:disabled) {
+  background-color: #0d47a1;
+}
+
+.bulk-actions button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+/* Right Column: Instructions Panel */
+.instructions-panel {
+  background-color: transparent;
+}
+
+.instructions-panel h3 {
+  font-size: 1.75rem;
+  color: #1976d2;
+  margin-bottom: 1.5rem;
+  margin-top: 0;
+}
+
+.instructions-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.instruction-item {
+  background-color: white;
+  padding: 1.5rem;
+  border-radius: 12px;
+  margin-bottom: 1.5rem;
+  border: 2px solid #e0e0e0;
+  transition: all 0.3s ease;
+}
+
+.instruction-item:hover {
+  border-color: #1976d2;
+}
+
+.instruction-item.drag-over {
+  border-color: #2e7d32;
+  background-color: #f1f8e9;
+  box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2);
+}
+
+.instruction-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.step-number {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: #1976d2;
+}
+
+.instruction-controls {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-edit-instruction,
+.btn-delete-instruction {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.btn-edit-instruction {
+  background-color: #1976d2;
+  color: white;
+}
+
+.btn-edit-instruction:hover {
+  background-color: #0d47a1;
+}
+
+.btn-delete-instruction {
+  background-color: #d32f2f;
+  color: white;
+}
+
+.btn-delete-instruction:hover {
+  background-color: #b71c1c;
+}
+
+.instruction-timing-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
+.instruction-timing-display {
+  font-size: 1rem;
+  color: #d84315;
+  background-color: #fff3e0;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  font-weight: 500;
+  display: inline-block;
+}
+
+.instruction-text-display {
+  font-size: 1.2rem;
+  line-height: 1.8;
+  color: #212121;
+  margin-bottom: 1rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 4px;
+}
+
+.instruction-text-display:hover {
+  background-color: #f5f5f5;
+}
+
+.instruction-text-input {
+  width: 100%;
+  min-height: 80px;
+  padding: 0.75rem;
+  border: 2px solid #1976d2;
+  border-radius: 4px;
+  font-size: 1.1rem;
+  font-family: inherit;
+  resize: vertical;
+  margin-bottom: 0.5rem;
+}
+
+.instruction-edit-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.btn-save-instruction,
+.btn-cancel-instruction {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.btn-save-instruction {
+  background-color: #2e7d32;
+  color: white;
+}
+
+.btn-save-instruction:hover {
+  background-color: #1b5e20;
+}
+
+.btn-cancel-instruction {
+  background-color: #757575;
+  color: white;
+}
+
+.btn-cancel-instruction:hover {
+  background-color: #424242;
+}
+
+.drop-zone {
+  background-color: #f1f8e9;
+  padding: 1rem 1.25rem;
+  border-radius: 8px;
+  margin-top: 1rem;
+  border-left: 4px solid #2e7d32;
+  min-height: 60px;
+}
+
+.drop-zone-header {
+  color: #1b5e20;
+  font-size: 1.05rem;
+  font-weight: 500;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.mapped-ingredients-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.mapped-ingredient-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  margin-bottom: 0.25rem;
+}
+
+.mapped-ingredient-item:hover {
+  background-color: #dcedc8;
+}
+
+.mapped-ingredient-text {
+  flex: 1;
+  font-size: 1.05rem;
+}
+
+.no-ingredients-mapped {
+  color: #757575;
+  font-style: italic;
+  margin: 0.5rem 0;
+  text-align: center;
+  padding: 1rem;
+}
+
+.btn-add-instruction {
+  padding: 0.75rem 1.5rem;
+  background-color: #1976d2;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  margin-top: 1rem;
+}
+
+.btn-add-instruction:hover {
+  background-color: #0d47a1;
+}
+
+/* Section Support */
+.section-container {
+  margin-bottom: 3rem;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  background-color: #e3f2fd;
+  border-radius: 8px;
+  border: 2px solid #1976d2;
+}
+
+.section-header h4 {
+  font-size: 1.5rem;
+  margin: 0;
+  color: #0d47a1;
+}
+
+.section-timing {
+  font-size: 1rem;
+  color: #666;
+  background-color: #fff3e0;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+.btn-remove-section {
+  padding: 0.5rem 1rem;
+  background-color: #d32f2f;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.btn-remove-section:hover {
+  background-color: #b71c1c;
+}
+
+.btn-add-section {
+  padding: 0.75rem 1.5rem;
+  background-color: #1976d2;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  margin-top: 2rem;
+}
+
+.btn-add-section:hover {
+  background-color: #0d47a1;
+}
+
+/* Loading and Error States */
+.loading,
+.error {
+  text-align: center;
+  padding: 3rem;
+  font-size: 1.2rem;
+}
+
+.error {
+  color: #d32f2f;
+}
+
+/* Footer Save Button */
+.unified-footer {
+  position: sticky;
+  bottom: 0;
+  background-color: white;
+  border-top: 3px solid #1976d2;
+  padding: 1rem 1.5rem;
+  margin-top: 2rem;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
+  z-index: 10;
+}
+
+.unified-footer button {
+  padding: 0.75rem 2rem;
+  font-size: 1.1rem;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: background-color 0.2s;
+}
+
+.unified-footer .save-btn-large {
+  background-color: #2e7d32;
+  color: white;
+}
+
+.unified-footer .save-btn-large:hover:not(:disabled) {
+  background-color: #1b5e20;
+}
+
+.unified-footer .save-btn-large:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.unified-footer .cancel-btn-large {
+  background-color: #757575;
+  color: white;
+}
+
+.unified-footer .cancel-btn-large:hover {
+  background-color: #424242;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .edit-content {
+    grid-template-columns: 300px 1fr;
+    gap: 1rem;
+  }
+
+  .ingredients-panel {
+    font-size: 0.95rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .unified-recipe-edit {
+    padding: 1rem;
+  }
+
+  .unified-title h1 {
+    font-size: 1.75rem;
+  }
+
+  .unified-controls {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .unified-controls button {
+    width: 100%;
+  }
+
+  .edit-content {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .ingredients-panel {
+    position: static;
+    max-height: none;
+  }
+
+  .form-row {
+    grid-template-columns: 1fr;
+  }
+}