1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

// ═══════════════════════════════════════════════════════════════════
// MEDIATOR PATTERN - STRUCTURAL OVERVIEW
// ═══════════════════════════════════════════════════════════════════
 
/**
 * Mediator Interface
 * 
 * Declares the communication protocol between the mediator and colleagues.
 * Colleagues use this to notify the mediator of events that may require
 * coordination with other colleagues.
 */
interface Mediator {
    /**
     * Central notification method. Colleagues call this when something
     * happens that other colleagues might need to know about.
     * 
     * @param sender - The colleague that triggered the notification
     * @param event - Description of what happened
     * @param data - Optional payload with event details
     */
    notify(sender: Colleague, event: string, data?: any): void;
}
 
/**
 * Colleague Base Class
 * 
 * Provides the common infrastructure for all mediated objects.
 * Each colleague holds a reference to the mediator but knows nothing
 * about other colleagues.
 */
abstract class Colleague {
    protected mediator: Mediator;
    
    constructor(mediator: Mediator) {
        this.mediator = mediator;
    }
    
    /**
     * Convenience method for subclasses to notify the mediator
     */
    protected send(event: string, data?: any): void {
        this.mediator.notify(this, event, data);
    }
}
 
/**
 * Concrete Mediator
 * 
 * Implements the actual coordination logic. This is where the
 * "intelligence" of the interaction lives. The mediator:
 * 
 * 1. Receives notifications from colleagues
 * 2. Interprets what coordination is needed
 * 3. Calls appropriate methods on relevant colleagues
 */
class ConcreteMediator implements Mediator {
    // The mediator maintains references to all colleagues
    private colleagueA: ConcreteColleagueA;
    private colleagueB: ConcreteColleagueB;
    private colleagueC: ConcreteColleagueC;
    
    // Registration allows dynamic colleague management
    public registerColleagueA(colleague: ConcreteColleagueA): void {
        this.colleagueA = colleague;
    }
    
    public registerColleagueB(colleague: ConcreteColleagueB): void {
        this.colleagueB = colleague;
    }
    
    public registerColleagueC(colleague: ConcreteColleagueC): void {
        this.colleagueC = colleague;
    }
    
    /**
     * Central coordination logic
     * 
     * This method contains all the interaction rules that were previously
     * scattered across the colleague classes. It's the single source of
     * truth for how colleagues should coordinate.
     */
    public notify(sender: Colleague, event: string, data?: any): void {
        // Coordination logic is centralized here
        if (sender === this.colleagueA && event === "actionX") {
            // When A does X, B and C need to react
            this.colleagueB.reactToX(data);
            this.colleagueC.updateFromX(data);
        }
        
        if (sender === this.colleagueB && event === "actionY") {
            // When B does Y, only A needs to react
            this.colleagueA.handleY(data);
        }
        
        if (event === "stateChange") {
            // Any colleague's state change might affect others
            // This is where complex coordination logic lives
            this.synchronizeState();
        }
    }
    
    private synchronizeState(): void {
        // Complex multi-party synchronization logic
        // Previously this would be duplicated across colleagues
    }
}
 
/**
 * Concrete Colleagues
 * 
 * Each colleague implements its own behavior but coordinates through
 * the mediator. Notice that colleagues never reference each other.
 */
class ConcreteColleagueA extends Colleague {
    public doActionX(): void {
        // Perform local action
        console.log("ColleagueA performing action X");
        
        // Notify mediator - let it coordinate with others
        this.send("actionX", { origin: "A", timestamp: Date.now() });
    }
    
    public handleY(data: any): void {
        // React to coordination from mediator
        console.log("ColleagueA handling Y:", data);
    }
}
 
class ConcreteColleagueB extends Colleague {
    public doActionY(): void {
        console.log("ColleagueB performing action Y");
        this.send("actionY", { origin: "B" });
    }
    
    public reactToX(data: any): void {
        console.log("ColleagueB reacting to X:", data);
    }
}
 
class ConcreteColleagueC extends Colleague {
    public updateFromX(data: any): void {
        console.log("ColleagueC updating from X:", data);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463

// ═══════════════════════════════════════════════════════════════════
// MEDIATOR PATTERN - USER PROFILE DIALOG EXAMPLE
// ═══════════════════════════════════════════════════════════════════
 
// ─────────────────────────────────────────────────────────────────────
// STEP 1: Define the Mediator Interface
// ─────────────────────────────────────────────────────────────────────
 
/**
 * DialogMediator - contract for dialog coordination
 * 
 * All UI components in the dialog will communicate through this interface.
 * The mediator receives component events and orchestrates responses.
 */
interface DialogMediator {
    componentChanged(component: DialogComponent, event: ComponentEvent): void;
}
 
/**
 * Event structure for component communications
 */
interface ComponentEvent {
    type: string;
    value?: any;
    metadata?: Record<string, any>;
}
 
// ─────────────────────────────────────────────────────────────────────
// STEP 2: Define the Colleague Base Class
// ─────────────────────────────────────────────────────────────────────
 
/**
 * DialogComponent - base class for all UI components in the dialog
 * 
 * Each component holds a reference to the mediator but knows nothing
 * about other components. Components are fully independent and reusable.
 */
abstract class DialogComponent {
    protected mediator: DialogMediator;
    protected enabled: boolean = true;
    protected visible: boolean = true;
    
    constructor(mediator: DialogMediator) {
        this.mediator = mediator;
    }
    
    /**
     * Notify the mediator that something changed
     * Subclasses call this instead of directly manipulating other components
     */
    protected notifyChange(event: ComponentEvent): void {
        this.mediator.componentChanged(this, event);
    }
    
    public enable(): void {
        this.enabled = true;
        console.log(`  [${this.constructor.name}] enabled`);
    }
    
    public disable(): void {
        this.enabled = false;
        console.log(`  [${this.constructor.name}] disabled`);
    }
    
    public show(): void {
        this.visible = true;
        console.log(`  [${this.constructor.name}] shown`);
    }
    
    public hide(): void {
        this.visible = false;
        console.log(`  [${this.constructor.name}] hidden`);
    }
    
    public isEnabled(): boolean {
        return this.enabled;
    }
    
    public isVisible(): boolean {
        return this.visible;
    }
}
 
// ─────────────────────────────────────────────────────────────────────
// STEP 3: Implement Concrete UI Components (Colleagues)
// ─────────────────────────────────────────────────────────────────────
 
/**
 * TextInput - handles text entry
 * 
 * Notice: This class has NO knowledge of dropdowns, buttons, or any
 * other component. It only knows about the mediator.
 */
class TextInput extends DialogComponent {
    private value: string = "";
    private placeholder: string = "Enter text...";
    private maxLength: number = 100;
    
    public getValue(): string {
        return this.value;
    }
    
    public setValue(value: string): void {
        if (!this.enabled) return;
        
        this.value = value.substring(0, this.maxLength);
        console.log(`  [TextInput] value changed to: "${this.value}"`);
        
        // Notify mediator - let it decide what else should happen
        this.notifyChange({
            type: "textChanged",
            value: this.value,
            metadata: { isEmpty: this.value.length === 0 }
        });
    }
    
    public setPlaceholder(placeholder: string): void {
        this.placeholder = placeholder;
        console.log(`  [TextInput] placeholder: "${placeholder}"`);
    }
    
    public setMaxLength(length: number): void {
        this.maxLength = length;
    }
    
    public clear(): void {
        this.setValue("");
    }
}
 
/**
 * Dropdown - handles option selection
 */
class Dropdown extends DialogComponent {
    private options: string[] = [];
    private selectedValue: string | null = null;
    
    public setOptions(options: string[]): void {
        this.options = options;
        console.log(`  [Dropdown] options set: [${options.join(", ")}]`);
    }
    
    public select(value: string): void {
        if (!this.enabled) return;
        if (!this.options.includes(value)) return;
        
        this.selectedValue = value;
        console.log(`  [Dropdown] selected: "${value}"`);
        
        this.notifyChange({
            type: "selectionChanged",
            value: this.selectedValue
        });
    }
    
    public getSelectedValue(): string | null {
        return this.selectedValue;
    }
    
    public clearSelection(): void {
        this.selectedValue = null;
        console.log(`  [Dropdown] selection cleared`);
    }
}
 
/**
 * Checkbox - handles boolean state
 */
class Checkbox extends DialogComponent {
    private checked: boolean = false;
    private label: string;
    
    constructor(mediator: DialogMediator, label: string) {
        super(mediator);
        this.label = label;
    }
    
    public toggle(): void {
        if (!this.enabled) return;
        
        this.checked = !this.checked;
        console.log(`  [Checkbox:${this.label}] toggled to: ${this.checked}`);
        
        this.notifyChange({
            type: "checkboxToggled",
            value: this.checked,
            metadata: { label: this.label }
        });
    }
    
    public isChecked(): boolean {
        return this.checked;
    }
    
    public setChecked(checked: boolean): void {
        this.checked = checked;
        console.log(`  [Checkbox:${this.label}] set to: ${checked}`);
    }
}
 
/**
 * Button - handles click actions
 */
class Button extends DialogComponent {
    private text: string;
    
    constructor(mediator: DialogMediator, text: string) {
        super(mediator);
        this.text = text;
    }
    
    public click(): void {
        if (!this.enabled) return;
        
        console.log(`  [Button:${this.text}] clicked`);
        
        this.notifyChange({
            type: "buttonClicked",
            metadata: { buttonText: this.text }
        });
    }
    
    public setText(text: string): void {
        this.text = text;
        console.log(`  [Button] text changed to: "${text}"`);
    }
}
 
/**
 * ValidationLabel - displays validation messages
 */
class ValidationLabel extends DialogComponent {
    private message: string = "";
    private isError: boolean = false;
    
    public showError(message: string): void {
        this.message = message;
        this.isError = true;
        console.log(`  [ValidationLabel] ERROR: ${message}`);
    }
    
    public showSuccess(message: string): void {
        this.message = message;
        this.isError = false;
        console.log(`  [ValidationLabel] SUCCESS: ${message}`);
    }
    
    public clear(): void {
        this.message = "";
        this.isError = false;
        console.log(`  [ValidationLabel] cleared`);
    }
    
    public hasError(): boolean {
        return this.isError;
    }
}
 
/**
 * PreviewPanel - shows real-time preview
 */
class PreviewPanel extends DialogComponent {
    private previewContent: string = "";
    
    public updatePreview(content: string): void {
        this.previewContent = content;
        console.log(`  [PreviewPanel] preview updated`);
    }
    
    public clearPreview(): void {
        this.previewContent = "";
        console.log(`  [PreviewPanel] preview cleared`);
    }
    
    public getPreview(): string {
        return this.previewContent;
    }
}
 
// ─────────────────────────────────────────────────────────────────────
// STEP 4: Implement the Concrete Mediator
// ─────────────────────────────────────────────────────────────────────
 
/**
 * ProfileDialogMediator - coordinates all dialog interactions
 * 
 * This is where ALL coordination logic lives. Notice:
 * 1. It knows about all components
 * 2. It contains all the "business rules" for how components interact
 * 3. Components are blissfully unaware of each other
 */
class ProfileDialogMediator implements DialogMediator {
    // Component references
    private usernameInput: TextInput;
    private accountTypeDropdown: Dropdown;
    private enableNotificationsCheckbox: Checkbox;
    private advancedSettingsCheckbox: Checkbox;
    private submitButton: Button;
    private resetButton: Button;
    private validationLabel: ValidationLabel;
    private previewPanel: PreviewPanel;
    
    /**
     * Initialize the dialog with all its components
     * The mediator is the factory and coordinator
     */
    public initialize(): void {
        // Create all components with this mediator
        this.usernameInput = new TextInput(this);
        this.accountTypeDropdown = new Dropdown(this);
        this.enableNotificationsCheckbox = new Checkbox(this, "Enable Notifications");
        this.advancedSettingsCheckbox = new Checkbox(this, "Advanced Settings");
        this.submitButton = new Button(this, "Submit");
        this.resetButton = new Button(this, "Reset");
        this.validationLabel = new ValidationLabel(this);
        this.previewPanel = new PreviewPanel(this);
        
        // Set initial states
        this.accountTypeDropdown.setOptions(["Personal", "Business", "Enterprise"]);
        this.submitButton.disable(); // Disabled until valid input
        
        console.log("\n✅ ProfileDialogMediator initialized\n");
    }
    
    /**
     * Central coordination hub - all component events flow through here
     * 
     * This replaces the scattered logic that was previously in each component.
     * All business rules are explicit and documented in one place.
     */
    public componentChanged(component: DialogComponent, event: ComponentEvent): void {
        console.log(`\n📬 Mediator received: ${event.type}`);
        
        // ─────────────────────────────────────────────────────────────
        // RULE 1: Username validation and submit button state
        // ─────────────────────────────────────────────────────────────
        if (component === this.usernameInput && event.type === "textChanged") {
            const username = event.value as string;
            const isValid = this.validateUsername(username);
            
            if (isValid) {
                this.validationLabel.showSuccess("Username is valid");
                this.submitButton.enable();
            } else if (username.length === 0) {
                this.validationLabel.clear();
                this.submitButton.disable();
            } else {
                this.validationLabel.showError("Username must be 3-20 characters");
                this.submitButton.disable();
            }
            
            // Update preview
            this.updateLivePreview();
        }
        
        // ─────────────────────────────────────────────────────────────
        // RULE 2: Account type affects available options
        // ─────────────────────────────────────────────────────────────
        if (component === this.accountTypeDropdown && event.type === "selectionChanged") {
            const accountType = event.value as string;
            
            // Business rule: Enterprise accounts get advanced settings
            if (accountType === "Enterprise") {
                this.advancedSettingsCheckbox.show();
                this.advancedSettingsCheckbox.enable();
                this.usernameInput.setPlaceholder("Enter enterprise username...");
                this.usernameInput.setMaxLength(50);
            } else {
                this.advancedSettingsCheckbox.hide();
                this.advancedSettingsCheckbox.setChecked(false);
                this.usernameInput.setPlaceholder("Enter username...");
                this.usernameInput.setMaxLength(20);
            }
            
            // Business rule: Business accounts have notifications on by default
            if (accountType === "Business") {
                this.enableNotificationsCheckbox.setChecked(true);
            }
            
            this.updateLivePreview();
        }
        
        // ─────────────────────────────────────────────────────────────
        // RULE 3: Checkbox interactions
        // ─────────────────────────────────────────────────────────────
        if (event.type === "checkboxToggled") {
            this.updateLivePreview();
        }
        
        // ─────────────────────────────────────────────────────────────
        // RULE 4: Button actions
        // ─────────────────────────────────────────────────────────────
        if (component === this.submitButton && event.type === "buttonClicked") {
            this.handleSubmit();
        }
        
        if (component === this.resetButton && event.type === "buttonClicked") {
            this.handleReset();
        }
    }
    
    /**
     * Business logic: Username validation rules
     */
    private validateUsername(username: string): boolean {
        return username.length >= 3 && username.length <= 20;
    }
    
    /**
     * Coordinate the preview update across relevant components
     */
    private updateLivePreview(): void {
        const username = this.usernameInput.getValue();
        const accountType = this.accountTypeDropdown.getSelectedValue() || "Not selected";
        const notifications = this.enableNotificationsCheckbox.isChecked();
        const advanced = this.advancedSettingsCheckbox.isChecked();
        
        const preview = [
            `Username: ${username || "(empty)"}`,
            `Account Type: ${accountType}`,
            `Notifications: ${notifications ? "Enabled" : "Disabled"}`,
            advanced ? `Advanced Settings: Enabled` : ""
        ].filter(Boolean).join(" | ");
        
        this.previewPanel.updatePreview(preview);
    }
    
    /**
     * Handle form submission
     */
    private handleSubmit(): void {
        console.log("\n🚀 Form submitted!");
        console.log(`   Preview: ${this.previewPanel.getPreview()}`);
        // In real app: send data to server, close dialog, etc.
    }
    
    /**
     * Handle form reset
     */
    private handleReset(): void {
        console.log("\n🔄 Form reset");
        this.usernameInput.clear();
        this.accountTypeDropdown.clearSelection();
        this.enableNotificationsCheckbox.setChecked(false);
        this.advancedSettingsCheckbox.setChecked(false);
        this.advancedSettingsCheckbox.hide();
        this.validationLabel.clear();
        this.previewPanel.clearPreview();
        this.submitButton.disable();
    }
    
    // Expose components for testing/demonstration
    public getComponents() {
        return {
            usernameInput: this.usernameInput,
            accountTypeDropdown: this.accountTypeDropdown,
            enableNotificationsCheckbox: this.enableNotificationsCheckbox,
            advancedSettingsCheckbox: this.advancedSettingsCheckbox,
            submitButton: this.submitButton,
            resetButton: this.resetButton,
        };
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

// ═══════════════════════════════════════════════════════════════════
// TRACING COMMUNICATION FLOW
// ═══════════════════════════════════════════════════════════════════
 
/**
 * Demonstration of a complete interaction flow
 */
function demonstrateCommunicationFlow(): void {
    // Initialize the mediated dialog
    const mediator = new ProfileDialogMediator();
    mediator.initialize();
    
    const { usernameInput, accountTypeDropdown, submitButton } = mediator.getComponents();
    
    console.log("═══════════════════════════════════════════════════════════");
    console.log("FLOW 1: User types a valid username");
    console.log("═══════════════════════════════════════════════════════════");
    
    // Step 1: User types "john" in the username field
    // This triggers this sequence:
    usernameInput.setValue("john");
    
    // Flow trace:
    // 1. TextInput.setValue("john") executes
    // 2. TextInput stores the value
    // 3. TextInput calls this.notifyChange({ type: "textChanged", value: "john" })
    // 4. This calls mediator.componentChanged(usernameInput, event)
    // 5. Mediator recognizes the event and sender
    // 6. Mediator calls validateUsername("john") → returns true
    // 7. Mediator calls validationLabel.showSuccess(...)
    // 8. Mediator calls submitButton.enable()
    // 9. Mediator calls updateLivePreview()
    
    console.log("\n═══════════════════════════════════════════════════════════");
    console.log("FLOW 2: User selects 'Enterprise' account type");
    console.log("═══════════════════════════════════════════════════════════");
    
    accountTypeDropdown.select("Enterprise");
    
    // Flow trace:
    // 1. Dropdown.select("Enterprise") executes
    // 2. Dropdown stores the selection
    // 3. Dropdown calls this.notifyChange({ type: "selectionChanged", value: "Enterprise" })
    // 4. Mediator.componentChanged receives the event
    // 5. Mediator checks the value and applies business rules:
    //    - Shows and enables advancedSettingsCheckbox
    //    - Changes username placeholder to enterprise version
    //    - Sets max length to 50
    // 6. Mediator updates the live preview
    
    console.log("\n═══════════════════════════════════════════════════════════");
    console.log("FLOW 3: User clicks Submit");  
    console.log("═══════════════════════════════════════════════════════════");
    
    submitButton.click();
    
    // Flow trace:
    // 1. Button.click() executes
    // 2. Button calls this.notifyChange({ type: "buttonClicked", ... })
    // 3. Mediator identifies the Submit button clicked
    // 4. Mediator calls handleSubmit() - internal method
    // 5. Form data is processed/sent
}
 
// Execute the demonstration
demonstrateCommunicationFlow();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Static registration - colleagues fixed at construction time
 
class StaticMediator implements DialogMediator {
    // Colleagues defined as constructor parameters
    constructor(
        private textInput: TextInput,
        private dropdown: Dropdown,
        private submitButton: Button
    ) {
        // All colleagues known at construction
    }
    
    public componentChanged(component: DialogComponent, event: ComponentEvent): void {
        // Safe to use all colleagues - guaranteed to exist
    }
}
 
// Usage
const input = new TextInput(/* mediator needed first - circular dependency! */);
 
// Problem: Circular dependency between mediator and colleagues

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// Dynamic registration - colleagues added after construction
 
class DynamicMediator implements DialogMediator {
    private textInput?: TextInput;
    private dropdown?: Dropdown;
    private submitButton?: Button;
    
    // Explicit registration methods
    public registerTextInput(input: TextInput): void {
        this.textInput = input;
    }
    
    public registerDropdown(dropdown: Dropdown): void {
        this.dropdown = dropdown;
    }
    
    public registerSubmitButton(button: Button): void {
        this.submitButton = button;
    }
    
    public componentChanged(component: DialogComponent, event: ComponentEvent): void {
        // Must check for existence before use
        if (this.textInput && component === this.textInput) {
            // Handle text input events
        }
    }
}
 
// Usage - no circular dependency
const mediator = new DynamicMediator();
const input = new TextInput(mediator);
mediator.registerTextInput(input);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// Generic registration - type-keyed colleague storage
 
class FlexibleMediator implements DialogMediator {
    private colleagues: Map<string, DialogComponent> = new Map();
    
    // Register by name or type
    public register(name: string, colleague: DialogComponent): void {
        this.colleagues.set(name, colleague);
    }
    
    public getColleague<T extends DialogComponent>(name: string): T | undefined {
        return this.colleagues.get(name) as T | undefined;
    }
    
    public componentChanged(component: DialogComponent, event: ComponentEvent): void {
        const submitButton = this.getColleague<Button>("submitButton");
        const validationLabel = this.getColleague<ValidationLabel>("validation");
        
        // Use retrieved colleagues...
    }
}
 
// Advantages:
// - Highly flexible - any number of colleagues
// - Easy to add new colleagues without interface changes
// - Supports optional colleagues naturally
 
// Disadvantages:
// - Loses compile-time type safety
// - Relies on string keys (typo-prone)
// - Must check existence at runtime

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

// ═══════════════════════════════════════════════════════════════════
// MEDIATOR INTERFACE DESIGN PATTERNS
// ═══════════════════════════════════════════════════════════════════
 
// ─────────────────────────────────────────────────────────────────────
// PATTERN 1: Generic Notification (Used in our examples)
// ─────────────────────────────────────────────────────────────────────
 
/**
 * Single generic method handles all communication
 * 
 * Pros: Simple interface, extensible without interface changes
 * Cons: Stringly-typed events, switch/if statements in implementation
 */
interface GenericMediator {
    notify(sender: object, event: string, data?: any): void;
}
 
// ─────────────────────────────────────────────────────────────────────
// PATTERN 2: Specific Methods
// ─────────────────────────────────────────────────────────────────────
 
/**
 * Dedicated methods for each type of notification
 * 
 * Pros: Type-safe, self-documenting, IDE autocomplete
 * Cons: Interface grows with each new event type
 */
interface SpecificMediator {
    onTextInputChanged(input: TextInput, newValue: string): void;
    onDropdownSelected(dropdown: Dropdown, selectedValue: string): void;
    onCheckboxToggled(checkbox: Checkbox, checked: boolean): void;
    onButtonClicked(button: Button): void;
}
 
// ─────────────────────────────────────────────────────────────────────
// PATTERN 3: Typed Event Objects
// ─────────────────────────────────────────────────────────────────────
 
/**
 * Strongly-typed event hierarchy
 * 
 * Pros: Type safety with extensibility, pattern matching in handler
 * Cons: More boilerplate, event class hierarchy needed
 */
interface MediatorEvent {
    readonly sender: DialogComponent;
}
 
class TextChangedEvent implements MediatorEvent {
    constructor(
        public readonly sender: TextInput,
        public readonly newValue: string,
        public readonly previousValue: string
    ) {}
}
 
class SelectionChangedEvent implements MediatorEvent {
    constructor(
        public readonly sender: Dropdown,
        public readonly selectedValue: string
    ) {}
}
 
interface TypedMediator {
    handle(event: MediatorEvent): void;
}
 
class TypedMediatorImpl implements TypedMediator {
    handle(event: MediatorEvent): void {
        if (event instanceof TextChangedEvent) {
            // Type-safe access to event.newValue, event.previousValue
            this.handleTextChange(event);
        } else if (event instanceof SelectionChangedEvent) {
            // Type-safe access to event.selectedValue
            this.handleSelection(event);
        }
    }
    
    private handleTextChange(event: TextChangedEvent): void {
        console.log(`Text changed from "${event.previousValue}" to "${event.newValue}"`);
    }
    
    private handleSelection(event: SelectionChangedEvent): void {
        console.log(`Selected: ${event.selectedValue}`);
    }
}
 
// ─────────────────────────────────────────────────────────────────────
// PATTERN 4: Command-Style (with explicit response)
// ─────────────────────────────────────────────────────────────────────
 
/**
 * Request-response pattern for two-way communication
 * 
 * Pros: Colleagues can get information back from mediator
 * Cons: More complex, may introduce blocking
 */
interface RequestResponseMediator {
    send<TResponse>(request: MediatorRequest<TResponse>): TResponse;
}
 
interface MediatorRequest<TResponse> {
    execute(mediator: RequestResponseMediatorImpl): TResponse;
}
 
class ValidateUsernameRequest implements MediatorRequest<boolean> {
    constructor(private username: string) {}
    
    execute(mediator: RequestResponseMediatorImpl): boolean {
        return mediator.validateUsername(this.username);
    }
}
 
class RequestResponseMediatorImpl implements RequestResponseMediator {
    send<TResponse>(request: MediatorRequest<TResponse>): TResponse {
        return request.execute(this);
    }
    
    validateUsername(username: string): boolean {
        return username.length >= 3;
    }
}