@eventcatalog/visualiser 5.2.1 → 5.2.3

package/dist/styles-core.css

@@ -199,6 +199,9 @@
 .eventcatalog-visualizer .inset-x-0 {
   inset-inline: calc(var(--spacing) * 0);
 }
+.eventcatalog-visualizer .-top-1\.5 {
+  top: calc(var(--spacing) * -1.5);
+}
 .eventcatalog-visualizer .-top-2 {
   top: calc(var(--spacing) * -2);
 }
@@ -229,11 +232,14 @@
 .eventcatalog-visualizer .top-3 {
   top: calc(var(--spacing) * 3);
 }
+.eventcatalog-visualizer .top-\[-8px\] {
+  top: -8px;
+}
 .eventcatalog-visualizer .top-\[-14px\] {
   top: -14px;
 }
-.eventcatalog-visualizer .top-\[34px\] {
-  top: 34px;
+.eventcatalog-visualizer .top-\[16px\] {
+  top: 16px;
 }
 .eventcatalog-visualizer .top-\[62px\] {
   top: 62px;
@@ -241,6 +247,9 @@
 .eventcatalog-visualizer .top-\[66px\] {
   top: 66px;
 }
+.eventcatalog-visualizer .top-\[75px\] {
+  top: 75px;
+}
 .eventcatalog-visualizer .top-full {
   top: 100%;
 }
@@ -250,6 +259,9 @@
 .eventcatalog-visualizer .\!right-\[-1px\] {
   right: -1px !important;
 }
+.eventcatalog-visualizer .-right-1\.5 {
+  right: calc(var(--spacing) * -1.5);
+}
 .eventcatalog-visualizer .-right-2 {
   right: calc(var(--spacing) * -2);
 }
@@ -322,9 +334,18 @@
 .eventcatalog-visualizer .left-3\.5 {
   left: calc(var(--spacing) * 3.5);
 }
+.eventcatalog-visualizer .left-\[-6\.5px\] {
+  left: -6.5px;
+}
 .eventcatalog-visualizer .left-\[-14px\] {
   left: -14px;
 }
+.eventcatalog-visualizer .left-\[40px\] {
+  left: 40px;
+}
+.eventcatalog-visualizer .left-\[284px\] {
+  left: 284px;
+}
 .eventcatalog-visualizer .left-\[290px\] {
   left: 290px;
 }
@@ -388,15 +409,15 @@
     max-width: 96rem;
   }
 }
-.eventcatalog-visualizer .-m-3 {
-  margin: calc(var(--spacing) * -3);
-}
 .eventcatalog-visualizer .m-0 {
   margin: calc(var(--spacing) * 0);
 }
 .eventcatalog-visualizer .m-1 {
   margin: calc(var(--spacing) * 1);
 }
+.eventcatalog-visualizer .-mx-1\.5 {
+  margin-inline: calc(var(--spacing) * -1.5);
+}
 .eventcatalog-visualizer .mx-1 {
   margin-inline: calc(var(--spacing) * 1);
 }
@@ -607,15 +628,21 @@
 .eventcatalog-visualizer .max-h-60 {
   max-height: calc(var(--spacing) * 60);
 }
-.eventcatalog-visualizer .max-h-80 {
-  max-height: calc(var(--spacing) * 80);
+.eventcatalog-visualizer .max-h-\[60vh\] {
+  max-height: 60vh;
 }
 .eventcatalog-visualizer .max-h-\[80vh\] {
   max-height: 80vh;
 }
+.eventcatalog-visualizer .max-h-\[min\(70vh\,640px\)\] {
+  max-height: min(70vh, 640px);
+}
 .eventcatalog-visualizer .min-h-0 {
   min-height: calc(var(--spacing) * 0);
 }
+.eventcatalog-visualizer .min-h-20 {
+  min-height: calc(var(--spacing) * 20);
+}
 .eventcatalog-visualizer .min-h-\[2em\] {
   min-height: 2em;
 }
@@ -694,9 +721,6 @@
 .eventcatalog-visualizer .w-44 {
   width: calc(var(--spacing) * 44);
 }
-.eventcatalog-visualizer .w-56 {
-  width: calc(var(--spacing) * 56);
-}
 .eventcatalog-visualizer .w-60 {
   width: calc(var(--spacing) * 60);
 }
@@ -893,6 +917,9 @@
 .eventcatalog-visualizer .resize-none {
   resize: none;
 }
+.eventcatalog-visualizer .resize-y {
+  resize: vertical;
+}
 .eventcatalog-visualizer .list-none {
   list-style-type: none;
 }
@@ -1115,6 +1142,10 @@
 .eventcatalog-visualizer .rounded-xl {
   border-radius: var(--radius-xl);
 }
+.eventcatalog-visualizer .rounded-t-\[11px\] {
+  border-top-left-radius: 11px;
+  border-top-right-radius: 11px;
+}
 .eventcatalog-visualizer .rounded-t-lg {
   border-top-left-radius: var(--radius-lg);
   border-top-right-radius: var(--radius-lg);
@@ -1131,9 +1162,16 @@
   border-top-right-radius: var(--radius-md);
   border-bottom-right-radius: var(--radius-md);
 }
+.eventcatalog-visualizer .rounded-b-\[11px\] {
+  border-bottom-right-radius: 11px;
+  border-bottom-left-radius: 11px;
+}
 .eventcatalog-visualizer .rounded-br-lg {
   border-bottom-right-radius: var(--radius-lg);
 }
+.eventcatalog-visualizer .rounded-bl-\[2px\] {
+  border-bottom-left-radius: 2px;
+}
 .eventcatalog-visualizer .rounded-bl-none {
   border-bottom-left-radius: 0;
 }
@@ -1181,10 +1219,6 @@
   border-left-style: var(--tw-border-style);
   border-left-width: 1px;
 }
-.eventcatalog-visualizer .border-l-\[3px\] {
-  border-left-style: var(--tw-border-style);
-  border-left-width: 3px;
-}
 .eventcatalog-visualizer .border-l-\[16px\] {
   border-left-style: var(--tw-border-style);
   border-left-width: 16px;
@@ -1623,8 +1657,8 @@
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-page-text\)\)\] {
   background-color: rgb(var(--ec-page-text));
 }
-.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-primary-bg\)\)\] {
-  background-color: rgb(var(--ec-primary-bg));
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-page-text\)\/0\.02\)\] {
+  background-color: rgb(var(--ec-page-text)/0.02);
 }
 .eventcatalog-visualizer .bg-\[var\(--ec-actor-node-bg\,rgb\(var\(--ec-card-bg\)\)\)\] {
   background-color: var(--ec-actor-node-bg,rgb(var(--ec-card-bg)));
@@ -2341,18 +2375,12 @@
 .eventcatalog-visualizer .pl-2 {
   padding-left: calc(var(--spacing) * 2);
 }
-.eventcatalog-visualizer .pl-2\.5 {
-  padding-left: calc(var(--spacing) * 2.5);
-}
 .eventcatalog-visualizer .pl-3 {
   padding-left: calc(var(--spacing) * 3);
 }
 .eventcatalog-visualizer .pl-7 {
   padding-left: calc(var(--spacing) * 7);
 }
-.eventcatalog-visualizer .pl-\[13px\] {
-  padding-left: 13px;
-}
 .eventcatalog-visualizer .text-center {
   text-align: center;
 }
@@ -2428,6 +2456,10 @@
   --tw-leading: calc(var(--spacing) * 4);
   line-height: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .leading-5 {
+  --tw-leading: calc(var(--spacing) * 5);
+  line-height: calc(var(--spacing) * 5);
+}
 .eventcatalog-visualizer .leading-none {
   --tw-leading: 1;
   line-height: 1;
@@ -2544,9 +2576,6 @@
 .eventcatalog-visualizer .text-\[rgb\(var\(--ec-page-text-muted\)\)\] {
   color: rgb(var(--ec-page-text-muted));
 }
-.eventcatalog-visualizer .text-\[rgb\(var\(--ec-primary-text\)\)\] {
-  color: rgb(var(--ec-primary-text));
-}
 .eventcatalog-visualizer .text-amber-100 {
   color: var(--color-amber-100);
 }
@@ -3377,6 +3406,16 @@
     }
   }
 }
+.eventcatalog-visualizer .hover\:scale-110 {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      --tw-scale-x: 110%;
+      --tw-scale-y: 110%;
+      --tw-scale-z: 110%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+}
 .eventcatalog-visualizer .hover\:border-\[color-mix\(in_srgb\,rgb\(var\(--ec-accent\)\)_45\%\,transparent\)\]\! {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -3394,13 +3433,6 @@
     }
   }
 }
-.eventcatalog-visualizer .hover\:border-\[rgb\(var\(--ec-accent\)\)\]\! {
-  .eventcatalog-visualizer &:hover {
-    @media (hover: hover) {
-      border-color: rgb(var(--ec-accent)) !important;
-    }
-  }
-}
 .eventcatalog-visualizer .hover\:border-\[rgb\(var\(--ec-accent\)\/0\.3\)\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -3418,6 +3450,13 @@
     }
   }
 }
+.eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-accent\)\/0\.06\)\] {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      background-color: rgb(var(--ec-accent)/0.06);
+    }
+  }
+}
 .eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-accent-hover\)\)\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -5354,6 +5393,21 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -5425,5 +5479,8 @@
     --tw-drop-shadow-size: initial;
     --tw-duration: initial;
     --tw-ease: initial;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-scale-z: 1;
   }
 }

package/dist/styles.css

@@ -199,6 +199,9 @@
 .eventcatalog-visualizer .inset-x-0 {
   inset-inline: calc(var(--spacing) * 0);
 }
+.eventcatalog-visualizer .-top-1\.5 {
+  top: calc(var(--spacing) * -1.5);
+}
 .eventcatalog-visualizer .-top-2 {
   top: calc(var(--spacing) * -2);
 }
@@ -229,11 +232,14 @@
 .eventcatalog-visualizer .top-3 {
   top: calc(var(--spacing) * 3);
 }
+.eventcatalog-visualizer .top-\[-8px\] {
+  top: -8px;
+}
 .eventcatalog-visualizer .top-\[-14px\] {
   top: -14px;
 }
-.eventcatalog-visualizer .top-\[34px\] {
-  top: 34px;
+.eventcatalog-visualizer .top-\[16px\] {
+  top: 16px;
 }
 .eventcatalog-visualizer .top-\[62px\] {
   top: 62px;
@@ -241,6 +247,9 @@
 .eventcatalog-visualizer .top-\[66px\] {
   top: 66px;
 }
+.eventcatalog-visualizer .top-\[75px\] {
+  top: 75px;
+}
 .eventcatalog-visualizer .top-full {
   top: 100%;
 }
@@ -250,6 +259,9 @@
 .eventcatalog-visualizer .\!right-\[-1px\] {
   right: -1px !important;
 }
+.eventcatalog-visualizer .-right-1\.5 {
+  right: calc(var(--spacing) * -1.5);
+}
 .eventcatalog-visualizer .-right-2 {
   right: calc(var(--spacing) * -2);
 }
@@ -322,9 +334,18 @@
 .eventcatalog-visualizer .left-3\.5 {
   left: calc(var(--spacing) * 3.5);
 }
+.eventcatalog-visualizer .left-\[-6\.5px\] {
+  left: -6.5px;
+}
 .eventcatalog-visualizer .left-\[-14px\] {
   left: -14px;
 }
+.eventcatalog-visualizer .left-\[40px\] {
+  left: 40px;
+}
+.eventcatalog-visualizer .left-\[284px\] {
+  left: 284px;
+}
 .eventcatalog-visualizer .left-\[290px\] {
   left: 290px;
 }
@@ -388,15 +409,15 @@
     max-width: 96rem;
   }
 }
-.eventcatalog-visualizer .-m-3 {
-  margin: calc(var(--spacing) * -3);
-}
 .eventcatalog-visualizer .m-0 {
   margin: calc(var(--spacing) * 0);
 }
 .eventcatalog-visualizer .m-1 {
   margin: calc(var(--spacing) * 1);
 }
+.eventcatalog-visualizer .-mx-1\.5 {
+  margin-inline: calc(var(--spacing) * -1.5);
+}
 .eventcatalog-visualizer .mx-1 {
   margin-inline: calc(var(--spacing) * 1);
 }
@@ -607,15 +628,21 @@
 .eventcatalog-visualizer .max-h-60 {
   max-height: calc(var(--spacing) * 60);
 }
-.eventcatalog-visualizer .max-h-80 {
-  max-height: calc(var(--spacing) * 80);
+.eventcatalog-visualizer .max-h-\[60vh\] {
+  max-height: 60vh;
 }
 .eventcatalog-visualizer .max-h-\[80vh\] {
   max-height: 80vh;
 }
+.eventcatalog-visualizer .max-h-\[min\(70vh\,640px\)\] {
+  max-height: min(70vh, 640px);
+}
 .eventcatalog-visualizer .min-h-0 {
   min-height: calc(var(--spacing) * 0);
 }
+.eventcatalog-visualizer .min-h-20 {
+  min-height: calc(var(--spacing) * 20);
+}
 .eventcatalog-visualizer .min-h-\[2em\] {
   min-height: 2em;
 }
@@ -694,9 +721,6 @@
 .eventcatalog-visualizer .w-44 {
   width: calc(var(--spacing) * 44);
 }
-.eventcatalog-visualizer .w-56 {
-  width: calc(var(--spacing) * 56);
-}
 .eventcatalog-visualizer .w-60 {
   width: calc(var(--spacing) * 60);
 }
@@ -893,6 +917,9 @@
 .eventcatalog-visualizer .resize-none {
   resize: none;
 }
+.eventcatalog-visualizer .resize-y {
+  resize: vertical;
+}
 .eventcatalog-visualizer .list-none {
   list-style-type: none;
 }
@@ -1115,6 +1142,10 @@
 .eventcatalog-visualizer .rounded-xl {
   border-radius: var(--radius-xl);
 }
+.eventcatalog-visualizer .rounded-t-\[11px\] {
+  border-top-left-radius: 11px;
+  border-top-right-radius: 11px;
+}
 .eventcatalog-visualizer .rounded-t-lg {
   border-top-left-radius: var(--radius-lg);
   border-top-right-radius: var(--radius-lg);
@@ -1131,9 +1162,16 @@
   border-top-right-radius: var(--radius-md);
   border-bottom-right-radius: var(--radius-md);
 }
+.eventcatalog-visualizer .rounded-b-\[11px\] {
+  border-bottom-right-radius: 11px;
+  border-bottom-left-radius: 11px;
+}
 .eventcatalog-visualizer .rounded-br-lg {
   border-bottom-right-radius: var(--radius-lg);
 }
+.eventcatalog-visualizer .rounded-bl-\[2px\] {
+  border-bottom-left-radius: 2px;
+}
 .eventcatalog-visualizer .rounded-bl-none {
   border-bottom-left-radius: 0;
 }
@@ -1181,10 +1219,6 @@
   border-left-style: var(--tw-border-style);
   border-left-width: 1px;
 }
-.eventcatalog-visualizer .border-l-\[3px\] {
-  border-left-style: var(--tw-border-style);
-  border-left-width: 3px;
-}
 .eventcatalog-visualizer .border-l-\[16px\] {
   border-left-style: var(--tw-border-style);
   border-left-width: 16px;
@@ -1623,8 +1657,8 @@
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-page-text\)\)\] {
   background-color: rgb(var(--ec-page-text));
 }
-.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-primary-bg\)\)\] {
-  background-color: rgb(var(--ec-primary-bg));
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-page-text\)\/0\.02\)\] {
+  background-color: rgb(var(--ec-page-text)/0.02);
 }
 .eventcatalog-visualizer .bg-\[var\(--ec-actor-node-bg\,rgb\(var\(--ec-card-bg\)\)\)\] {
   background-color: var(--ec-actor-node-bg,rgb(var(--ec-card-bg)));
@@ -2341,18 +2375,12 @@
 .eventcatalog-visualizer .pl-2 {
   padding-left: calc(var(--spacing) * 2);
 }
-.eventcatalog-visualizer .pl-2\.5 {
-  padding-left: calc(var(--spacing) * 2.5);
-}
 .eventcatalog-visualizer .pl-3 {
   padding-left: calc(var(--spacing) * 3);
 }
 .eventcatalog-visualizer .pl-7 {
   padding-left: calc(var(--spacing) * 7);
 }
-.eventcatalog-visualizer .pl-\[13px\] {
-  padding-left: 13px;
-}
 .eventcatalog-visualizer .text-center {
   text-align: center;
 }
@@ -2428,6 +2456,10 @@
   --tw-leading: calc(var(--spacing) * 4);
   line-height: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .leading-5 {
+  --tw-leading: calc(var(--spacing) * 5);
+  line-height: calc(var(--spacing) * 5);
+}
 .eventcatalog-visualizer .leading-none {
   --tw-leading: 1;
   line-height: 1;
@@ -2544,9 +2576,6 @@
 .eventcatalog-visualizer .text-\[rgb\(var\(--ec-page-text-muted\)\)\] {
   color: rgb(var(--ec-page-text-muted));
 }
-.eventcatalog-visualizer .text-\[rgb\(var\(--ec-primary-text\)\)\] {
-  color: rgb(var(--ec-primary-text));
-}
 .eventcatalog-visualizer .text-amber-100 {
   color: var(--color-amber-100);
 }
@@ -3377,6 +3406,16 @@
     }
   }
 }
+.eventcatalog-visualizer .hover\:scale-110 {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      --tw-scale-x: 110%;
+      --tw-scale-y: 110%;
+      --tw-scale-z: 110%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
+}
 .eventcatalog-visualizer .hover\:border-\[color-mix\(in_srgb\,rgb\(var\(--ec-accent\)\)_45\%\,transparent\)\]\! {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -3394,13 +3433,6 @@
     }
   }
 }
-.eventcatalog-visualizer .hover\:border-\[rgb\(var\(--ec-accent\)\)\]\! {
-  .eventcatalog-visualizer &:hover {
-    @media (hover: hover) {
-      border-color: rgb(var(--ec-accent)) !important;
-    }
-  }
-}
 .eventcatalog-visualizer .hover\:border-\[rgb\(var\(--ec-accent\)\/0\.3\)\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -3418,6 +3450,13 @@
     }
   }
 }
+.eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-accent\)\/0\.06\)\] {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      background-color: rgb(var(--ec-accent)/0.06);
+    }
+  }
+}
 .eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-accent-hover\)\)\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -5348,6 +5387,21 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -5419,5 +5473,8 @@
     --tw-drop-shadow-size: initial;
     --tw-duration: initial;
     --tw-ease: initial;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-scale-z: 1;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/visualiser",
-  "version": "5.2.1",
+  "version": "5.2.3",
   "description": "ReactFlow nodes and visualiser components for EventCatalog - framework agnostic",
   "main": "dist/index.js",
   "module": "dist/index.mjs",