diff --git a/GiftedDialog-Complete-Documentation.md b/GiftedDialog-Complete-Documentation.md
index e8e5ed0b..e2573c9d 100644
--- a/GiftedDialog-Complete-Documentation.md
+++ b/GiftedDialog-Complete-Documentation.md
@@ -20,19 +20,29 @@ The GiftedDialog system is a sophisticated multi-step dialog for recording gifts
 ### Key Features
 
 - **Two-Step Workflow**: Entity selection → Gift details
+
 - **Multi-Entity Support**: People, projects, and special entities
+
 - **Conflict Detection**: Prevents invalid gift combinations
+
 - **Responsive Design**: Works across all device sizes
+
 - **Accessibility**: Full keyboard navigation and screen reader support
+
 - **Validation**: Comprehensive form validation and error handling
+
 - **Flexible Integration**: Can be embedded in any view with different contexts
 
 ### Design Principles
 
 - **Single Responsibility**: Each component has one clear purpose
+
 - **Composition over Inheritance**: Built through component composition
+
 - **Reactive Data Flow**: Vue's reactivity system for state management
+
 - **Progressive Enhancement**: Core functionality works without JavaScript
+
 - **Privacy by Design**: Respects user privacy and data sovereignty
 
 ## Architecture Diagram
@@ -41,7 +51,7 @@ The GiftedDialog system is a sophisticated multi-step dialog for recording gifts
 graph TB
     subgraph "GiftedDialog System"
         GD[GiftedDialog.vue<br/>Main Orchestrator]
-        
+
         subgraph "Step 1: Entity Selection"
             ESS[EntitySelectionStep.vue<br/>Step Controller]
             EG[EntityGrid.vue<br/>Layout Manager]
@@ -50,13 +60,13 @@ graph TB
             SEC[SpecialEntityCard.vue<br/>Special Entities]
             SAC[ShowAllCard.vue<br/>Navigation]
         end
-        
+
         subgraph "Step 2: Gift Details"
             GDS[GiftDetailsStep.vue<br/>Form Controller]
             ESB[EntitySummaryButton.vue<br/>Entity Summary]
             AI[AmountInput.vue<br/>Amount Control]
         end
-        
+
         subgraph "External Dependencies"
             EI[EntityIcon.vue<br/>Icon Renderer]
             PI[ProjectIcon.vue<br/>Project Icons]
@@ -65,7 +75,7 @@ graph TB
             ROUTER[Vue Router]
         end
     end
-    
+
     GD --> ESS
     GD --> GDS
     ESS --> EG
@@ -84,26 +94,162 @@ graph TB
     SAC --> ROUTER
 ```
 
+### ASCII Art Architecture Diagram
+
+```
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                           GiftedDialog System                               │
+├─────────────────────────────────────────────────────────────────────────────┤
+│                                                                             │
+│  ┌─────────────────────────────────────────────────────────────────────┐    │
+│  │                    GiftedDialog.vue                                 │    │
+│  │                    Main Orchestrator                                │    │
+│  │  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐      │    │
+│  │  │   Dialog State  │  │  Step Control   │  │  API Integration│      │    │
+│  │  │   Management    │  │   (1 ↔ 2)       │  │   & Validation  │      │    │
+│  │  │  │  │  │  │  │     └─────────────────┘  └─────────────────┘      │    │
+│  │  └──────────────────────────────────────────────────────────────────┘    │
+│                                    │                                        │
+│                                    ▼                                        │
+│  ┌─────────────────────────────────────────────────────────────────────┐    │
+│  │                    Step 1: Entity Selection                         │    │
+│  │                                                                     │    │
+│  │  ┌─────────────────────────────────────────────────────────────┐    │    │
+│  │  │              EntitySelectionStep.vue                        │    │    │
+│  │  │              Step Controller                                │    │    │
+│  │  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │    │    │
+│  │  │  │ Context     │  │ Conflict    │  │ Dynamic     │          │    │    │
+│  │  │  │ Awareness   │  │ Detection   │  │ Labeling    │          │    │    │
+│  │  │  └─────────────┘  └─────────────┘  └─────────────┘          │    │    │
+│  │  └─────────────────────────────────────────────────────────────┘    │    │
+│  │                                    │                                │    │
+│  │                                    ▼                                │    │
+│  │  ┌─────────────────────────────────────────────────────────────┐    │    │
+│  │  │                  EntityGrid.vue                             │    │    │
+│  │  │                  Layout Manager                             │    │    │
+│  │  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │    │    │
+│  │  │  │ Responsive  │  │ Event       │  │ Empty State │          │    │    │
+│  │  │  │ Grid Layout │  │ Delegation  │  │ Handling    │          │    │    │
+│  │  │  └─────────────┘  └─────────────┘  └─────────────┘          │    │    │
+│  │  └─────────────────────────────────────────────────────────────┘    │    │
+│  │                                    │                                │    │
+│  │                                    ▼                                │    │
+│  │  ┌─────────────────────────────────────────────────────────────┐    │    │
+│  │  │              Entity Display Components                      │    │    │
+│  │  │  ┌─────────── ──┐  ┌─────────────┐  ┌─────────────┐         │    │    │
+│  │  │  │ PersonCard   │  │ProjectCard  │  │SpecialEntity│         │    │    │
+│  │  │  │ Avatar, Name │  │Icon, Name   │  │Card (You,   │         │    │    │
+│  │  │  │ Selection    │  │Issuer Info  │  │Unnamed)     │         │    │    │
+│  │  │  └──────────── ─┘  └─────────────┘  └─────────────┘         │    │    │
+│  │  └─────────────────────────────────────────────────────────────┘    │    │
+│  │                                    │                                │    │
+│  │                                    ▼                                │    │
+│  │  ┌─────────────────────────────────────────────────────────────┐    │    │
+│  │  │                  ShowAllCard.vue                            │    │    │
+│  │  │                  Navigation Component                       │    │    │
+│  │  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │    │    │
+│  │  │  │ Router      │  │ Query       │  │ Context     │          │    │    │
+│  │  │  │ Integration │  │ Parameters  │  │ Preservation│          │    │    │
+│  │  │  └─────────────┘  └─────────────┘  └─────────────┘          │    │    │
+│  │  └─────────────────────────────────────────────────────────────┘    │    │
+│  └─────────────────────────────────────────────────────────────────────┘    │
+│                                    │                                        │
+│                                    ▼                                        │
+│  ┌─────────────────────────────────────────────────────────────────────┐    │
+│  │                    Step 2: Gift Details                             │    │
+│  │                                                                     │    │
+│  │  ┌─────────────────────────────────────────────────────────────┐    │    │
+│  │  │              GiftDetailsStep.vue                            │    │    │
+│  │  │              Form Controller                                │    │    │
+│  │  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │    │    │
+│  │  │  │ Form        │  │ Validation  │  │ Conflict    │          │    │    │
+│  │  │  │ Management  │  │ & Error     │  │ Warning     │          │    │    │
+│  │  │  │             │  │ Handling    │  │ Display     │          │    │    │
+│  │  │  └─────────────┘  └─────────────┘  └─────────────┘          │    │    │
+│  │  └─────────────────────────────────────────────────────────────┘    │    │
+│  │                                    │                                │    │
+│  │                                    ▼                                │    │
+│  │  ┌─────────────────────────────────────────────────────────────┐    │    │
+│  │  │              Form Input Components                          │    │    │
+│  │  │  ┌────────────  ─┐  ┌─────────────┐  ┌─────────────┐        │    │    │
+│  │  │  │EntitySummary  │  │AmountInput  │  │Description  │        │    │    │
+│  │  │  │Button         │  │Increment/   │  │Input        │        │    │    │
+│  │  │  │Edit Capability│  │Decrement    │  │Placeholder  │        │    │    │
+│  │  │  └───────────  ──┘  └─────────────┘  └─────────────┘        │    │    │
+│  │  └─────────────────────────────────────────────────────────────┘    │    │
+│  └─────────────────────────────────────────────────────────────────────┘    │
+│                                    │                                        │
+│                                    ▼                                        │
+│  ┌─────────────────────────────────────────────────────────────────────┐    │
+│  │                    External Dependencies                            │    │
+│  │                                                                     │    │
+│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐ │    │
+│  │  │ EntityIcon  │  │ProjectIcon  │  │ Database    │  │ Endorser    │ │    │
+│  │  │ Avatar      │  │ Project     │  │ Layer       │  │ API         │ │    │
+│  │  │ Renderer    │  │ Images      │  │ SQLite      │  │ Claims      │ │    │
+│  │  └─────────────┘  └─────────────┘  └─────────────┘  └─────────────┘ │    │
+│  │                                                                     │    │
+│  │  ┌─────────────────────────────────────────────────────────────┐    │    │
+│  │  │                    Vue Router                               │    │    │
+│  │  │              Navigation & Deep Linking                      │    │    │
+│  │  └─────────────────────────────────────────────────────────────┘    │    │
+│  └─────────────────────────────────────────────────────────────────────┘    │
+│                                                                             │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+Data Flow:
+┌─────────────┐    ┌─────────────┐    ┌─────────────┐    ┌─────────────┐
+│   User      │──▶│ GiftedDialog│──▶│ Step 1      │──▶│ Entity      │
+│ Interaction │    │ Main        │    │ Selection   │    │ Selection   │
+└─────────────┘    └─────────────┘    └─────────────┘    └─────────────┘
+                           │                   │                   │
+                           ▼                   ▼                   ▼
+┌─────────────┐    ┌─────────────┐    ┌─────────────┐    ┌─────────────┐
+│ Success/    │◀──│ API         │◀──│ Step 2      │◀──│ Form        │
+│ Error       │    │ Integration │    │ Details     │    │ Submission  │
+│ Handling    │    │             │    │             │    │             │
+└─────────────┘    └─────────────┘    └─────────────┘    └─────────────┘
+
+Component Communication:
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ Event Flow: entity-selected → update:amount → submit → gift-recorded        │
+│                                                                             │
+│ State Flow: Dialog State → Step State → Form State → API State              │
+│                                                                             │
+│ Data Flow: Props Down → Events Up → Callbacks → Parent Notification         │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
 ## Component Hierarchy
 
 ### Main Component
+
 - **GiftedDialog.vue** - Main orchestrating component
 
 ### Step Components
+
 - **EntitySelectionStep.vue** - Step 1 controller
+
 - **GiftDetailsStep.vue** - Step 2 controller
 
 ### Layout Components
+
 - **EntityGrid.vue** - Unified entity grid layout
+
 - **EntitySummaryButton.vue** - Selected entity display
 
 ### Display Components
+
 - **PersonCard.vue** - Individual person display
+
 - **ProjectCard.vue** - Individual project display
+
 - **SpecialEntityCard.vue** - Special entities (You, Unnamed)
+
 - **ShowAllCard.vue** - Navigation component
 
 ### Input Components
+
 - **AmountInput.vue** - Numeric input with controls
 
 ## Data Flow Diagrams
@@ -118,13 +264,13 @@ sequenceDiagram
     participant EntityGrid
     participant PersonCard
     participant SpecialEntityCard
-    
+
     User->>GiftedDialog: Open dialog
     GiftedDialog->>EntitySelectionStep: Render step 1
     EntitySelectionStep->>EntityGrid: Pass entities & config
     EntityGrid->>PersonCard: Render people
     EntityGrid->>SpecialEntityCard: Render special entities
-    
+
     User->>PersonCard: Click person
     PersonCard->>EntityGrid: emit person-selected
     EntityGrid->>EntitySelectionStep: emit entity-selected
@@ -141,16 +287,16 @@ sequenceDiagram
     participant GiftDetailsStep
     participant EntitySummaryButton
     participant AmountInput
-    
+
     GiftedDialog->>GiftDetailsStep: Render step 2
     GiftDetailsStep->>EntitySummaryButton: Display selected entities
     GiftDetailsStep->>AmountInput: Render amount input
-    
+
     User->>AmountInput: Click increment
     AmountInput->>GiftDetailsStep: emit update:value
     GiftDetailsStep->>GiftedDialog: emit update:amount
     GiftedDialog->>GiftedDialog: Update amount state
-    
+
     User->>GiftDetailsStep: Click submit
     GiftDetailsStep->>GiftedDialog: emit submit
     GiftedDialog->>GiftedDialog: Process & submit gift
@@ -178,14 +324,21 @@ flowchart TD
 **Purpose**: Main orchestrating component that manages the overall dialog state and workflow.
 
 **Key Responsibilities**:
+
 - Dialog visibility and lifecycle management
+
 - Step navigation (1 → 2)
+
 - Entity conflict detection
+
 - API integration for gift submission
+
 - Success/error handling
+
 - Child component coordination
 
 **Props**:
+
 ```typescript
 interface GiftedDialogProps {
   fromProjectId?: string;      // Project ID when project is giver
@@ -196,13 +349,19 @@ interface GiftedDialogProps {
 ```
 
 **Key Methods**:
+
 - `open()` - Initialize and show dialog
+
 - `cancel()` - Close dialog and reset state
+
 - `confirm()` - Submit gift and handle response
+
 - `handleEntitySelected()` - Process entity selection from step 1
+
 - `handleSubmit()` - Process form submission from step 2
 
 **State Management**:
+
 ```typescript
 interface GiftedDialogState {
   visible: boolean;
@@ -221,13 +380,19 @@ interface GiftedDialogState {
 **Purpose**: Complete step 1 interface for entity selection with dynamic labeling and context awareness.
 
 **Key Features**:
+
 - Dynamic step labeling based on context
+
 - EntityGrid integration for unified display
+
 - Conflict detection and prevention
+
 - Special entity handling
+
 - Context preservation for navigation
 
 **Props**:
+
 ```typescript
 interface EntitySelectionStepProps {
   stepType: 'giver' | 'recipient';
@@ -248,11 +413,17 @@ interface EntitySelectionStepProps {
 ```
 
 **Computed Properties**:
+
 - `stepLabel` - Dynamic label based on context
+
 - `shouldShowProjects` - Whether to show projects vs people
+
 - `shouldShowYouEntity` - Whether to show "You" option
+
 - `youSelectable` - Whether "You" can be selected
+
 - `showAllRoute` - Navigation route for "Show All"
+
 - `showAllQueryParams` - Query parameters for navigation
 
 ### 3. GiftDetailsStep.vue
@@ -260,14 +431,21 @@ interface EntitySelectionStepProps {
 **Purpose**: Complete step 2 interface for gift details with form validation and entity summaries.
 
 **Key Features**:
+
 - Entity summary display with edit capability
+
 - Gift description input with placeholder support
+
 - Amount input with increment/decrement controls
+
 - Unit code selection (HUR, USD, BTC, etc.)
+
 - Conflict detection and warning display
+
 - Form validation and submission
 
 **Props**:
+
 ```typescript
 interface GiftDetailsStepProps {
   giver: EntityData | null;
@@ -287,6 +465,7 @@ interface GiftDetailsStepProps {
 ```
 
 **Local State**:
+
 ```typescript
 interface GiftDetailsLocalState {
   localDescription: string;
@@ -300,14 +479,21 @@ interface GiftDetailsLocalState {
 **Purpose**: Unified grid layout for displaying people, projects, and special entities with responsive design.
 
 **Key Features**:
+
 - Responsive grid layout (3-6 columns based on entity type)
+
 - Special entity integration (You, Unnamed)
+
 - Conflict detection integration
+
 - Empty state messaging
+
 - Show All navigation
+
 - Event delegation for entity selection
 
 **Props**:
+
 ```typescript
 interface EntityGridProps {
   entityType: 'people' | 'projects';
@@ -325,6 +511,7 @@ interface EntityGridProps {
 ```
 
 **Grid Layout**:
+
 - **People**: 4-6 columns (responsive)
 - **Projects**: 3-4 columns (responsive)
 - **Special entities**: Always shown for people grids
@@ -335,13 +522,19 @@ interface EntityGridProps {
 **Purpose**: Individual person display with avatar, name, and selection states.
 
 **Key Features**:
+
 - EntityIcon integration for avatar display
+
 - Conflict state visualization
+
 - Time icon display for activity context
+
 - Hover and selection states
+
 - Accessibility support
 
 **Props**:
+
 ```typescript
 interface PersonCardProps {
   person: Contact;
@@ -351,9 +544,13 @@ interface PersonCardProps {
 ```
 
 **Visual States**:
+
 - **Normal**: Default appearance
+
 - **Conflicted**: Red border, disabled state
+
 - **Hovered**: Elevated appearance
+
 - **Selected**: Highlighted border
 
 ### 6. ProjectCard.vue
@@ -361,10 +558,15 @@ interface PersonCardProps {
 **Purpose**: Individual project display with project icon, name, and issuer information.
 
 **Key Features**:
+
 - ProjectIcon integration for project images
+
 - Issuer information display
+
 - Project name with ellipsis overflow
+
 - Selection state management
+
 - Accessibility support
 
 **Props**:
@@ -378,9 +580,13 @@ interface ProjectCardProps {
 ```
 
 **Display Elements**:
+
 - Project icon/image
+
 - Project name (truncated)
+
 - Issuer information
+
 - Selection indicator
 
 ### 7. SpecialEntityCard.vue
@@ -388,10 +594,15 @@ interface ProjectCardProps {
 **Purpose**: Special entity display for "You" and "Unnamed" with conflict detection.
 
 **Key Features**:
+
 - FontAwesome icon integration
+
 - Conflict state handling
+
 - Conditional selectability
+
 - Consistent styling with other cards
+
 - Accessibility support
 
 **Props**:
@@ -407,7 +618,9 @@ interface SpecialEntityCardProps {
 ```
 
 **Entity Types**:
+
 - **You**: Represents the current user
+
 - **Unnamed**: Represents anonymous giver
 
 ### 8. ShowAllCard.vue
@@ -415,10 +628,15 @@ interface SpecialEntityCardProps {
 **Purpose**: Navigation component for "Show All" functionality with router integration.
 
 **Key Features**:
+
 - Vue Router integration
+
 - Query parameter passing
+
 - Context preservation
+
 - Consistent styling
+
 - Icon-based navigation
 
 **Props**:
@@ -431,8 +649,11 @@ interface ShowAllCardProps {
 ```
 
 **Navigation Logic**:
+
 - People → ContactGiftingView with context
+
 - Projects → DiscoverView
+
 - Query parameters preserve dialog state
 
 ### 9. EntitySummaryButton.vue
@@ -440,10 +661,15 @@ interface ShowAllCardProps {
 **Purpose**: Selected entity display with edit capability for step 2.
 
 **Key Features**:
+
 - EntityIcon/ProjectIcon integration
+
 - Edit button functionality
+
 - Entity type detection
+
 - Consistent styling
+
 - Accessibility support
 
 **Props**:
@@ -457,9 +683,13 @@ interface EntitySummaryButtonProps {
 ```
 
 **Display Elements**:
+
 - Entity icon/avatar
+
 - Entity name
+
 - Edit button (when editable)
+
 - Type-specific styling
 
 ### 10. AmountInput.vue
@@ -467,10 +697,15 @@ interface EntitySummaryButtonProps {
 **Purpose**: Specialized numeric input with increment/decrement controls and validation.
 
 **Key Features**:
+
 - Increment/decrement buttons
+
 - Configurable min/max values and step size
+
 - Input validation and formatting
+
 - Disabled state handling for boundary values
+
 - v-model compatibility
 
 **Props**:
@@ -485,15 +720,23 @@ interface AmountInputProps {
 ```
 
 **Key Methods**:
+
 - `increment()` - Increase value by step
+
 - `decrement()` - Decrease value by step
+
 - `handleInput()` - Process direct input
+
 - `handleBlur()` - Validate on blur
 
 **Validation Logic**:
+
 - Minimum/maximum bounds checking
+
 - Step size validation
+
 - Numeric input sanitization
+
 - Real-time feedback
 
 ## Integration Patterns
@@ -552,11 +795,11 @@ export default class ParentComponent extends Vue {
       text: `Successfully recorded gift of ${amount} hours`,
       type: "success"
     });
-    
+
     // Refresh data if needed
     this.loadActivities();
   }
-  
+
   openGiftDialog() {
     const dialog = this.$refs.giftedDialog as GiftedDialog;
     dialog.open(
@@ -616,14 +859,14 @@ function wouldCreateConflict(selectedDid: string): boolean {
   if (giverEntityType !== "person" || recipientEntityType !== "person") {
     return false;
   }
-  
+
   // Check if selecting same person for both roles
   if (stepType === "giver") {
     return receiver?.did === selectedDid;
   } else if (stepType === "recipient") {
     return giver?.did === selectedDid;
   }
-  
+
   return false;
 }
 ```
@@ -638,7 +881,7 @@ sequenceDiagram
     participant Grid as EntityGrid
     participant Step as EntitySelectionStep
     participant Dialog as GiftedDialog
-    
+
     Card->>Grid: emit entity-selected
     Grid->>Step: emit entity-selected
     Step->>Dialog: emit entity-selected
@@ -655,7 +898,7 @@ sequenceDiagram
     participant Dialog as GiftedDialog
     participant API as Endorser API
     participant Parent as Parent Component
-    
+
     Form->>Dialog: emit submit
     Dialog->>Dialog: handleSubmit()
     Dialog->>API: createAndSubmitGive()
@@ -672,7 +915,7 @@ sequenceDiagram
     participant Input as AmountInput
     participant Step as GiftDetailsStep
     participant Dialog as GiftedDialog
-    
+
     Input->>Step: emit update:value
     Step->>Dialog: emit update:amount
     Dialog->>Dialog: handleAmountUpdate()
@@ -687,7 +930,7 @@ sequenceDiagram
 <template>
   <div>
     <button @click="openGiftDialog">Record Gift</button>
-    
+
     <GiftedDialog
       ref="giftedDialog"
       :show-projects="false"
@@ -719,7 +962,7 @@ export default class BasicExample extends Vue {
   <div>
     <button @click="recordGiftFromProject">Gift from Project</button>
     <button @click="recordGiftToProject">Gift to Project</button>
-    
+
     <GiftedDialog
       ref="giftedDialog"
       :from-project-id="project.handleId"
@@ -740,7 +983,7 @@ import { PlanData } from "@/interfaces/records";
 export default class ProjectExample extends Vue {
   @Prop({ required: true })
   project!: PlanData;
-  
+
   recordGiftFromProject() {
     const dialog = this.$refs.giftedDialog as GiftedDialog;
     const projectEntity = {
@@ -749,7 +992,7 @@ export default class ProjectExample extends Vue {
       handleId: this.project.handleId,
       image: this.project.image
     };
-    
+
     dialog.open(
       projectEntity,
       undefined,
@@ -759,7 +1002,7 @@ export default class ProjectExample extends Vue {
       this.handleGiftSuccess
     );
   }
-  
+
   recordGiftToProject() {
     const dialog = this.$refs.giftedDialog as GiftedDialog;
     const projectEntity = {
@@ -768,7 +1011,7 @@ export default class ProjectExample extends Vue {
       handleId: this.project.handleId,
       image: this.project.image
     };
-    
+
     dialog.open(
       undefined,
       projectEntity,
@@ -778,7 +1021,7 @@ export default class ProjectExample extends Vue {
       this.handleGiftSuccess
     );
   }
-  
+
   handleGiftSuccess(amount: number) {
     this.$notify({
       title: "Success",
@@ -816,33 +1059,33 @@ import { GiverReceiverInputInfo } from "@/libs/util";
 export default class AdvancedExample extends Vue {
   private contextProjectId = "";
   private recipientProjectId = "";
-  
+
   get showProjectsInDialog(): boolean {
     return this.$route.name === "projects" || this.hasProjectContext;
   }
-  
+
   get isProjectContext(): boolean {
     return !!this.contextProjectId || !!this.recipientProjectId;
   }
-  
+
   get hasProjectContext(): boolean {
     return this.$route.params.projectId !== undefined;
   }
-  
+
   async openContextualDialog() {
     const dialog = this.$refs.giftedDialog as GiftedDialog;
-    
+
     // Determine context from route
     if (this.$route.name === "project-view") {
       this.contextProjectId = this.$route.params.projectId as string;
     }
-    
+
     // Load project data if needed
     let projectEntity: GiverReceiverInputInfo | undefined;
     if (this.contextProjectId) {
       projectEntity = await this.loadProjectEntity(this.contextProjectId);
     }
-    
+
     // Open with appropriate context
     dialog.open(
       projectEntity,
@@ -853,7 +1096,7 @@ export default class AdvancedExample extends Vue {
       this.handleContextualSuccess
     );
   }
-  
+
   private async loadProjectEntity(projectId: string): Promise<GiverReceiverInputInfo> {
     // Load project data from API or database
     const project = await this.fetchProject(projectId);
@@ -864,21 +1107,21 @@ export default class AdvancedExample extends Vue {
       image: project.image
     };
   }
-  
+
   private generateContextualTitle(): string {
     if (this.contextProjectId) {
       return "Record Project Gift";
     }
     return "Record Gift";
   }
-  
+
   private generateContextualPrompt(): string {
     if (this.contextProjectId) {
       return "What did this project provide or receive?";
     }
     return "What was given?";
   }
-  
+
   private handleContextualSuccess(amount: number) {
     // Handle success with context awareness
     this.$notify({
@@ -886,7 +1129,7 @@ export default class AdvancedExample extends Vue {
       text: `Successfully recorded ${amount} hour gift`,
       type: "success"
     });
-    
+
     // Navigate or refresh based on context
     if (this.$route.name === "project-view") {
       this.$router.push({ name: "project-activities" });
@@ -912,19 +1155,19 @@ describe('AmountInput', () => {
     const wrapper = mount(AmountInput, {
       props: { value: 5, min: 0, max: 10, step: 1 }
     });
-    
+
     const incrementButton = wrapper.find('[data-testid="increment-button"]');
     await incrementButton.trigger('click');
-    
+
     expect(wrapper.emitted('update:value')).toBeTruthy();
     expect(wrapper.emitted('update:value')![0]).toEqual([6]);
   });
-  
+
   it('disables decrement button at minimum value', () => {
     const wrapper = mount(AmountInput, {
       props: { value: 0, min: 0, max: 10, step: 1 }
     });
-    
+
     const decrementButton = wrapper.find('[data-testid="decrement-button"]');
     expect(decrementButton.attributes('disabled')).toBeDefined();
   });
@@ -943,31 +1186,31 @@ describe('GiftedDialog Integration', () => {
     const wrapper = mount(GiftedDialog, {
       props: { showProjects: false }
     });
-    
+
     // Open dialog
     await wrapper.vm.open();
     expect(wrapper.vm.visible).toBe(true);
     expect(wrapper.vm.currentStep).toBe(1);
-    
+
     // Select giver
     const personCard = wrapper.find('[data-testid="person-card-0"]');
     await personCard.trigger('click');
-    
+
     // Should advance to step 2
     expect(wrapper.vm.currentStep).toBe(2);
     expect(wrapper.vm.giver).toBeDefined();
-    
+
     // Fill form
     const descriptionInput = wrapper.find('[data-testid="description-input"]');
     await descriptionInput.setValue('Test gift');
-    
+
     const amountInput = wrapper.find('[data-testid="amount-input"]');
     await amountInput.setValue('5');
-    
+
     // Submit form
     const submitButton = wrapper.find('[data-testid="submit-button"]');
     await submitButton.trigger('click');
-    
+
     // Should emit success event
     expect(wrapper.emitted('gift-recorded')).toBeTruthy();
   });
@@ -982,28 +1225,28 @@ import { test, expect } from '@playwright/test';
 
 test('Gift recording workflow', async ({ page }) => {
   await page.goto('/');
-  
+
   // Open gift dialog
   await page.click('[data-testid="record-gift-button"]');
-  
+
   // Step 1: Select entities
   await expect(page.locator('.dialog')).toBeVisible();
   await expect(page.locator('text=Choose a person received from:')).toBeVisible();
-  
+
   // Select a person
   await page.click('[data-testid="person-card"]:first-child');
-  
+
   // Step 2: Fill details
   await expect(page.locator('text=What was given?')).toBeVisible();
   await page.fill('[data-testid="description-input"]', 'Helped with coding');
-  
+
   // Increment amount
   await page.click('[data-testid="increment-button"]');
   await page.click('[data-testid="increment-button"]');
-  
+
   // Submit
   await page.click('[data-testid="submit-button"]');
-  
+
   // Verify success
   await expect(page.locator('.notification.success')).toBeVisible();
   await expect(page.locator('.dialog')).not.toBeVisible();
@@ -1015,9 +1258,13 @@ test('Gift recording workflow', async ({ page }) => {
 ### Optimization Strategies
 
 1. **Lazy Loading**: Components are loaded only when needed
+
 2. **Virtual Scrolling**: For large entity lists
+
 3. **Debounced Input**: Amount input changes are debounced
+
 4. **Computed Properties**: Efficient reactive calculations
+
 5. **Event Delegation**: Minimal event listeners
 
 ### Memory Management
@@ -1030,7 +1277,7 @@ export default class GiftedDialog extends Vue {
     this.callbackOnSuccess = undefined;
     this.allContacts = [];
     this.projects = [];
-    
+
     // Cancel pending API requests
     this.cancelPendingRequests();
   }
@@ -1040,8 +1287,11 @@ export default class GiftedDialog extends Vue {
 ### Bundle Size Optimization
 
 - Tree-shaking for unused FontAwesome icons
+
 - Dynamic imports for heavy components
+
 - Shared dependencies between components
+
 - Minimal external dependencies
 
 ## Accessibility Features
@@ -1049,16 +1299,19 @@ export default class GiftedDialog extends Vue {
 ### Keyboard Navigation
 
 - Tab order follows visual flow
+
 - Enter/Space for button activation
+
 - Escape to close dialog
+
 - Arrow keys for amount input
 
 ### Screen Reader Support
 
 ```vue
 <template>
-  <div 
-    role="dialog" 
+  <div
+    role="dialog"
     aria-labelledby="dialog-title"
     aria-modal="true"
     aria-describedby="dialog-description"
@@ -1067,10 +1320,10 @@ export default class GiftedDialog extends Vue {
     <p id="dialog-description">
       Choose who gave and received the gift, then provide details.
     </p>
-    
+
     <!-- Form elements with proper labels -->
     <label for="description-input">Gift Description</label>
-    <input 
+    <input
       id="description-input"
       aria-describedby="description-help"
       aria-required="true"
@@ -1087,14 +1340,14 @@ export default class GiftedDialog extends Vue {
 ```typescript
 export default class GiftedDialog extends Vue {
   private previousFocus: HTMLElement | null = null;
-  
+
   open() {
     // Store current focus
     this.previousFocus = document.activeElement as HTMLElement;
-    
+
     // Show dialog
     this.visible = true;
-    
+
     // Focus first interactive element
     this.$nextTick(() => {
       const firstInput = this.$el.querySelector('button, input, select');
@@ -1103,10 +1356,10 @@ export default class GiftedDialog extends Vue {
       }
     });
   }
-  
+
   cancel() {
     this.visible = false;
-    
+
     // Restore previous focus
     if (this.previousFocus) {
       this.previousFocus.focus();
@@ -1124,12 +1377,12 @@ export default class GiftedDialog extends Vue {
 validateDescription(description: string): boolean {
   // Remove potentially dangerous characters
   const sanitized = description.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
-  
+
   // Check length limits
   if (sanitized.length > 500) {
     return false;
   }
-  
+
   return true;
 }
 
@@ -1138,12 +1391,12 @@ validateAmount(amount: number): boolean {
   if (amount < 0 || amount > 10000) {
     return false;
   }
-  
+
   // Check for valid number
   if (!Number.isFinite(amount)) {
     return false;
   }
-  
+
   return true;
 }
 ```
@@ -1154,7 +1407,7 @@ validateAmount(amount: number): boolean {
 // Ensure DIDs are only shared with authorized contacts
 function shouldShowDid(contact: Contact, currentUser: string): boolean {
   // Only show DID if user has explicitly authorized this contact
-  return contact.registeredByDid === currentUser || 
+  return contact.registeredByDid === currentUser ||
          contact.did === currentUser ||
          contact.isPublic === true;
 }
@@ -1169,10 +1422,10 @@ async function submitGift(giftData: GiftData): Promise<void> {
   if (!this.validateGiftData(giftData)) {
     throw new Error('Invalid gift data');
   }
-  
+
   // Sign request with user's private key
   const signedRequest = await this.signRequest(giftData);
-  
+
   // Send to endorser server with proper headers
   const response = await fetch('/api/claims', {
     method: 'POST',
@@ -1183,7 +1436,7 @@ async function submitGift(giftData: GiftData): Promise<void> {
     },
     body: JSON.stringify(signedRequest)
   });
-  
+
   if (!response.ok) {
     throw new Error('Failed to submit gift');
   }
@@ -1198,6 +1451,6 @@ The GiftedDialog system represents a sophisticated, well-architected solution fo
 
 The modular architecture ensures maintainability and testability, while the flexible integration patterns allow for seamless embedding in various contexts throughout the application. The comprehensive documentation and testing strategies ensure long-term sustainability and ease of development.
 
-**Author**: Matthew Raymer  
-**Last Updated**: 2025-06-30  
-**Version**: 1.0.0 
\ No newline at end of file
+**Author**: Matthew Raymer
+**Last Updated**: 2025-06-30
+**Version**: 1.0.0
\ No newline at end of file