@eventcatalog/visualiser 3.20.0 → 3.20.1

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 (7) hide show
  1. package/dist/index.js +252 -99
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +276 -123
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/styles-core.css +67 -6
  6. package/dist/styles.css +67 -6
  7. package/package.json +1 -1
package/dist/styles-core.css CHANGED
@@ -106,7 +106,6 @@
106
106
  --color-slate-500: oklch(55.4% 0.046 257.417);
107
107
  --color-slate-600: oklch(44.6% 0.043 257.281);
108
108
  --color-slate-700: oklch(37.2% 0.044 257.287);
109
- --color-slate-800: oklch(27.9% 0.041 260.031);
110
109
  --color-gray-50: oklch(98.5% 0.002 247.839);
111
110
  --color-gray-100: oklch(96.7% 0.003 264.542);
112
111
  --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -181,6 +180,9 @@
181
180
  .eventcatalog-visualizer .-top-2\.5 {
182
181
  top: calc(var(--spacing) * -2.5);
183
182
  }
183
+ .eventcatalog-visualizer .-top-3 {
184
+ top: calc(var(--spacing) * -3);
185
+ }
184
186
  .eventcatalog-visualizer .-top-10 {
185
187
  top: calc(var(--spacing) * -10);
186
188
  }
@@ -712,6 +714,9 @@
712
714
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
713
715
  }
714
716
  }
717
+ .eventcatalog-visualizer .gap-x-2 {
718
+ column-gap: calc(var(--spacing) * 2);
719
+ }
715
720
  .eventcatalog-visualizer .gap-x-4 {
716
721
  column-gap: calc(var(--spacing) * 4);
717
722
  }
@@ -743,6 +748,9 @@
743
748
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
744
749
  }
745
750
  }
751
+ .eventcatalog-visualizer .gap-y-1 {
752
+ row-gap: calc(var(--spacing) * 1);
753
+ }
746
754
  .eventcatalog-visualizer .divide-y {
747
755
  .eventcatalog-visualizer :where(& > :not(:last-child)) {
748
756
  --tw-divide-y-reverse: 0;
@@ -1202,6 +1210,9 @@
1202
1210
  .eventcatalog-visualizer .bg-amber-100 {
1203
1211
  background-color: var(--color-amber-100);
1204
1212
  }
1213
+ .eventcatalog-visualizer .bg-amber-500 {
1214
+ background-color: var(--color-amber-500);
1215
+ }
1205
1216
  .eventcatalog-visualizer .bg-amber-500\/20 {
1206
1217
  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
1207
1218
  @supports (color: color-mix(in lab, red, red)) {
@@ -1247,9 +1258,15 @@
1247
1258
  .eventcatalog-visualizer .bg-blue-600 {
1248
1259
  background-color: var(--color-blue-600);
1249
1260
  }
1261
+ .eventcatalog-visualizer .bg-cyan-500 {
1262
+ background-color: var(--color-cyan-500);
1263
+ }
1250
1264
  .eventcatalog-visualizer .bg-cyan-600 {
1251
1265
  background-color: var(--color-cyan-600);
1252
1266
  }
1267
+ .eventcatalog-visualizer .bg-emerald-500 {
1268
+ background-color: var(--color-emerald-500);
1269
+ }
1253
1270
  .eventcatalog-visualizer .bg-gray-50 {
1254
1271
  background-color: var(--color-gray-50);
1255
1272
  }
@@ -1361,8 +1378,14 @@
1361
1378
  .eventcatalog-visualizer .bg-red-500 {
1362
1379
  background-color: var(--color-red-500);
1363
1380
  }
1364
- .eventcatalog-visualizer .bg-slate-800 {
1365
- background-color: var(--color-slate-800);
1381
+ .eventcatalog-visualizer .bg-rose-500 {
1382
+ background-color: var(--color-rose-500);
1383
+ }
1384
+ .eventcatalog-visualizer .bg-slate-500 {
1385
+ background-color: var(--color-slate-500);
1386
+ }
1387
+ .eventcatalog-visualizer .bg-teal-500 {
1388
+ background-color: var(--color-teal-500);
1366
1389
  }
1367
1390
  .eventcatalog-visualizer .bg-teal-500\/10 {
1368
1391
  background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 10%, transparent);
@@ -1376,6 +1399,9 @@
1376
1399
  .eventcatalog-visualizer .bg-transparent {
1377
1400
  background-color: transparent;
1378
1401
  }
1402
+ .eventcatalog-visualizer .bg-violet-500 {
1403
+ background-color: var(--color-violet-500);
1404
+ }
1379
1405
  .eventcatalog-visualizer .bg-violet-500\/10 {
1380
1406
  background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 10%, transparent);
1381
1407
  @supports (color: color-mix(in lab, red, red)) {
@@ -1679,9 +1705,6 @@
1679
1705
  .eventcatalog-visualizer .fill-\[rgb\(var\(--ec-page-bg\)\)\] {
1680
1706
  fill: rgb(var(--ec-page-bg));
1681
1707
  }
1682
- .eventcatalog-visualizer .fill-slate-800 {
1683
- fill: var(--color-slate-800);
1684
- }
1685
1708
  .eventcatalog-visualizer .stroke-\[rgb\(var\(--ec-page-border\)\)\] {
1686
1709
  stroke: rgb(var(--ec-page-border));
1687
1710
  }
@@ -2378,6 +2401,12 @@
2378
2401
  --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yellow-300) 50%, transparent) var(--tw-shadow-alpha), transparent);
2379
2402
  }
2380
2403
  }
2404
+ .eventcatalog-visualizer .ring-amber-400\/60 {
2405
+ --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 60%, transparent);
2406
+ @supports (color: color-mix(in lab, red, red)) {
2407
+ --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 60%, transparent);
2408
+ }
2409
+ }
2381
2410
  .eventcatalog-visualizer .ring-blue-400\/60 {
2382
2411
  --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 60%, transparent);
2383
2412
  @supports (color: color-mix(in lab, red, red)) {
@@ -2393,6 +2422,12 @@
2393
2422
  --tw-ring-color: color-mix(in oklab, var(--color-cyan-400) 60%, transparent);
2394
2423
  }
2395
2424
  }
2425
+ .eventcatalog-visualizer .ring-emerald-400\/60 {
2426
+ --tw-ring-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 60%, transparent);
2427
+ @supports (color: color-mix(in lab, red, red)) {
2428
+ --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 60%, transparent);
2429
+ }
2430
+ }
2396
2431
  .eventcatalog-visualizer .ring-gray-400\/60 {
2397
2432
  --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 60%, transparent);
2398
2433
  @supports (color: color-mix(in lab, red, red)) {
@@ -2441,6 +2476,30 @@
2441
2476
  .eventcatalog-visualizer .ring-purple-500 {
2442
2477
  --tw-ring-color: var(--color-purple-500);
2443
2478
  }
2479
+ .eventcatalog-visualizer .ring-red-400\/60 {
2480
+ --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 60%, transparent);
2481
+ @supports (color: color-mix(in lab, red, red)) {
2482
+ --tw-ring-color: color-mix(in oklab, var(--color-red-400) 60%, transparent);
2483
+ }
2484
+ }
2485
+ .eventcatalog-visualizer .ring-rose-400\/60 {
2486
+ --tw-ring-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 60%, transparent);
2487
+ @supports (color: color-mix(in lab, red, red)) {
2488
+ --tw-ring-color: color-mix(in oklab, var(--color-rose-400) 60%, transparent);
2489
+ }
2490
+ }
2491
+ .eventcatalog-visualizer .ring-slate-400\/60 {
2492
+ --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 60%, transparent);
2493
+ @supports (color: color-mix(in lab, red, red)) {
2494
+ --tw-ring-color: color-mix(in oklab, var(--color-slate-400) 60%, transparent);
2495
+ }
2496
+ }
2497
+ .eventcatalog-visualizer .ring-teal-400\/60 {
2498
+ --tw-ring-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 60%, transparent);
2499
+ @supports (color: color-mix(in lab, red, red)) {
2500
+ --tw-ring-color: color-mix(in oklab, var(--color-teal-400) 60%, transparent);
2501
+ }
2502
+ }
2444
2503
  .eventcatalog-visualizer .ring-violet-400\/60 {
2445
2504
  --tw-ring-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 60%, transparent);
2446
2505
  @supports (color: color-mix(in lab, red, red)) {
@@ -3424,6 +3483,7 @@
3424
3483
  --ec-dp-node-bg: #f7f5ff;
3425
3484
  --ec-external-node-bg: #faf5ff;
3426
3485
  --ec-actor-node-bg: #fffdf5;
3486
+ --ec-custom-node-bg: #f8fbff;
3427
3487
  --ec-message-group-node-bg: #f9f5ff;
3428
3488
  --ec-deprecated-stripe: rgba(239, 68, 68, 0.3);
3429
3489
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -3449,6 +3509,7 @@
3449
3509
  --ec-dp-node-bg: rgb(40, 46, 56);
3450
3510
  --ec-external-node-bg: rgb(40, 46, 56);
3451
3511
  --ec-actor-node-bg: rgb(40, 46, 56);
3512
+ --ec-custom-node-bg: rgb(40, 46, 56);
3452
3513
  --ec-message-group-node-bg: rgb(40, 46, 56);
3453
3514
  --ec-deprecated-stripe: rgba(239, 68, 68, 0.25);
3454
3515
  --ec-input-bg: 22, 27, 34;
package/dist/styles.css CHANGED
@@ -106,7 +106,6 @@
106
106
  --color-slate-500: oklch(55.4% 0.046 257.417);
107
107
  --color-slate-600: oklch(44.6% 0.043 257.281);
108
108
  --color-slate-700: oklch(37.2% 0.044 257.287);
109
- --color-slate-800: oklch(27.9% 0.041 260.031);
110
109
  --color-gray-50: oklch(98.5% 0.002 247.839);
111
110
  --color-gray-100: oklch(96.7% 0.003 264.542);
112
111
  --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -181,6 +180,9 @@
181
180
  .eventcatalog-visualizer .-top-2\.5 {
182
181
  top: calc(var(--spacing) * -2.5);
183
182
  }
183
+ .eventcatalog-visualizer .-top-3 {
184
+ top: calc(var(--spacing) * -3);
185
+ }
184
186
  .eventcatalog-visualizer .-top-10 {
185
187
  top: calc(var(--spacing) * -10);
186
188
  }
@@ -712,6 +714,9 @@
712
714
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
713
715
  }
714
716
  }
717
+ .eventcatalog-visualizer .gap-x-2 {
718
+ column-gap: calc(var(--spacing) * 2);
719
+ }
715
720
  .eventcatalog-visualizer .gap-x-4 {
716
721
  column-gap: calc(var(--spacing) * 4);
717
722
  }
@@ -743,6 +748,9 @@
743
748
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
744
749
  }
745
750
  }
751
+ .eventcatalog-visualizer .gap-y-1 {
752
+ row-gap: calc(var(--spacing) * 1);
753
+ }
746
754
  .eventcatalog-visualizer .divide-y {
747
755
  .eventcatalog-visualizer :where(& > :not(:last-child)) {
748
756
  --tw-divide-y-reverse: 0;
@@ -1202,6 +1210,9 @@
1202
1210
  .eventcatalog-visualizer .bg-amber-100 {
1203
1211
  background-color: var(--color-amber-100);
1204
1212
  }
1213
+ .eventcatalog-visualizer .bg-amber-500 {
1214
+ background-color: var(--color-amber-500);
1215
+ }
1205
1216
  .eventcatalog-visualizer .bg-amber-500\/20 {
1206
1217
  background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
1207
1218
  @supports (color: color-mix(in lab, red, red)) {
@@ -1247,9 +1258,15 @@
1247
1258
  .eventcatalog-visualizer .bg-blue-600 {
1248
1259
  background-color: var(--color-blue-600);
1249
1260
  }
1261
+ .eventcatalog-visualizer .bg-cyan-500 {
1262
+ background-color: var(--color-cyan-500);
1263
+ }
1250
1264
  .eventcatalog-visualizer .bg-cyan-600 {
1251
1265
  background-color: var(--color-cyan-600);
1252
1266
  }
1267
+ .eventcatalog-visualizer .bg-emerald-500 {
1268
+ background-color: var(--color-emerald-500);
1269
+ }
1253
1270
  .eventcatalog-visualizer .bg-gray-50 {
1254
1271
  background-color: var(--color-gray-50);
1255
1272
  }
@@ -1361,8 +1378,14 @@
1361
1378
  .eventcatalog-visualizer .bg-red-500 {
1362
1379
  background-color: var(--color-red-500);
1363
1380
  }
1364
- .eventcatalog-visualizer .bg-slate-800 {
1365
- background-color: var(--color-slate-800);
1381
+ .eventcatalog-visualizer .bg-rose-500 {
1382
+ background-color: var(--color-rose-500);
1383
+ }
1384
+ .eventcatalog-visualizer .bg-slate-500 {
1385
+ background-color: var(--color-slate-500);
1386
+ }
1387
+ .eventcatalog-visualizer .bg-teal-500 {
1388
+ background-color: var(--color-teal-500);
1366
1389
  }
1367
1390
  .eventcatalog-visualizer .bg-teal-500\/10 {
1368
1391
  background-color: color-mix(in srgb, oklch(70.4% 0.14 182.503) 10%, transparent);
@@ -1376,6 +1399,9 @@
1376
1399
  .eventcatalog-visualizer .bg-transparent {
1377
1400
  background-color: transparent;
1378
1401
  }
1402
+ .eventcatalog-visualizer .bg-violet-500 {
1403
+ background-color: var(--color-violet-500);
1404
+ }
1379
1405
  .eventcatalog-visualizer .bg-violet-500\/10 {
1380
1406
  background-color: color-mix(in srgb, oklch(60.6% 0.25 292.717) 10%, transparent);
1381
1407
  @supports (color: color-mix(in lab, red, red)) {
@@ -1679,9 +1705,6 @@
1679
1705
  .eventcatalog-visualizer .fill-\[rgb\(var\(--ec-page-bg\)\)\] {
1680
1706
  fill: rgb(var(--ec-page-bg));
1681
1707
  }
1682
- .eventcatalog-visualizer .fill-slate-800 {
1683
- fill: var(--color-slate-800);
1684
- }
1685
1708
  .eventcatalog-visualizer .stroke-\[rgb\(var\(--ec-page-border\)\)\] {
1686
1709
  stroke: rgb(var(--ec-page-border));
1687
1710
  }
@@ -2378,6 +2401,12 @@
2378
2401
  --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yellow-300) 50%, transparent) var(--tw-shadow-alpha), transparent);
2379
2402
  }
2380
2403
  }
2404
+ .eventcatalog-visualizer .ring-amber-400\/60 {
2405
+ --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 60%, transparent);
2406
+ @supports (color: color-mix(in lab, red, red)) {
2407
+ --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 60%, transparent);
2408
+ }
2409
+ }
2381
2410
  .eventcatalog-visualizer .ring-blue-400\/60 {
2382
2411
  --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.165 254.624) 60%, transparent);
2383
2412
  @supports (color: color-mix(in lab, red, red)) {
@@ -2393,6 +2422,12 @@
2393
2422
  --tw-ring-color: color-mix(in oklab, var(--color-cyan-400) 60%, transparent);
2394
2423
  }
2395
2424
  }
2425
+ .eventcatalog-visualizer .ring-emerald-400\/60 {
2426
+ --tw-ring-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 60%, transparent);
2427
+ @supports (color: color-mix(in lab, red, red)) {
2428
+ --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 60%, transparent);
2429
+ }
2430
+ }
2396
2431
  .eventcatalog-visualizer .ring-gray-400\/60 {
2397
2432
  --tw-ring-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 60%, transparent);
2398
2433
  @supports (color: color-mix(in lab, red, red)) {
@@ -2441,6 +2476,30 @@
2441
2476
  .eventcatalog-visualizer .ring-purple-500 {
2442
2477
  --tw-ring-color: var(--color-purple-500);
2443
2478
  }
2479
+ .eventcatalog-visualizer .ring-red-400\/60 {
2480
+ --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 60%, transparent);
2481
+ @supports (color: color-mix(in lab, red, red)) {
2482
+ --tw-ring-color: color-mix(in oklab, var(--color-red-400) 60%, transparent);
2483
+ }
2484
+ }
2485
+ .eventcatalog-visualizer .ring-rose-400\/60 {
2486
+ --tw-ring-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 60%, transparent);
2487
+ @supports (color: color-mix(in lab, red, red)) {
2488
+ --tw-ring-color: color-mix(in oklab, var(--color-rose-400) 60%, transparent);
2489
+ }
2490
+ }
2491
+ .eventcatalog-visualizer .ring-slate-400\/60 {
2492
+ --tw-ring-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 60%, transparent);
2493
+ @supports (color: color-mix(in lab, red, red)) {
2494
+ --tw-ring-color: color-mix(in oklab, var(--color-slate-400) 60%, transparent);
2495
+ }
2496
+ }
2497
+ .eventcatalog-visualizer .ring-teal-400\/60 {
2498
+ --tw-ring-color: color-mix(in srgb, oklch(77.7% 0.152 181.912) 60%, transparent);
2499
+ @supports (color: color-mix(in lab, red, red)) {
2500
+ --tw-ring-color: color-mix(in oklab, var(--color-teal-400) 60%, transparent);
2501
+ }
2502
+ }
2444
2503
  .eventcatalog-visualizer .ring-violet-400\/60 {
2445
2504
  --tw-ring-color: color-mix(in srgb, oklch(70.2% 0.183 293.541) 60%, transparent);
2446
2505
  @supports (color: color-mix(in lab, red, red)) {
@@ -3424,6 +3483,7 @@
3424
3483
  --ec-dp-node-bg: #f7f5ff;
3425
3484
  --ec-external-node-bg: #faf5ff;
3426
3485
  --ec-actor-node-bg: #fffdf5;
3486
+ --ec-custom-node-bg: #f8fbff;
3427
3487
  --ec-message-group-node-bg: #f9f5ff;
3428
3488
  --ec-deprecated-stripe: rgba(239, 68, 68, 0.3);
3429
3489
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -3449,6 +3509,7 @@
3449
3509
  --ec-dp-node-bg: rgb(40, 46, 56);
3450
3510
  --ec-external-node-bg: rgb(40, 46, 56);
3451
3511
  --ec-actor-node-bg: rgb(40, 46, 56);
3512
+ --ec-custom-node-bg: rgb(40, 46, 56);
3452
3513
  --ec-message-group-node-bg: rgb(40, 46, 56);
3453
3514
  --ec-deprecated-stripe: rgba(239, 68, 68, 0.25);
3454
3515
  --ec-input-bg: 22, 27, 34;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eventcatalog/visualiser",
3
- "version": "3.20.0",
3
+ "version": "3.20.1",
4
4
  "description": "ReactFlow nodes and visualiser components for EventCatalog - framework agnostic",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",