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
use ;
use Map;
use ;
use crateNodeId;
/// Tailwind CSS classes for interactive visibility behaviour.
///
/// This map contains computed CSS classes for each node (and edge). The classes
/// control visibility, colors, animations, and interactions based on the
/// diagram's state.
///
/// ## Visibility Patterns
///
/// 1. Process -> Process Steps visibility:
///
/// * Process node: `group/{process_id}` class
/// * Process steps: `invisible group-focus-within/{process_id}:visible`
/// * When process (or any child) has focus, steps become and remain visible
///
/// 2. Process Step -> Edges visibility:
///
/// * Process step: `peer/{step_id}` class
/// * Edges: `invisible peer-focus/{step_id}:visible`
/// * Edges must be DOM siblings AFTER the step element
///
/// 3. **Alternative:** `:target` based visibility:
///
/// * When element ID matches URL fragment (e.g. `#step_id`)
/// * Use `invisible target:visible` on the element
/// * Use `[&:has(~_#step_id:target)]:visible` on edges
/// * Use `peer-[:where([data-step='3']):target]:visible` on edges
///
/// # Example
///
/// ```yaml
/// tailwind_classes:
/// # Tags - act as group containers for highlighting associated things
/// tag_app_development: >-
/// stroke-1
/// visible
/// hover:fill-emerald-400
/// fill-emerald-500
/// focus:fill-emerald-600
/// active:fill-emerald-700
/// peer/tag_app_development
///
/// # Processes - act as group containers for their steps
/// proc_app_dev: >-
/// stroke-1
/// visible
/// hover:fill-blue-200
/// fill-blue-300
/// group/proc_app_dev
///
/// # Process steps - visible when parent process has focus
/// proc_app_dev_step_repository_clone: >-
/// stroke-1
/// invisible
/// peer/proc_app_dev_step_repository_clone
/// group-focus-within/proc_app_dev:visible
///
/// # Things
/// t_aws: >-
/// [stroke-dasharray:2]
/// stroke-1
/// visible
/// hover:fill-yellow-50
/// fill-yellow-100
/// ```
;