@majdibo/flow-visualizer 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +339 -0
  2. package/dist/flow-visualizer.css +1 -0
  3. package/dist/flow-visualizer.es.js +5686 -0
  4. package/dist/flow-visualizer.umd.js +6 -0
  5. package/dist/logo.svg +24 -0
  6. package/package.json +60 -0
  7. package/public/logo.svg +24 -0
  8. package/src/FlowVisualizer.tsx +257 -0
  9. package/src/NodeDetailModal.tsx +63 -0
  10. package/src/index.css +119 -0
  11. package/src/index.ts +26 -0
  12. package/src/layoutEngine.ts +141 -0
  13. package/src/modal.css +153 -0
  14. package/src/theme.css +225 -0
  15. package/src/vite-env.d.ts +1 -0
package/src/theme.css ADDED
@@ -0,0 +1,225 @@
1
+ :root {
2
+ /* Background */
3
+ --flow-bg: transparent;
4
+
5
+ /* Node - Current (Light Mode) - Teal gradient with glow */
6
+ --flow-node-current-fill: url(#gradient-current);
7
+ --flow-node-current-stroke: #0F766E;
8
+ --flow-node-current-shadow: drop-shadow(0 4px 16px rgba(42, 157, 143, 0.4)) drop-shadow(0 0 24px rgba(42, 157, 143, 0.2));
9
+
10
+ /* Node - Traversed (Light Mode) - Soft slate */
11
+ --flow-node-traversed-fill: #F1F5F9;
12
+ --flow-node-traversed-stroke: #CBD5E1;
13
+ --flow-node-traversed-shadow: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.08));
14
+
15
+ /* Node - Untraversed (Light Mode) - White with subtle border */
16
+ --flow-node-untraversed-fill: #FFFFFF;
17
+ --flow-node-untraversed-stroke: #E2E8F0;
18
+ --flow-node-untraversed-shadow: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.06));
19
+
20
+ /* Edge Colors (Light Mode) */
21
+ --flow-edge-current: #14B8A6;
22
+ --flow-edge-current-glow: rgba(20, 184, 166, 0.3);
23
+ --flow-edge-traversed: #94A3B8;
24
+ --flow-edge-untraversed: #E2E8F0;
25
+
26
+ /* Text Colors (Light Mode) */
27
+ --flow-text-primary: #0F172A;
28
+ --flow-text-secondary: #64748B;
29
+ --flow-text-current: #FFFFFF;
30
+
31
+ /* Gradient Colors (Light Mode) - Teal gradient */
32
+ --flow-gradient-start: #14B8A6;
33
+ --flow-gradient-end: #0D9488;
34
+
35
+ /* Node type indicators */
36
+ --flow-node-action: #2A9D8F;
37
+ --flow-node-decision: #457B9D;
38
+ --flow-node-tool: #E76F51;
39
+ --flow-node-memory: #F4A261;
40
+ }
41
+
42
+ .dark {
43
+ /* Node - Current (Dark Mode) - Brighter teal with stronger glow */
44
+ --flow-node-current-fill: url(#gradient-current);
45
+ --flow-node-current-stroke: #5EEAD4;
46
+ --flow-node-current-shadow: drop-shadow(0 4px 20px rgba(61, 186, 162, 0.5)) drop-shadow(0 0 32px rgba(61, 186, 162, 0.3));
47
+
48
+ /* Node - Traversed (Dark Mode) - Elevated slate */
49
+ --flow-node-traversed-fill: #334155;
50
+ --flow-node-traversed-stroke: #475569;
51
+ --flow-node-traversed-shadow: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
52
+
53
+ /* Node - Untraversed (Dark Mode) - Deep slate */
54
+ --flow-node-untraversed-fill: #1E293B;
55
+ --flow-node-untraversed-stroke: #334155;
56
+ --flow-node-untraversed-shadow: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
57
+
58
+ /* Edge Colors (Dark Mode) */
59
+ --flow-edge-current: #5EEAD4;
60
+ --flow-edge-current-glow: rgba(94, 234, 212, 0.4);
61
+ --flow-edge-traversed: #64748B;
62
+ --flow-edge-untraversed: #334155;
63
+
64
+ /* Text Colors (Dark Mode) */
65
+ --flow-text-primary: #F1F5F9;
66
+ --flow-text-secondary: #94A3B8;
67
+ --flow-text-current: #0F172A;
68
+
69
+ /* Gradient Colors (Dark Mode) - Brighter teal */
70
+ --flow-gradient-start: #5EEAD4;
71
+ --flow-gradient-end: #2DD4BF;
72
+
73
+ /* Node type indicators (dark mode) */
74
+ --flow-node-action: #3DBAA2;
75
+ --flow-node-decision: #5A9FBF;
76
+ --flow-node-tool: #F4A261;
77
+ --flow-node-memory: #FFD166;
78
+ }
79
+
80
+ @media (prefers-color-scheme: dark) {
81
+ :root {
82
+ /* Node - Current (Dark Mode) */
83
+ --flow-node-current-fill: url(#gradient-current);
84
+ --flow-node-current-stroke: #5EEAD4;
85
+ --flow-node-current-shadow: drop-shadow(0 4px 20px rgba(61, 186, 162, 0.5)) drop-shadow(0 0 32px rgba(61, 186, 162, 0.3));
86
+
87
+ /* Node - Traversed (Dark Mode) */
88
+ --flow-node-traversed-fill: #334155;
89
+ --flow-node-traversed-stroke: #475569;
90
+ --flow-node-traversed-shadow: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
91
+
92
+ /* Node - Untraversed (Dark Mode) */
93
+ --flow-node-untraversed-fill: #1E293B;
94
+ --flow-node-untraversed-stroke: #334155;
95
+ --flow-node-untraversed-shadow: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
96
+
97
+ /* Edge Colors (Dark Mode) */
98
+ --flow-edge-current: #5EEAD4;
99
+ --flow-edge-current-glow: rgba(94, 234, 212, 0.4);
100
+ --flow-edge-traversed: #64748B;
101
+ --flow-edge-untraversed: #334155;
102
+
103
+ /* Text Colors (Dark Mode) */
104
+ --flow-text-primary: #F1F5F9;
105
+ --flow-text-secondary: #94A3B8;
106
+ --flow-text-current: #0F172A;
107
+
108
+ /* Gradient Colors (Dark Mode) */
109
+ --flow-gradient-start: #5EEAD4;
110
+ --flow-gradient-end: #2DD4BF;
111
+
112
+ /* Node type indicators */
113
+ --flow-node-action: #3DBAA2;
114
+ --flow-node-decision: #5A9FBF;
115
+ --flow-node-tool: #F4A261;
116
+ --flow-node-memory: #FFD166;
117
+ }
118
+ }
119
+
120
+ /* Smooth transitions for theme switching */
121
+ * {
122
+ transition: fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease;
123
+ }
124
+
125
+ /* Enhanced node styles */
126
+ .flow-node {
127
+ cursor: pointer;
128
+ transition: all 0.2s ease;
129
+ }
130
+
131
+ .flow-node:hover {
132
+ filter: brightness(1.05);
133
+ transform: scale(1.02);
134
+ }
135
+
136
+ .flow-node-current {
137
+ animation: pulse-node 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
138
+ }
139
+
140
+ @keyframes pulse-node {
141
+ 0%, 100% {
142
+ filter: drop-shadow(0 4px 16px rgba(42, 157, 143, 0.4)) drop-shadow(0 0 24px rgba(42, 157, 143, 0.2));
143
+ }
144
+ 50% {
145
+ filter: drop-shadow(0 4px 20px rgba(42, 157, 143, 0.6)) drop-shadow(0 0 32px rgba(42, 157, 143, 0.4));
146
+ }
147
+ }
148
+
149
+ .dark .flow-node-current {
150
+ animation: pulse-node-dark 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
151
+ }
152
+
153
+ @keyframes pulse-node-dark {
154
+ 0%, 100% {
155
+ filter: drop-shadow(0 4px 20px rgba(61, 186, 162, 0.5)) drop-shadow(0 0 32px rgba(61, 186, 162, 0.3));
156
+ }
157
+ 50% {
158
+ filter: drop-shadow(0 4px 24px rgba(61, 186, 162, 0.7)) drop-shadow(0 0 40px rgba(61, 186, 162, 0.5));
159
+ }
160
+ }
161
+
162
+ /* Enhanced edge styles */
163
+ .flow-edge-current {
164
+ stroke-width: 2.5;
165
+ filter: drop-shadow(0 0 8px var(--flow-edge-current-glow));
166
+ animation: flow-pulse 2s ease-in-out infinite;
167
+ }
168
+
169
+ @keyframes flow-pulse {
170
+ 0%, 100% {
171
+ opacity: 1;
172
+ }
173
+ 50% {
174
+ opacity: 0.7;
175
+ }
176
+ }
177
+
178
+ .flow-edge-traversed {
179
+ stroke-width: 2;
180
+ stroke-dasharray: none;
181
+ }
182
+
183
+ .flow-edge-untraversed {
184
+ stroke-width: 1.5;
185
+ stroke-dasharray: 5, 5;
186
+ opacity: 0.5;
187
+ }
188
+
189
+ /* Arrow markers */
190
+ .flow-arrow-current {
191
+ fill: var(--flow-edge-current);
192
+ filter: drop-shadow(0 0 4px var(--flow-edge-current-glow));
193
+ }
194
+
195
+ .flow-arrow-traversed {
196
+ fill: var(--flow-edge-traversed);
197
+ }
198
+
199
+ .flow-arrow-untraversed {
200
+ fill: var(--flow-edge-untraversed);
201
+ opacity: 0.5;
202
+ }
203
+
204
+ /* Node labels */
205
+ .flow-node-label {
206
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
207
+ font-weight: 600;
208
+ font-size: 13px;
209
+ letter-spacing: -0.01em;
210
+ }
211
+
212
+ .flow-node-sublabel {
213
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
214
+ font-weight: 500;
215
+ font-size: 11px;
216
+ opacity: 0.7;
217
+ }
218
+
219
+ /* Node type badges */
220
+ .flow-node-badge {
221
+ font-size: 10px;
222
+ font-weight: 600;
223
+ text-transform: uppercase;
224
+ letter-spacing: 0.05em;
225
+ }
package/src/vite-env.d.ts ADDED
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />