Mediator — Give collaboration a home

01 / A useful direct call grows into a collaboration rule

Which pane is responsible for the other panes?

With a preview and an inspector, letting a click handler update both can be perfectly clear. Add a toolbar, read-only blocks, clearing selection, and edits that originate in the inspector. Now several handlers must remember the same relationships.

A preview that calls the inspector and toolbar directly knows more than how to display a block. An inspector that renames a block and refreshes its siblings now knows the collaboration too. Adding another participant means finding every place that needs to involve it.

A Mediator owns the rules for how a set of participants work together. Intent reaches it through the handlers setup gives each control: a click in the preview, a submit in the inspector, a clear from the toolbar. It decides which collaborators to involve and what values to supply, and the pane objects only receive those values. They can use narrow interfaces without holding references to one another—or, unlike GoF’s colleagues, to the mediator itself, so no pane depends on the coordinator.

The dependencies have a new home; they have not disappeared. The mediator deliberately knows this workspace’s interaction rules. It should be small enough that you can explain those rules together.

Control handler → intent

Say what the user requested.

A click in the preview selects a block. A submit in the inspector sends a title for a captured block ID. The toolbar’s clear button clears selection. The pane objects only render what the coordinator sends them.

Mediator → collaboration

Keep the workspace coherent.

Own the current selection, check an edit’s target, and send accepted state to the three panes.

Document → rules

Protect the content.

The document decides whether a block can be renamed and whether the proposed title is valid.

02 / Name the incoming intents and outgoing updates

Selection is one decision with three destinations.

The basic view excerpts select and publish from the complete mediator. An accepted selection sends a value to Preview and Inspector, then sends the selected block’s rename policy to Toolbar. Each pane receives its own value; changing a pane’s copy cannot edit the document.

The practical view adds the document, narrow output ports, input actions, editing, and closure. The document contains Introduction, a read-only Cover, and Next steps. Exact IDs are intro, cover, and outro. Unknown IDs leave selection unchanged.

A rename includes its target ID. The coordinator checks that the workspace is open, that a block is selected, and that the target still matches. The document then checks editability and a nonempty title, or reports no change when the title already matches. Text is preserved exactly, whitespace included.

Read in

Compare with

The selection and publication methods from the full mediator. One accepted selection supplies values to Preview, Inspector, and Toolbar. These are source excerpts; the practical view supplies the ports and document.

TypeScriptReading

workspace.ts

select(id: string): Outcome {
	this.delivered = [];
	if (!this.active) return 'closed';
	if (!this.document.find(id)) return 'unknown-block';
	if (id === this.selected) return 'unchanged';
	this.selected = id;
	this.publish();
	return 'updated';
}
private publish(): void {
	const block = this.selected === null ? null : this.document.find(this.selected);
	// Separate values for each pane. show() must not emit a new user intent.
	this.preview.show(block ? { ...block } : null);
	this.delivered.push('preview.show');
	this.inspector.show(block ? { ...block } : null);
	this.delivered.push('inspector.show');
	this.toolbar.setRenameEnabled(block?.editable ?? false);
	this.delivered.push('toolbar.setRenameEnabled');
}

GoAlongside

workspace.go

func (m *EditorMediator) Select(id string) Outcome {
	m.delivered = nil
	if !m.active {
		return Closed
	}
	if m.document.Find(id) == nil {
		return UnknownBlock
	}
	if id == m.selected {
		return Unchanged
	}
	m.selected = id
	m.publish()
	return Updated
}
func (m *EditorMediator) publish() {
	block := m.document.Find(m.selected)
	// Show updates silently. It must not emit a new user intent.
	m.preview.Show(copyBlock(block))
	m.delivered = append(m.delivered, "preview.show")
	m.inspector.Show(copyBlock(block))
	m.delivered = append(m.delivered, "inspector.show")
	m.toolbar.SetRenameEnabled(block != nil && block.Editable)
	m.delivered = append(m.delivered, "toolbar.setRenameEnabled")
}

Read complete examples without JavaScript

TypeScript source

workspace.ts

// Authored, synchronous workspace. Pane updates are silent and do not fail.
export type Outcome =
	| 'updated'
	| 'unchanged'
	| 'unknown-block'
	| 'no-selection'
	| 'stale-edit'
	| 'read-only'
	| 'empty-title'
	| 'closed';
export type Block = { id: string; title: string; editable: boolean };
export interface SelectionPort {
	show(block: Block | null): void;
}
export interface ToolbarPort {
	setRenameEnabled(enabled: boolean): void;
}
export interface EditorActions {
	select(id: string): Outcome;
	rename(targetID: string, title: string): Outcome;
	clear(): Outcome;
}
export class EditorDocument {
	private blocks: Block[] = [
		{ id: 'intro', title: 'Introduction', editable: true },
		{ id: 'cover', title: 'Cover image', editable: false },
		{ id: 'outro', title: 'Next steps', editable: true }
	];
	find(id: string): Block | null {
		const block = this.blocks.find((item) => item.id === id);
		return block ? { ...block } : null;
	}
	snapshot(): Block[] {
		return this.blocks.map((block) => ({ ...block }));
	}
	rename(id: string, title: string): Outcome {
		const block = this.blocks.find((item) => item.id === id);
		if (!block) return 'unknown-block';
		if (!block.editable) return 'read-only';
		if (title === '') return 'empty-title';
		if (title === block.title) return 'unchanged';
		block.title = title;
		return 'updated';
	}
}
export class EditorMediator implements EditorActions {
	private document: EditorDocument;
	private preview: SelectionPort;
	private inspector: SelectionPort;
	private toolbar: ToolbarPort;
	private selected: string | null = null;
	private active = true;
	private delivered: string[] = [];
	constructor(
		document: EditorDocument,
		preview: SelectionPort,
		inspector: SelectionPort,
		toolbar: ToolbarPort
	) {
		this.document = document;
		this.preview = preview;
		this.inspector = inspector;
		this.toolbar = toolbar;
		this.publish();
	}
	select(id: string): Outcome {
		this.delivered = [];
		if (!this.active) return 'closed';
		if (!this.document.find(id)) return 'unknown-block';
		if (id === this.selected) return 'unchanged';
		this.selected = id;
		this.publish();
		return 'updated';
	}
	private publish(): void {
		const block = this.selected === null ? null : this.document.find(this.selected);
		// Separate values for each pane. show() must not emit a new user intent.
		this.preview.show(block ? { ...block } : null);
		this.delivered.push('preview.show');
		this.inspector.show(block ? { ...block } : null);
		this.delivered.push('inspector.show');
		this.toolbar.setRenameEnabled(block?.editable ?? false);
		this.delivered.push('toolbar.setRenameEnabled');
	}
	rename(targetID: string, title: string): Outcome {
		this.delivered = [];
		if (!this.active) return 'closed';
		if (this.selected === null) return 'no-selection';
		if (targetID !== this.selected) return 'stale-edit';
		// The document keeps its own validation and editability rules.
		const result = this.document.rename(targetID, title);
		if (result === 'updated') this.publish();
		return result;
	}
	clear(): Outcome {
		this.delivered = [];
		if (!this.active) return 'closed';
		if (this.selected === null) return 'unchanged';
		this.selected = null;
		this.publish();
		return 'updated';
	}
	close(): Outcome {
		this.delivered = [];
		if (!this.active) return 'unchanged';
		this.active = false;
		// Old references can still exist, but future intents are rejected.
		return 'updated';
	}
	snapshot() {
		return { active: this.active, selected: this.selected, blocks: this.document.snapshot() };
	}
	deliveries(): string[] {
		return [...this.delivered];
	}
}
// Stand-ins for three independent UI colleagues. No sibling references or callbacks.
export class SelectionPanel implements SelectionPort {
	block: Block | null = null;
	updates = 0;
	show(block: Block | null) {
		this.block = block ? { ...block } : null;
		this.updates++;
	}
}
export class ToolbarPanel implements ToolbarPort {
	canRename = false;
	updates = 0;
	setRenameEnabled(enabled: boolean) {
		this.canRename = enabled;
		this.updates++;
	}
}
export function createWorkspace() {
	const preview = new SelectionPanel(),
		inspector = new SelectionPanel(),
		toolbar = new ToolbarPanel();
	const editor = new EditorMediator(new EditorDocument(), preview, inspector, toolbar);
	return { editor, preview, inspector, toolbar };
}

export function runExample(): string[] {
	const workspace = createWorkspace();
	const actions: EditorActions = workspace.editor;
	// Setup passes these intent callbacks to the relevant UI controls.
	const onPreviewSelect = (id: string) => actions.select(id);
	const onInspectorSubmit = (targetID: string, title: string) => actions.rename(targetID, title);
	const lines = [
		`select intro: ${onPreviewSelect('intro')}`,
		`rename intro: ${onInspectorSubmit('intro', 'Release 2')}`,
		`panes: ${workspace.preview.block?.title ?? '<none>'} / ${workspace.inspector.block?.title ?? '<none>'}`
	];
	onPreviewSelect('cover');
	lines.push(`cover rename enabled: ${workspace.toolbar.canRename}`);
	lines.push(`late intro edit: ${onInspectorSubmit('intro', 'Old draft')}`);
	lines.push(`cover edit: ${onInspectorSubmit('cover', 'New cover')}`);
	lines.push(`clear: ${actions.clear()}`);
	workspace.editor.close();
	lines.push(`after close: ${onPreviewSelect('intro')}`);
	return lines;
}

for (const line of runExample()) console.log(line);

Go source

workspace.go

package main

import "fmt"

type Outcome string

const (
	Updated      Outcome = "updated"
	Unchanged    Outcome = "unchanged"
	UnknownBlock Outcome = "unknown-block"
	NoSelection  Outcome = "no-selection"
	StaleEdit    Outcome = "stale-edit"
	ReadOnly     Outcome = "read-only"
	EmptyTitle   Outcome = "empty-title"
	Closed       Outcome = "closed"
)

type Block struct {
	ID, Title string
	Editable  bool
}
type SelectionPort interface{ Show(*Block) }
type ToolbarPort interface{ SetRenameEnabled(bool) }
type EditorActions interface {
	Select(string) Outcome
	Rename(string, string) Outcome
	Clear() Outcome
}
type EditorDocument struct{ blocks []Block }

func NewDocument() *EditorDocument {
	return &EditorDocument{blocks: []Block{
		{ID: "intro", Title: "Introduction", Editable: true},
		{ID: "cover", Title: "Cover image", Editable: false},
		{ID: "outro", Title: "Next steps", Editable: true},
	}}
}
func (d *EditorDocument) Find(id string) *Block {
	for _, b := range d.blocks {
		if b.ID == id {
			found := b
			return &found
		}
	}
	return nil
}
func (d *EditorDocument) Snapshot() []Block { return append([]Block{}, d.blocks...) }
func (d *EditorDocument) Rename(id, title string) Outcome {
	for i := range d.blocks {
		b := &d.blocks[i]
		if b.ID != id {
			continue
		}
		if !b.Editable {
			return ReadOnly
		}
		if title == "" {
			return EmptyTitle
		}
		if title == b.Title {
			return Unchanged
		}
		b.Title = title
		return Updated
	}
	return UnknownBlock
}
func copyBlock(b *Block) *Block {
	if b == nil {
		return nil
	}
	clone := *b
	return &clone
}

type EditorMediator struct {
	document           *EditorDocument
	preview, inspector SelectionPort
	toolbar            ToolbarPort
	selected           string // Empty means no selection; all authored IDs are nonempty.
	active             bool
	delivered          []string
}

func NewMediator(d *EditorDocument, p, i SelectionPort, t ToolbarPort) *EditorMediator {
	m := &EditorMediator{document: d, preview: p, inspector: i, toolbar: t, active: true}
	m.publish()
	return m
}

func (m *EditorMediator) Select(id string) Outcome {
	m.delivered = nil
	if !m.active {
		return Closed
	}
	if m.document.Find(id) == nil {
		return UnknownBlock
	}
	if id == m.selected {
		return Unchanged
	}
	m.selected = id
	m.publish()
	return Updated
}
func (m *EditorMediator) publish() {
	block := m.document.Find(m.selected)
	// Show updates silently. It must not emit a new user intent.
	m.preview.Show(copyBlock(block))
	m.delivered = append(m.delivered, "preview.show")
	m.inspector.Show(copyBlock(block))
	m.delivered = append(m.delivered, "inspector.show")
	m.toolbar.SetRenameEnabled(block != nil && block.Editable)
	m.delivered = append(m.delivered, "toolbar.setRenameEnabled")
}

func (m *EditorMediator) Rename(targetID, title string) Outcome {
	m.delivered = nil
	if !m.active {
		return Closed
	}
	if m.selected == "" {
		return NoSelection
	}
	if targetID != m.selected {
		return StaleEdit
	}
	result := m.document.Rename(targetID, title)
	if result == Updated {
		m.publish()
	}
	return result
}
func (m *EditorMediator) Clear() Outcome {
	m.delivered = nil
	if !m.active {
		return Closed
	}
	if m.selected == "" {
		return Unchanged
	}
	m.selected = ""
	m.publish()
	return Updated
}
func (m *EditorMediator) Close() Outcome {
	m.delivered = nil
	if !m.active {
		return Unchanged
	}
	m.active = false
	return Updated
}

type Snapshot struct {
	Active   bool
	Selected string
	Blocks   []Block
}

func (m *EditorMediator) Snapshot() Snapshot {
	return Snapshot{Active: m.active, Selected: m.selected, Blocks: m.document.Snapshot()}
}
func (m *EditorMediator) Deliveries() []string { return append([]string{}, m.delivered...) }

// Memory colleagues for the lesson. They hold no sibling or mediator references.
// These objects are used by one goroutine at a time; no synchronization is supplied.
type SelectionPanel struct {
	Block   *Block
	Updates int
}

func (p *SelectionPanel) Show(b *Block) { p.Block = copyBlock(b); p.Updates++ }

// Title reports the shown block's title, or <none> when the pane shows no block.
func (p *SelectionPanel) Title() string {
	if p.Block == nil {
		return "<none>"
	}
	return p.Block.Title
}

type ToolbarPanel struct {
	CanRename bool
	Updates   int
}

func (p *ToolbarPanel) SetRenameEnabled(v bool) { p.CanRename = v; p.Updates++ }

type Workspace struct {
	Editor             *EditorMediator
	Preview, Inspector *SelectionPanel
	Toolbar            *ToolbarPanel
}

func NewWorkspace() Workspace {
	p, i, t := &SelectionPanel{}, &SelectionPanel{}, &ToolbarPanel{}
	return Workspace{Editor: NewMediator(NewDocument(), p, i, t), Preview: p, Inspector: i, Toolbar: t}
}


func RunExample() []string {
	w := NewWorkspace()
	var actions EditorActions = w.Editor
	// Setup supplies method values to UI controls; rendering emits no new intent.
	onPreviewSelect := actions.Select
	onInspectorSubmit := actions.Rename
	lines := []string{}
	lines = append(lines, "select intro: "+string(onPreviewSelect("intro")))
	lines = append(lines, "rename intro: "+string(onInspectorSubmit("intro", "Release 2")))
	lines = append(lines, "panes: "+w.Preview.Title()+" / "+w.Inspector.Title())
	onPreviewSelect("cover")
	lines = append(lines, fmt.Sprintf("cover rename enabled: %t", w.Toolbar.CanRename))
	lines = append(lines, "late intro edit: "+string(onInspectorSubmit("intro", "Old draft")))
	lines = append(lines, "cover edit: "+string(onInspectorSubmit("cover", "New cover")))
	lines = append(lines, "clear: "+string(actions.Clear()))
	w.Editor.Close()
	return append(lines, "after close: "+string(onPreviewSelect("intro")))
}

func main() {
	for _, line := range RunExample() {
		fmt.Println(line)
	}
}

Python source

workspace.py

"""Coordinate a small editor workspace through one explicit mediator."""

from __future__ import annotations

from dataclasses import dataclass
from typing import Protocol


Outcome = str


@dataclass(slots=True)
class Block:
    id: str
    title: str
    editable: bool


class SelectionPort(Protocol):
    def show(self, block: Block | None) -> None: ...


class ToolbarPort(Protocol):
    def set_rename_enabled(self, enabled: bool) -> None: ...


class EditorActions(Protocol):
    def select(self, id: str) -> Outcome: ...

    def rename(self, target_id: str, title: str) -> Outcome: ...

    def clear(self) -> Outcome: ...


class EditorDocument:
    def __init__(self) -> None:
        self._blocks = [
            Block("intro", "Introduction", True),
            Block("cover", "Cover image", False),
            Block("outro", "Next steps", True),
        ]

    def find(self, id: str) -> Block | None:
        for block in self._blocks:
            if block.id == id:
                return Block(block.id, block.title, block.editable)
        return None

    def snapshot(self) -> list[Block]:
        return [Block(block.id, block.title, block.editable) for block in self._blocks]

    def rename(self, id: str, title: str) -> Outcome:
        for index, block in enumerate(self._blocks):
            if block.id != id:
                continue
            if not block.editable:
                return "read-only"
            if title == "":
                return "empty-title"
            if title == block.title:
                return "unchanged"
            self._blocks[index] = Block(block.id, title, block.editable)
            return "updated"
        return "unknown-block"


def copy_block(block: Block | None) -> Block | None:
    return None if block is None else Block(block.id, block.title, block.editable)


class EditorMediator:
    def __init__(
        self,
        document: EditorDocument,
        preview: SelectionPort,
        inspector: SelectionPort,
        toolbar: ToolbarPort,
    ) -> None:
        self._document = document
        self._preview = preview
        self._inspector = inspector
        self._toolbar = toolbar
        self._selected: str | None = None
        self._active = True
        self._delivered: list[str] = []
        self._publish()

    def select(self, id: str) -> Outcome:
        self._delivered = []
        if not self._active:
            return "closed"
        if self._document.find(id) is None:
            return "unknown-block"
        if id == self._selected:
            return "unchanged"
        self._selected = id
        self._publish()
        return "updated"

    def _publish(self) -> None:
        block = None if self._selected is None else self._document.find(self._selected)
        self._preview.show(copy_block(block))
        self._delivered.append("preview.show")
        self._inspector.show(copy_block(block))
        self._delivered.append("inspector.show")
        self._toolbar.set_rename_enabled(block is not None and block.editable)
        self._delivered.append("toolbar.setRenameEnabled")


    def rename(self, target_id: str, title: str) -> Outcome:
        self._delivered = []
        if not self._active:
            return "closed"
        if self._selected is None:
            return "no-selection"
        if target_id != self._selected:
            return "stale-edit"
        result = self._document.rename(target_id, title)
        if result == "updated":
            self._publish()
        return result

    def clear(self) -> Outcome:
        self._delivered = []
        if not self._active:
            return "closed"
        if self._selected is None:
            return "unchanged"
        self._selected = None
        self._publish()
        return "updated"

    def close(self) -> Outcome:
        self._delivered = []
        if not self._active:
            return "unchanged"
        self._active = False
        return "updated"

    def snapshot(self) -> dict[str, object]:
        return {
            "active": self._active,
            "selected": self._selected,
            "blocks": self._document.snapshot(),
        }

    def deliveries(self) -> list[str]:
        return list(self._delivered)


class SelectionPanel:
    """A memory-backed pane with no sibling or mediator reference."""

    def __init__(self) -> None:
        self.block: Block | None = None
        self.updates = 0

    def show(self, block: Block | None) -> None:
        self.block = copy_block(block)
        self.updates += 1


class ToolbarPanel:
    def __init__(self) -> None:
        self.can_rename = False
        self.updates = 0

    def set_rename_enabled(self, enabled: bool) -> None:
        self.can_rename = enabled
        self.updates += 1


@dataclass(frozen=True)
class Workspace:
    editor: EditorMediator
    preview: SelectionPanel
    inspector: SelectionPanel
    toolbar: ToolbarPanel


def create_workspace() -> Workspace:
    preview = SelectionPanel()
    inspector = SelectionPanel()
    toolbar = ToolbarPanel()
    editor = EditorMediator(EditorDocument(), preview, inspector, toolbar)
    return Workspace(editor, preview, inspector, toolbar)




def run_example() -> list[str]:
    workspace = create_workspace()
    actions: EditorActions = workspace.editor
    on_preview_select = actions.select
    on_inspector_submit = actions.rename
    preview = workspace.preview
    inspector = workspace.inspector
    toolbar = workspace.toolbar
    lines = [
        f"select intro: {on_preview_select('intro')}",
        f"rename intro: {on_inspector_submit('intro', 'Release 2')}",
        f"panes: {preview.block.title if preview.block else '<none>'} / {inspector.block.title if inspector.block else '<none>'}",
    ]
    on_preview_select("cover")
    lines.append(f"cover rename enabled: {str(toolbar.can_rename).lower()}")
    lines.append(f"late intro edit: {on_inspector_submit('intro', 'Old draft')}")
    lines.append(f"cover edit: {on_inspector_submit('cover', 'New cover')}")
    lines.append(f"clear: {actions.clear()}")
    workspace.editor.close()
    lines.append(f"after close: {on_preview_select('intro')}")
    return lines




if __name__ == "__main__":
    print("\n".join(run_example()))

Java source

MediatorExample.java

import java.util.ArrayList;
import java.util.List;

enum Outcome {
    UPDATED("updated"),
    UNCHANGED("unchanged"),
    UNKNOWN_BLOCK("unknown-block"),
    NO_SELECTION("no-selection"),
    STALE_EDIT("stale-edit"),
    READ_ONLY("read-only"),
    EMPTY_TITLE("empty-title"),
    CLOSED("closed");

    private final String value;

    Outcome(String value) {
        this.value = value;
    }

    @Override
    public String toString() {
        return value;
    }
}

record Block(String id, String title, boolean editable) {}

interface SelectionPort {
    void show(Block block);
}

interface ToolbarPort {
    void setRenameEnabled(boolean enabled);
}

interface EditorActions {
    Outcome select(String id);

    Outcome rename(String targetId, String title);

    Outcome clear();
}

final class EditorDocument {
    private final List<Block> blocks = new ArrayList<>(List.of(
            new Block("intro", "Introduction", true),
            new Block("cover", "Cover image", false),
            new Block("outro", "Next steps", true)));

    Block find(String id) {
        return blocks.stream().filter(block -> block.id().equals(id)).findFirst().orElse(null);
    }

    List<Block> snapshot() {
        return List.copyOf(blocks);
    }

    Outcome rename(String id, String title) {
        for (int index = 0; index < blocks.size(); index++) {
            Block block = blocks.get(index);
            if (!block.id().equals(id)) continue;
            if (!block.editable()) return Outcome.READ_ONLY;
            if (title.isEmpty()) return Outcome.EMPTY_TITLE;
            if (title.equals(block.title())) return Outcome.UNCHANGED;
            blocks.set(index, new Block(block.id(), title, block.editable()));
            return Outcome.UPDATED;
        }
        return Outcome.UNKNOWN_BLOCK;
    }
}

final class EditorMediator implements EditorActions {
    private final EditorDocument document;
    private final SelectionPort preview;
    private final SelectionPort inspector;
    private final ToolbarPort toolbar;
    private String selected;
    private boolean active = true;
    private List<String> delivered = new ArrayList<>();

    EditorMediator(EditorDocument document, SelectionPort preview, SelectionPort inspector, ToolbarPort toolbar) {
        this.document = document;
        this.preview = preview;
        this.inspector = inspector;
        this.toolbar = toolbar;
        publish();
    }

    @Override
    public Outcome select(String id) {
        delivered = new ArrayList<>();
        if (!active) return Outcome.CLOSED;
        if (document.find(id) == null) return Outcome.UNKNOWN_BLOCK;
        if (id.equals(selected)) return Outcome.UNCHANGED;
        selected = id;
        publish();
        return Outcome.UPDATED;
    }

    private void publish() {
        Block block = selected == null ? null : document.find(selected);
        preview.show(copy(block));
        delivered.add("preview.show");
        inspector.show(copy(block));
        delivered.add("inspector.show");
        toolbar.setRenameEnabled(block != null && block.editable());
        delivered.add("toolbar.setRenameEnabled");
    }

    @Override
    public Outcome rename(String targetId, String title) {
        delivered = new ArrayList<>();
        if (!active) return Outcome.CLOSED;
        if (selected == null) return Outcome.NO_SELECTION;
        if (!targetId.equals(selected)) return Outcome.STALE_EDIT;
        Outcome result = document.rename(targetId, title);
        if (result == Outcome.UPDATED) publish();
        return result;
    }

    @Override
    public Outcome clear() {
        delivered = new ArrayList<>();
        if (!active) return Outcome.CLOSED;
        if (selected == null) return Outcome.UNCHANGED;
        selected = null;
        publish();
        return Outcome.UPDATED;
    }

    Outcome close() {
        delivered = new ArrayList<>();
        if (!active) return Outcome.UNCHANGED;
        active = false;
        return Outcome.UPDATED;
    }

    Snapshot snapshot() {
        return new Snapshot(active, selected, document.snapshot());
    }

    List<String> deliveries() {
        return List.copyOf(delivered);
    }

    private static Block copy(Block block) {
        return block == null ? null : new Block(block.id(), block.title(), block.editable());
    }
}

final class SelectionPanel implements SelectionPort {
    private Block block;
    private int updates;

    @Override
    public void show(Block block) {
        this.block = block == null ? null : new Block(block.id(), block.title(), block.editable());
        updates++;
    }

    Block block() {
        return block;
    }

    int updates() {
        return updates;
    }
}

final class ToolbarPanel implements ToolbarPort {
    private boolean canRename;
    private int updates;

    @Override
    public void setRenameEnabled(boolean enabled) {
        canRename = enabled;
        updates++;
    }

    boolean canRename() {
        return canRename;
    }

    int updates() {
        return updates;
    }
}

record Snapshot(boolean active, String selected, List<Block> blocks) {}

record Workspace(EditorMediator editor, SelectionPanel preview, SelectionPanel inspector, ToolbarPanel toolbar) {}

final class WorkspaceFactory {
    private WorkspaceFactory() {}

    static Workspace create() {
        SelectionPanel preview = new SelectionPanel();
        SelectionPanel inspector = new SelectionPanel();
        ToolbarPanel toolbar = new ToolbarPanel();
        return new Workspace(new EditorMediator(new EditorDocument(), preview, inspector, toolbar), preview, inspector, toolbar);
    }
}

public final class MediatorExample {
    private MediatorExample() {}

    static List<String> runExample() {
        Workspace workspace = WorkspaceFactory.create();
        EditorActions actions = workspace.editor();
        List<String> lines = new ArrayList<>();
        lines.add("select intro: " + actions.select("intro"));
        lines.add("rename intro: " + actions.rename("intro", "Release 2"));
        lines.add("panes: " + title(workspace.preview()) + " / " + title(workspace.inspector()));
        actions.select("cover");
        lines.add("cover rename enabled: " + workspace.toolbar().canRename());
        lines.add("late intro edit: " + actions.rename("intro", "Old draft"));
        lines.add("cover edit: " + actions.rename("cover", "New cover"));
        lines.add("clear: " + actions.clear());
        workspace.editor().close();
        lines.add("after close: " + actions.select("intro"));
        return lines;
    }

    private static String title(SelectionPanel panel) {
        return panel.block() == null ? "<none>" : panel.block().title();
    }

    public static void main(String[] args) {
        runExample().forEach(System.out::println);
    }
}

Rust source

workspace.rs

// Authored synchronous workspace; pane updates are silent and do not fail.
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Outcome {
    Updated,
    Unchanged,
    UnknownBlock,
    NoSelection,
    StaleEdit,
    ReadOnly,
    EmptyTitle,
    Closed,
}
impl Outcome {
    pub fn label(self) -> &'static str {
        match self {
            Self::Updated => "updated",
            Self::Unchanged => "unchanged",
            Self::UnknownBlock => "unknown-block",
            Self::NoSelection => "no-selection",
            Self::StaleEdit => "stale-edit",
            Self::ReadOnly => "read-only",
            Self::EmptyTitle => "empty-title",
            Self::Closed => "closed",
        }
    }
}
#[derive(Debug, Clone, PartialEq, Eq)]
pub struct Block {
    pub id: String,
    pub title: String,
    pub editable: bool,
}
pub trait SelectionPort {
    fn show(&mut self, block: Option<Block>);
}
pub trait ToolbarPort {
    fn set_rename_enabled(&mut self, enabled: bool);
}
pub trait EditorActions {
    fn select(&mut self, id: &str) -> Outcome;
    fn rename(&mut self, target_id: &str, title: &str) -> Outcome;
    fn clear(&mut self) -> Outcome;
}
pub struct EditorDocument {
    blocks: Vec<Block>,
}
impl EditorDocument {
    pub fn new() -> Self {
        Self {
            blocks: vec![
                Block {
                    id: "intro".into(),
                    title: "Introduction".into(),
                    editable: true,
                },
                Block {
                    id: "cover".into(),
                    title: "Cover image".into(),
                    editable: false,
                },
                Block {
                    id: "outro".into(),
                    title: "Next steps".into(),
                    editable: true,
                },
            ],
        }
    }
    pub fn find(&self, id: &str) -> Option<Block> {
        self.blocks.iter().find(|b| b.id == id).cloned()
    }
    pub fn snapshot(&self) -> Vec<Block> {
        self.blocks.clone()
    }
    pub fn rename(&mut self, id: &str, title: &str) -> Outcome {
        let Some(block) = self.blocks.iter_mut().find(|b| b.id == id) else {
            return Outcome::UnknownBlock;
        };
        if !block.editable {
            return Outcome::ReadOnly;
        }
        if title.is_empty() {
            return Outcome::EmptyTitle;
        }
        if title == block.title {
            return Outcome::Unchanged;
        }
        block.title = title.into();
        Outcome::Updated
    }
}
pub struct Snapshot {
    pub active: bool,
    pub selected: Option<String>,
    pub blocks: Vec<Block>,
}
pub struct EditorMediator<P, I, T> {
    document: EditorDocument,
    pub preview: P,
    pub inspector: I,
    pub toolbar: T,
    selected: Option<String>,
    active: bool,
    delivered: Vec<&'static str>,
}
impl<P: SelectionPort, I: SelectionPort, T: ToolbarPort> EditorMediator<P, I, T> {
    pub fn new(document: EditorDocument, preview: P, inspector: I, toolbar: T) -> Self {
        let mut editor = Self {
            document,
            preview,
            inspector,
            toolbar,
            selected: None,
            active: true,
            delivered: vec![],
        };
        editor.publish();
        editor
    }
    pub fn select(&mut self, id: &str) -> Outcome {
        self.delivered.clear();
        if !self.active {
            return Outcome::Closed;
        }
        if self.document.find(id).is_none() {
            return Outcome::UnknownBlock;
        }
        if self.selected.as_deref() == Some(id) {
            return Outcome::Unchanged;
        }
        self.selected = Some(id.into());
        self.publish();
        Outcome::Updated
    }
    fn publish(&mut self) {
        let block = self
            .selected
            .as_deref()
            .and_then(|id| self.document.find(id));
        let can_rename = block.as_ref().is_some_and(|b| b.editable);
        // Each colleague receives an owned value. show() emits no new intent.
        self.preview.show(block.clone());
        self.delivered.push("preview.show");
        self.inspector.show(block);
        self.delivered.push("inspector.show");
        self.toolbar.set_rename_enabled(can_rename);
        self.delivered.push("toolbar.setRenameEnabled");
    }
    pub fn rename(&mut self, target_id: &str, title: &str) -> Outcome {
        self.delivered.clear();
        if !self.active {
            return Outcome::Closed;
        }
        let Some(selected) = self.selected.as_deref() else {
            return Outcome::NoSelection;
        };
        if target_id != selected {
            return Outcome::StaleEdit;
        }
        let result = self.document.rename(target_id, title);
        if result == Outcome::Updated {
            self.publish();
        }
        result
    }
    pub fn clear(&mut self) -> Outcome {
        self.delivered.clear();
        if !self.active {
            return Outcome::Closed;
        }
        if self.selected.is_none() {
            return Outcome::Unchanged;
        }
        self.selected = None;
        self.publish();
        Outcome::Updated
    }
    pub fn close(&mut self) -> Outcome {
        self.delivered.clear();
        if !self.active {
            return Outcome::Unchanged;
        }
        self.active = false;
        Outcome::Updated
    }
    pub fn snapshot(&self) -> Snapshot {
        Snapshot {
            active: self.active,
            selected: self.selected.clone(),
            blocks: self.document.snapshot(),
        }
    }
    pub fn deliveries(&self) -> Vec<&'static str> {
        self.delivered.clone()
    }
}
impl<P: SelectionPort, I: SelectionPort, T: ToolbarPort> EditorActions for EditorMediator<P, I, T> {
    fn select(&mut self, id: &str) -> Outcome {
        EditorMediator::select(self, id)
    }
    fn rename(&mut self, id: &str, title: &str) -> Outcome {
        EditorMediator::rename(self, id, title)
    }
    fn clear(&mut self) -> Outcome {
        EditorMediator::clear(self)
    }
}
// Memory colleagues. No sibling references, callbacks, or ownership cycles.
#[derive(Default)]
pub struct SelectionPanel {
    pub block: Option<Block>,
    pub updates: usize,
}
impl SelectionPort for SelectionPanel {
    fn show(&mut self, block: Option<Block>) {
        self.block = block;
        self.updates += 1;
    }
}
#[derive(Default)]
pub struct ToolbarPanel {
    pub can_rename: bool,
    pub updates: usize,
}
impl ToolbarPort for ToolbarPanel {
    fn set_rename_enabled(&mut self, value: bool) {
        self.can_rename = value;
        self.updates += 1;
    }
}
pub type Workspace = EditorMediator<SelectionPanel, SelectionPanel, ToolbarPanel>;
pub fn create_workspace() -> Workspace {
    EditorMediator::new(
        EditorDocument::new(),
        SelectionPanel::default(),
        SelectionPanel::default(),
        ToolbarPanel::default(),
    )
}

// UI adapters borrow an action target only while forwarding a user intent.
pub fn on_preview_select(actions: &mut dyn EditorActions, id: &str) -> Outcome {
    actions.select(id)
}
pub fn on_inspector_submit(actions: &mut dyn EditorActions, id: &str, title: &str) -> Outcome {
    actions.rename(id, title)
}
pub fn run_example() -> Vec<String> {
    let mut workspace = create_workspace();
    let mut lines = vec![];
    lines.push(format!(
        "select intro: {}",
        on_preview_select(&mut workspace, "intro").label()
    ));
    lines.push(format!(
        "rename intro: {}",
        on_inspector_submit(&mut workspace, "intro", "Release 2").label()
    ));
    lines.push(format!(
        "panes: {} / {}",
        workspace.preview.block.as_ref().unwrap().title,
        workspace.inspector.block.as_ref().unwrap().title
    ));
    on_preview_select(&mut workspace, "cover");
    lines.push(format!(
        "cover rename enabled: {}",
        workspace.toolbar.can_rename
    ));
    lines.push(format!(
        "late intro edit: {}",
        on_inspector_submit(&mut workspace, "intro", "Old draft").label()
    ));
    lines.push(format!(
        "cover edit: {}",
        on_inspector_submit(&mut workspace, "cover", "New cover").label()
    ));
    lines.push(format!("clear: {}", workspace.clear().label()));
    workspace.close();
    lines.push(format!(
        "after close: {}",
        on_preview_select(&mut workspace, "intro").label()
    ));
    lines
}
fn main() {
    for line in run_example() {
        println!("{line}");
    }
}

Reading the TypeScriptInterfaces describe each direction of communication

EditorActions is the incoming intent interface. SelectionPort and ToolbarPort describe what the coordinator can ask the panes to do. Ordinary objects can implement these contracts; no event registry or base class is required.

The setup callbacks capture the coordinator, while the pane objects store only rendered values. The document, snapshots, and each selection delivery copy their flat block data. TypeScript’s private fields express an authoring boundary, not a runtime security boundary.

Reading the PythonProtocols, copies, and convention-based privacy

Python expresses the pane contracts as Protocols, so a small object with the right method can participate without inheriting from a base class. The mediator stores those ports and sends a fresh Block to each one. The underscore-prefixed fields communicate ownership by convention; Python does not make them private to the runtime.

The document returns copies from find and snapshot, while the mediator keeps the selected ID and delivery order. A pane update is a render call, not a new intent, so these memory adapters do not call back into the coordinator.

Reading the GoInterface fields and pointer-owned collaborators

The coordinator contains two SelectionPort interfaces and a ToolbarPort. Preview and Inspector can share an interface while being separate objects. Pointer receivers retain the mediator’s selection and the pane update counts across calls.

Find and Snapshot return copies of the document’s block values, and each pane receives a separate block pointer. Construct the coordinator with NewMediator and valid collaborators. The memory implementations run on one goroutine at a time; these interfaces add no locking.

03 / Predict, act, and inspect the deliveries

Follow one intent across the workspace.

Select Introduction and apply a new title. Both panes should show it, and Rename should remain available. Before selecting Cover, predict what will happen to the inspector and toolbar.

Then open the held-edit experiment. Capture a title edit for Introduction, select another block, and deliver the old intent. Its ID belongs to the edit that was created earlier; it must not silently become the new selection’s ID.

Keep three panes in agreement

Select Introduction, then Cover. Predict which pane values change and whether Rename remains available. Try an edit, then inspect the coordinator’s deliveries.

01 / user intentPreview, Inspector, or Toolbar
Select a block, submit a title, or clear selection.
02 / coordinationWorkspace mediator
Check the target, ask the document, then update the panes.
03 / silent updatesEach pane renders its value
Receiving a value does not send another user intent.

Workspace open · Selected ID: none

Preview

1 update

A click sends a selection intent.

Showing: No selection

Inspector

1 update

The pane receives a selection value and keeps a local title draft.

Editing ID: none

Toolbar

1 update

The mediator supplies the selected block’s rename policy.

Rename policy: unavailable

Apply submits the Inspector’s target ID and draft. Clear sends its own intent.

ready

Workspace opened. All three panes received the empty selection.

Pane deliveries for this action

preview.show
inspector.show
toolbar.setRenameEnabled

What if an old Inspector edit arrives later?

Select Introduction and hold an edit. Select another block, then deliver it. Its captured ID stays Introduction. The hold control intentionally allows testing a read-only target too.

Held edit title

No held edit.

The ID check prevents an edit from crossing to a different selection.

A held edit can still be delivered after Close to observe rejection. Reset constructs a new workspace and discards the held edit.

Recent intents · up to 6

No user intents yet.

Worked example: selecting Introduction shows it in Preview and Inspector and enables Rename. Selecting Cover changes both panes and disables Rename. A held Introduction edit then returns stale-edit without changing either block. Editing Cover returns read-only. After Close, old callbacks return closed.

This lab runs the displayed TypeScript with three memory-backed panes. The held edit stands in for a late request that you deliver by hand. Python, Java, Go, and Rust are verified separately against the same contract.

04 / An update is not automatically another request

Keep the input and rendering paths distinct.

The pane ports in this example update silently. A user click can request a selection, but receiving that selection does not manufacture another click. This distinction matters when integrating a widget that also emits change callbacks during programmatic updates.

Reasoning and a stopping pointAlso available without JavaScript

The intended direction is user intent → coordinator → pane update. Programmatic show methods are silent. If a widget also fires callbacks on programmatic writes, its adapter must distinguish those writes from user actions.

Suppressing an unchanged value helps, but a real integration must still define callback behavior and, when needed, queue work deliberately rather than recursively entering the coordinator.

If two views only display the same count, a shared or derived value may be enough. A mediator earns its place when it owns a specific rule about how participants respond together.

Leave yourself a note

Which interaction rule belongs to the coordinator? Which validation stays in the document? What may a pane do when it receives an update?

This reflection is not saved or automatically assessed.

05 / Central coordination has a deliberate limit

The document still knows what a valid edit is.

The mediator owns the selection and its relationship to an inspector submission. It asks the document to perform the rename. Read-only and title rules remain in the document so another legitimate caller cannot bypass them simply by skipping this coordinator.

The toolbar’s disabled button communicates a policy to the user. It does not enforce the document’s rule. The held-edit control can bypass that UI affordance: the document still refuses a Cover edit.

Unchanged actions produce no pane deliveries. Rejected actions also preserve the document and pane values. A successful selection, rename, or clear supplies all three panes in a documented order. Their update counters count method calls, including initial setup.

A matching target ID is not a revision checkWhat the stale-edit result establishes

The stale-edit result means the captured target differs from the current selection. If you select away and back before delivering an old edit, its ID matches again. An older edit for the same block can also overwrite a newer title. The sample deliberately has no revision or request-generation check.

A collaborative editor may need a document version, edit token, merge policy, or explicit conflict result. Keep that decision visible.

Three updates are not a transactionThe sample assumes local, silent, successful pane methods

Publication invokes Preview, Inspector, and Toolbar sequentially. The final values agree when those calls return normally. The sample does not roll back the document or already updated panes if an adapter throws or panics. It also assumes a pane update never calls back into the coordinator; this sample has no re-entrancy guard. In our TypeScript and Go runs, a Preview that selected Next steps from inside its update for Cover left Preview showing Next steps while Inspector showed Cover and Rename stayed unavailable. A Preview that selected a different block every time it was shown never returned: TypeScript threw “RangeError: Maximum call stack size exceeded”, and Go stopped with “goroutine stack exceeds 1000000000-byte limit”.

With fallible adapters, decide whether to derive views from a committed state, report partial delivery, retry rendering, or rebuild an affected view. Adding a try/catch without choosing one of those policies does not make publication atomic.

06 / Own one workspace, not every interaction in the application

Setup connects the participants and owns their lifetime.

At workspace creation, setup creates a document, pane adapters, and one coordinator. It supplies selection, rename, and clear callbacks to the relevant controls. Each handler carries intent; each output port translates a supplied value into a pane update.

Closing the workspace stops future intents from applying changes. The document and last snapshots stay available for inspection. Real setup also owns detaching listeners, subscriptions, and widget callbacks.

A second editor receives a separate coordinator and document. If a future product needs shared documents, define that ownership and synchronization explicitly. Putting a coordinator in a global module would change which editors and users share its state.

New requirement	Where it belongs
Add a selected-block status pane	Add a narrow output port and include it in the workspace’s publication rule. Existing panes need no new sibling references.
Change title validation	Change the document’s edit rule and its result. The mediator forwards the outcome and refreshes panes only after an accepted change.
Load inspector data asynchronously	Capture the relevant identity and generation; reject obsolete completions and respect the workspace lifetime.
Add billing, asset uploads, and background exports	Give those workflows their own owners. A workspace-selection coordinator should not absorb unrelated application policy.

Build UIs?The browser already coordinates radio buttons. A Share dialog’s one-owner rule makes that decision yours.

Where it already is in your components

If you have given every group of radio buttons in a form its own name, you already follow a rule that comes from this pattern. No radio button refers to another; the browser keeps them in agreement. The HTML standard groups radios that share a form owner (or have none), a tree, and a nonempty name, and when one becomes checked, “the checkedness state of all the other elements in the same radio button group must be set to false.” Only the radio you clicked fires input and change. The one it unchecked hears nothing.

That is why a reusable row cannot hard-code its name. A feedback form renders RatingRow once per statement inside one <form>. With name="rating", every row joined one group in our Chromium 153 run. In Svelte 5.57, answering the second row unchecked the first row’s Agree while that row’s state still said Agree. React 19.1.0 went the other way: after a change, restoreControlledInputState sets the other radios with that name in the same form back to their props, so the first row stayed checked, and the row you clicked showed nothing checked while its state said Neutral. Either way the form submitted one rating entry instead of two. A name built from the row’s data gives each row its own group again, and useId or $props.id() does the same for copies with nothing in their data to tell them apart.

RatingRow.tsx

import { useState } from 'react';

const options = ['Agree', 'Neutral', 'Disagree'];

// One row of a feedback form. The form renders a row per statement inside one <form>.
export function RatingRow({ id, statement }: { id: string; statement: string }) {
	const [rating, setRating] = useState<string | null>(null);
	// The browser groups radios that share a form and a name, and checking one unchecks
	// the rest. A literal name="rating" would make every row in the form one group.
	const name = `rating-${id}`;
	return (
		<fieldset>
			<legend>{statement}</legend>
			{options.map((option) => (
				<label key={option}>
					<input
						type="radio"
						name={name}
						value={option}
						checked={rating === option}
						onChange={() => setRating(option)}
					/>
					{option}
				</label>
			))}
		</fieldset>
	);
}

Coordinating your own components works the same way. React’s docs call it lifting state up: when two components should change together, “remove state from both of them, move it to their closest common parent, and then pass it down to them via props.” Svelte 5 components report up through callback props, which its migration guide recommends in place of createEventDispatcher. The textbook Share dialog below does that: the person rows and the link controls never read each other, and the parent’s handlers are the rules. One rule is missing on purpose.

When you have to own it

The Share dialog’s rules grow. A document has exactly one owner, so making Ben the owner has to make Ana an editor, and Ana’s own row cannot step down and leave nobody in charge. The link’s role can change only while “Anyone with the link” is on. Written into each row’s handler, those rules would make every control know about the others. Move them into share-settings.ts, which every change goes through. It knows all the participants and sends each one only its part: a row its role and whether it is locked, the link’s select whether it can change. share-settings.spec.ts tests the rules without mounting the dialog, and both panes below call the same functions.

share-settings.ts

// The rules for a document's Share dialog. The person rows and the link controls never
// read each other: every change goes through these functions, which return a new Share
// and leave the one they were given alone.
export type Role = 'viewer' | 'editor' | 'owner';
export type LinkRole = 'viewer' | 'editor';
export type Person = { id: string; name: string; role: Role };
export type Share = { people: Person[]; linkOn: boolean; linkRole: LinkRole };

export const roles: readonly Role[] = ['viewer', 'editor', 'owner'];
export const linkRoles: readonly LinkRole[] = ['viewer', 'editor'];

export const initialShare: Share = {
	people: [
		{ id: 'ana', name: 'Ana', role: 'owner' },
		{ id: 'ben', name: 'Ben', role: 'editor' },
		{ id: 'chen', name: 'Chen', role: 'viewer' }
	],
	linkOn: false,
	linkRole: 'viewer'
};

function copy(share: Share): Share {
	return { ...share, people: share.people.map((person) => ({ ...person })) };
}

// Exactly one owner. Choosing a new owner makes the previous owner an editor, and the
// owner's own row cannot step down, because that would leave the document without one.
export function changeRole(share: Share, id: string, role: Role): Share {
	const next = copy(share);
	const person = next.people.find((candidate) => candidate.id === id);
	if (!person) throw new Error(`No person with id ${id}`);
	if (person.role === 'owner') return next;
	if (role === 'owner') {
		for (const other of next.people) if (other.role === 'owner') other.role = 'editor';
	}
	person.role = role;
	return next;
}

export function setLink(share: Share, on: boolean): Share {
	return { ...copy(share), linkOn: on };
}

// The link's role can change only while the link is on.
export function setLinkRole(share: Share, role: LinkRole): Share {
	return { ...copy(share), linkRole: share.linkOn ? role : share.linkRole };
}

// What each control is sent: a row gets its role and whether it is locked, and the
// link's role select gets whether it can change.
export function controls(share: Share) {
	return {
		rows: share.people.map((person) => ({ ...person, locked: person.role === 'owner' })),
		linkRoleDisabled: !share.linkOn
	};
}

// A <select> reports a string. Turn it back into a role, or fail loudly.
export function parseRole(value: string): Role {
	const role = roles.find((candidate) => candidate === value);
	if (!role) throw new Error(`Unknown role ${value}`);
	return role;
}
export function parseLinkRole(value: string): LinkRole {
	const role = linkRoles.find((candidate) => candidate === value);
	if (!role) throw new Error(`Unknown link role ${value}`);
	return role;
}

When Ben becomes owner, Ana’s select receives editor as a value. In our React 19.1.0 and Svelte 5.57 runs only Ben’s select fired change, so the rule did not run again for Ana. That is section 04’s silent update, and here the browser supplies it: setting a control’s value from code is not a user action.

The parent owns the people and the link settings, passes values down, and takes callbacks up. Its role handler changes only the row that asked, so making Ben the owner leaves Ana as owner too.

ReactAlready in your code

ShareDialog.tsx

import { useState } from 'react';
import {
	initialShare,
	linkRoles,
	parseLinkRole,
	parseRole,
	roles,
	type LinkRole,
	type Person,
	type Role
} from './share-settings';

export function ShareDialog() {
	const [people, setPeople] = useState(initialShare.people);
	const [linkOn, setLinkOn] = useState(initialShare.linkOn);
	const [linkRole, setLinkRole] = useState(initialShare.linkRole);

	// This is coordination already. The rows and the link controls never talk to each
	// other: each reports up through a callback, and the rules live in this parent.
	// One rule is missing: a document has one owner, but making Ben the owner leaves
	// Ana as owner too, because this handler only changes the row that asked.
	const changeRole = (id: string, role: Role) =>
		setPeople((all) => all.map((person) => (person.id === id ? { ...person, role } : person)));

	return (
		<form>
			{people.map((person) => (
				<PersonRow
					key={person.id}
					person={person}
					onRoleChange={(role) => changeRole(person.id, role)}
				/>
			))}
			<LinkAccess on={linkOn} role={linkRole} onToggle={setLinkOn} onRoleChange={setLinkRole} />
		</form>
	);
}

function PersonRow({
	person,
	onRoleChange
}: {
	person: Person;
	onRoleChange: (role: Role) => void;
}) {
	return (
		<label>
			{person.name}
			<select value={person.role} onChange={(event) => onRoleChange(parseRole(event.target.value))}>
				{roles.map((role) => (
					<option key={role}>{role}</option>
				))}
			</select>
		</label>
	);
}

type LinkProps = {
	on: boolean;
	role: LinkRole;
	onToggle: (on: boolean) => void;
	onRoleChange: (role: LinkRole) => void;
};
function LinkAccess({ on, role, onToggle, onRoleChange }: LinkProps) {
	return (
		<fieldset>
			<label>
				<input type="checkbox" checked={on} onChange={(event) => onToggle(event.target.checked)} />
				Anyone with the link
			</label>
			<select
				aria-label="Link role"
				value={role}
				disabled={!on}
				onChange={(event) => onRoleChange(parseLinkRole(event.target.value))}
			>
				{linkRoles.map((option) => (
					<option key={option}>{option}</option>
				))}
			</select>
		</fieldset>
	);
}

07 / Recognize coordination before reaching for a library

The useful part is the rule about participants.

React’s sharing-state example coordinates two panels through their common parent: opening one changes which panel is active, while the children receive values and action handlers. What makes that parent a coordinator is its rule about which panel is active, not the lifted state by itself.

Qt’s model/view documentation shows views sharing a selection model so they remain aligned on selection. Its QItemSelectionModel API exposes selection state and change notifications. The shared selection is the connection; the document-edit rules here come from this lesson’s workspace.

A library can provide dispatch, notification, or middleware machinery. It cannot infer which workspace participants should change together, what a valid edit means, or which coordinator owns the lifetime. Those decisions are the substance of this lesson.

08 / Take the idea with you

What collaboration rule deserves its own owner?

Explain the design without saying “Mediator”: when this participant requests a change, this owner checks these conditions and updates these collaborators. Then name one rule that belongs to the document, and one responsibility that should stay outside the coordinator.

Use this pattern when participants repeat a coherent interaction rule and should not each know the whole collaboration. For two simple displays, a shared value and direct callbacks may be sufficient. Split a coordinator when its responsibilities no longer describe one workflow.

Connections to follow nextRelated lessons

Observer lets a subject notify registered reactions. Publish / subscribe routes messages by topic through a channel or broker: a publisher names the topic, not the subscribers, and each matching subscriber receives a copy of the same message. A mediator knows its participants and decides what each one gets; this coordinator sends Preview and Inspector a block and sends Toolbar only whether Rename is allowed. A mediator can use either mechanism for delivery, but its defining job is the rule that coordinates participants.

Facade gives a caller a focused entry point to a subsystem. Mediator concentrates relationships among collaborators. Their implementations can overlap; explain the responsibility instead of classifying a class only by the number of methods it calls.

Command represents an action, while a coordinator may accept and route those actions. A Chain of responsibility passes a request among possible handlers. Mediation does not imply that only one handler runs or that ordering is irrelevant.