@eventcatalog/visualiser 5.0.0-beta.4 → 5.0.0-beta.6

package/dist/styles.css

@@ -1,5 +1,7 @@
 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 .eventcatalog-visualizer, .eventcatalog-visualizer :host {
+  --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
   --color-red-100: oklch(93.6% 0.032 17.717);
@@ -142,6 +144,7 @@
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
+  --tracking-tight: -0.025em;
   --tracking-wide: 0.025em;
   --tracking-wider: 0.05em;
   --tracking-widest: 0.1em;
@@ -182,12 +185,21 @@
 .eventcatalog-visualizer .relative {
   position: relative;
 }
+.eventcatalog-visualizer .sticky {
+  position: sticky;
+}
 .eventcatalog-visualizer .-inset-1\.5 {
   inset: calc(var(--spacing) * -1.5);
 }
 .eventcatalog-visualizer .inset-0 {
   inset: calc(var(--spacing) * 0);
 }
+.eventcatalog-visualizer .inset-x-0 {
+  inset-inline: calc(var(--spacing) * 0);
+}
+.eventcatalog-visualizer .-top-2 {
+  top: calc(var(--spacing) * -2);
+}
 .eventcatalog-visualizer .-top-2\.5 {
   top: calc(var(--spacing) * -2.5);
 }
@@ -212,9 +224,24 @@
 .eventcatalog-visualizer .top-2 {
   top: calc(var(--spacing) * 2);
 }
+.eventcatalog-visualizer .top-3 {
+  top: calc(var(--spacing) * 3);
+}
+.eventcatalog-visualizer .top-\[-14px\] {
+  top: -14px;
+}
 .eventcatalog-visualizer .top-\[10px\] {
   top: 10px;
 }
+.eventcatalog-visualizer .top-\[34px\] {
+  top: 34px;
+}
+.eventcatalog-visualizer .top-\[62px\] {
+  top: 62px;
+}
+.eventcatalog-visualizer .top-\[66px\] {
+  top: 66px;
+}
 .eventcatalog-visualizer .top-full {
   top: 100%;
 }
@@ -224,6 +251,9 @@
 .eventcatalog-visualizer .\!right-\[-1px\] {
   right: -1px !important;
 }
+.eventcatalog-visualizer .-right-2 {
+  right: calc(var(--spacing) * -2);
+}
 .eventcatalog-visualizer .-right-2\.5 {
   right: calc(var(--spacing) * -2.5);
 }
@@ -236,15 +266,33 @@
 .eventcatalog-visualizer .right-4 {
   right: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .right-\[4px\] {
+  right: 4px;
+}
+.eventcatalog-visualizer .right-\[52px\] {
+  right: 52px;
+}
 .eventcatalog-visualizer .right-full {
   right: 100%;
 }
 .eventcatalog-visualizer .-bottom-2\.5 {
   bottom: calc(var(--spacing) * -2.5);
 }
+.eventcatalog-visualizer .bottom-0 {
+  bottom: calc(var(--spacing) * 0);
+}
 .eventcatalog-visualizer .bottom-4 {
   bottom: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .bottom-\[2px\] {
+  bottom: 2px;
+}
+.eventcatalog-visualizer .bottom-\[68px\] {
+  bottom: 68px;
+}
+.eventcatalog-visualizer .bottom-\[120px\] {
+  bottom: 120px;
+}
 .eventcatalog-visualizer .bottom-full {
   bottom: 100%;
 }
@@ -269,12 +317,24 @@
 .eventcatalog-visualizer .left-2\.5 {
   left: calc(var(--spacing) * 2.5);
 }
+.eventcatalog-visualizer .left-3 {
+  left: calc(var(--spacing) * 3);
+}
 .eventcatalog-visualizer .left-3\.5 {
   left: calc(var(--spacing) * 3.5);
 }
 .eventcatalog-visualizer .left-4 {
   left: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .left-\[-14px\] {
+  left: -14px;
+}
+.eventcatalog-visualizer .left-\[290px\] {
+  left: 290px;
+}
+.eventcatalog-visualizer .left-\[calc\(50\%\+6px\)\] {
+  left: calc(50% + 6px);
+}
 .eventcatalog-visualizer .left-full {
   left: 100%;
 }
@@ -305,6 +365,9 @@
 .eventcatalog-visualizer .z-\[60\] {
   z-index: 60;
 }
+.eventcatalog-visualizer .z-\[100\] {
+  z-index: 100;
+}
 .eventcatalog-visualizer .z-\[9999\] {
   z-index: 9999;
 }
@@ -329,6 +392,9 @@
     max-width: 96rem;
   }
 }
+.eventcatalog-visualizer .-m-3 {
+  margin: calc(var(--spacing) * -3);
+}
 .eventcatalog-visualizer .m-0 {
   margin: calc(var(--spacing) * 0);
 }
@@ -338,6 +404,9 @@
 .eventcatalog-visualizer .mx-1 {
   margin-inline: calc(var(--spacing) * 1);
 }
+.eventcatalog-visualizer .mx-3 {
+  margin-inline: calc(var(--spacing) * 3);
+}
 .eventcatalog-visualizer .mx-auto {
   margin-inline: auto;
 }
@@ -353,6 +422,9 @@
 .eventcatalog-visualizer .my-6 {
   margin-block: calc(var(--spacing) * 6);
 }
+.eventcatalog-visualizer .-mt-0\.5 {
+  margin-top: calc(var(--spacing) * -0.5);
+}
 .eventcatalog-visualizer .-mt-1 {
   margin-top: calc(var(--spacing) * -1);
 }
@@ -374,6 +446,12 @@
 .eventcatalog-visualizer .mt-4 {
   margin-top: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .mt-5 {
+  margin-top: calc(var(--spacing) * 5);
+}
+.eventcatalog-visualizer .mt-10 {
+  margin-top: calc(var(--spacing) * 10);
+}
 .eventcatalog-visualizer .mt-14 {
   margin-top: calc(var(--spacing) * 14);
 }
@@ -386,6 +464,9 @@
 .eventcatalog-visualizer .mb-1 {
   margin-bottom: calc(var(--spacing) * 1);
 }
+.eventcatalog-visualizer .mb-1\.5 {
+  margin-bottom: calc(var(--spacing) * 1.5);
+}
 .eventcatalog-visualizer .mb-2 {
   margin-bottom: calc(var(--spacing) * 2);
 }
@@ -395,6 +476,12 @@
 .eventcatalog-visualizer .mb-12 {
   margin-bottom: calc(var(--spacing) * 12);
 }
+.eventcatalog-visualizer .mb-\[-5px\] {
+  margin-bottom: -5px;
+}
+.eventcatalog-visualizer .-ml-1 {
+  margin-left: calc(var(--spacing) * -1);
+}
 .eventcatalog-visualizer .ml-2 {
   margin-left: calc(var(--spacing) * 2);
 }
@@ -407,12 +494,21 @@
 .eventcatalog-visualizer .ml-12 {
   margin-left: calc(var(--spacing) * 12);
 }
+.eventcatalog-visualizer .ml-auto {
+  margin-left: auto;
+}
 .eventcatalog-visualizer .line-clamp-2 {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+.eventcatalog-visualizer .line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
 .eventcatalog-visualizer .block {
   display: block;
 }
@@ -431,9 +527,15 @@
 .eventcatalog-visualizer .inline-flex {
   display: inline-flex;
 }
+.eventcatalog-visualizer .table {
+  display: table;
+}
 .eventcatalog-visualizer .\!h-2 {
   height: calc(var(--spacing) * 2) !important;
 }
+.eventcatalog-visualizer .\!h-2\.5 {
+  height: calc(var(--spacing) * 2.5) !important;
+}
 .eventcatalog-visualizer .\!h-3 {
   height: calc(var(--spacing) * 3) !important;
 }
@@ -476,6 +578,9 @@
 .eventcatalog-visualizer .h-10 {
   height: calc(var(--spacing) * 10);
 }
+.eventcatalog-visualizer .h-11 {
+  height: calc(var(--spacing) * 11);
+}
 .eventcatalog-visualizer .h-24 {
   height: calc(var(--spacing) * 24);
 }
@@ -488,6 +593,9 @@
 .eventcatalog-visualizer .h-\[30em\] {
   height: 30em;
 }
+.eventcatalog-visualizer .h-\[60px\] {
+  height: 60px;
+}
 .eventcatalog-visualizer .h-full {
   height: 100%;
 }
@@ -503,6 +611,15 @@
 .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-\[80vh\] {
+  max-height: 80vh;
+}
+.eventcatalog-visualizer .min-h-0 {
+  min-height: calc(var(--spacing) * 0);
+}
 .eventcatalog-visualizer .min-h-\[2em\] {
   min-height: 2em;
 }
@@ -512,6 +629,9 @@
 .eventcatalog-visualizer .min-h-\[5em\] {
   min-height: 5em;
 }
+.eventcatalog-visualizer .min-h-\[34px\] {
+  min-height: 34px;
+}
 .eventcatalog-visualizer .min-h-\[120px\] {
   min-height: 120px;
 }
@@ -521,6 +641,9 @@
 .eventcatalog-visualizer .\!w-2 {
   width: calc(var(--spacing) * 2) !important;
 }
+.eventcatalog-visualizer .\!w-2\.5 {
+  width: calc(var(--spacing) * 2.5) !important;
+}
 .eventcatalog-visualizer .\!w-3 {
   width: calc(var(--spacing) * 3) !important;
 }
@@ -557,6 +680,9 @@
 .eventcatalog-visualizer .w-9 {
   width: calc(var(--spacing) * 9);
 }
+.eventcatalog-visualizer .w-11 {
+  width: calc(var(--spacing) * 11);
+}
 .eventcatalog-visualizer .w-12 {
   width: calc(var(--spacing) * 12);
 }
@@ -572,9 +698,18 @@
 .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);
 }
+.eventcatalog-visualizer .w-64 {
+  width: calc(var(--spacing) * 64);
+}
+.eventcatalog-visualizer .w-72 {
+  width: calc(var(--spacing) * 72);
+}
 .eventcatalog-visualizer .w-80 {
   width: calc(var(--spacing) * 80);
 }
@@ -587,6 +722,9 @@
 .eventcatalog-visualizer .w-\[200px\] {
   width: 200px;
 }
+.eventcatalog-visualizer .w-\[264px\] {
+  width: 264px;
+}
 .eventcatalog-visualizer .w-\[360px\] {
   width: 360px;
 }
@@ -614,6 +752,12 @@
 .eventcatalog-visualizer .max-w-\[120px\] {
   max-width: 120px;
 }
+.eventcatalog-visualizer .max-w-\[160px\] {
+  max-width: 160px;
+}
+.eventcatalog-visualizer .max-w-\[200px\] {
+  max-width: 200px;
+}
 .eventcatalog-visualizer .max-w-\[210px\] {
   max-width: 210px;
 }
@@ -626,6 +770,9 @@
 .eventcatalog-visualizer .max-w-\[320px\] {
   max-width: 320px;
 }
+.eventcatalog-visualizer .max-w-\[440px\] {
+  max-width: 440px;
+}
 .eventcatalog-visualizer .max-w-full {
   max-width: 100%;
 }
@@ -641,6 +788,12 @@
 .eventcatalog-visualizer .min-w-0 {
   min-width: calc(var(--spacing) * 0);
 }
+.eventcatalog-visualizer .min-w-4 {
+  min-width: calc(var(--spacing) * 4);
+}
+.eventcatalog-visualizer .min-w-6 {
+  min-width: calc(var(--spacing) * 6);
+}
 .eventcatalog-visualizer .min-w-44 {
   min-width: calc(var(--spacing) * 44);
 }
@@ -665,6 +818,9 @@
 .eventcatalog-visualizer .flex-1 {
   flex: 1;
 }
+.eventcatalog-visualizer .flex-none {
+  flex: none;
+}
 .eventcatalog-visualizer .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -681,16 +837,27 @@
   --tw-translate-x: calc(calc(1/2 * 100%) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
+.eventcatalog-visualizer .-translate-x-\[3px\] {
+  --tw-translate-x: calc(3px * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
 .eventcatalog-visualizer .-translate-y-1\/2 {
   --tw-translate-y: calc(calc(1/2 * 100%) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
+.eventcatalog-visualizer .-translate-y-\[2px\] {
+  --tw-translate-y: calc(2px * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
 .eventcatalog-visualizer .scale-110 {
   --tw-scale-x: 110%;
   --tw-scale-y: 110%;
   --tw-scale-z: 110%;
   scale: var(--tw-scale-x) var(--tw-scale-y);
 }
+.eventcatalog-visualizer .-rotate-90 {
+  rotate: calc(90deg * -1);
+}
 .eventcatalog-visualizer .rotate-45 {
   rotate: 45deg;
 }
@@ -709,6 +876,9 @@
 .eventcatalog-visualizer .cursor-grab {
   cursor: grab;
 }
+.eventcatalog-visualizer .cursor-move {
+  cursor: move;
+}
 .eventcatalog-visualizer .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -778,15 +948,63 @@
 .eventcatalog-visualizer .gap-3 {
   gap: calc(var(--spacing) * 3);
 }
+.eventcatalog-visualizer .gap-3\.5 {
+  gap: calc(var(--spacing) * 3.5);
+}
 .eventcatalog-visualizer .gap-4 {
   gap: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .space-y-1 {
+  .eventcatalog-visualizer :where(& > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+  }
+}
+.eventcatalog-visualizer .space-y-1\.5 {
+  .eventcatalog-visualizer :where(& > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+}
+.eventcatalog-visualizer .space-y-2\.5 {
+  .eventcatalog-visualizer :where(& > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+}
+.eventcatalog-visualizer .space-y-3 {
+  .eventcatalog-visualizer :where(& > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+  }
+}
 .eventcatalog-visualizer .gap-x-2 {
   column-gap: calc(var(--spacing) * 2);
 }
 .eventcatalog-visualizer .gap-x-4 {
   column-gap: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .gap-x-8 {
+  column-gap: calc(var(--spacing) * 8);
+}
+.eventcatalog-visualizer .-space-x-0\.5 {
+  .eventcatalog-visualizer :where(& > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * -0.5) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * -0.5) * calc(1 - var(--tw-space-x-reverse)));
+  }
+}
+.eventcatalog-visualizer .-space-x-1 {
+  .eventcatalog-visualizer :where(& > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * -1) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * -1) * calc(1 - var(--tw-space-x-reverse)));
+  }
+}
 .eventcatalog-visualizer .space-x-1 {
   .eventcatalog-visualizer :where(& > :not(:last-child)) {
     --tw-space-x-reverse: 0;
@@ -818,6 +1036,9 @@
 .eventcatalog-visualizer .gap-y-1 {
   row-gap: calc(var(--spacing) * 1);
 }
+.eventcatalog-visualizer .gap-y-5 {
+  row-gap: calc(var(--spacing) * 5);
+}
 .eventcatalog-visualizer .divide-y {
   .eventcatalog-visualizer :where(& > :not(:last-child)) {
     --tw-divide-y-reverse: 0;
@@ -852,6 +1073,9 @@
 .eventcatalog-visualizer .\!rounded-full {
   border-radius: calc(infinity * 1px) !important;
 }
+.eventcatalog-visualizer .\!rounded-sm {
+  border-radius: var(--radius-sm) !important;
+}
 .eventcatalog-visualizer .rounded {
   border-radius: 0.25rem;
 }
@@ -861,6 +1085,9 @@
 .eventcatalog-visualizer .rounded-\[14px\] {
   border-radius: 14px;
 }
+.eventcatalog-visualizer .rounded-\[18px\] {
+  border-radius: 18px;
+}
 .eventcatalog-visualizer .rounded-full {
   border-radius: calc(infinity * 1px);
 }
@@ -895,6 +1122,9 @@
 .eventcatalog-visualizer .rounded-br-lg {
   border-bottom-right-radius: var(--radius-lg);
 }
+.eventcatalog-visualizer .rounded-bl-none {
+  border-bottom-left-radius: 0;
+}
 .eventcatalog-visualizer .\!border {
   border-style: var(--tw-border-style) !important;
   border-width: 1px !important;
@@ -939,6 +1169,10 @@
   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;
@@ -951,12 +1185,27 @@
   --tw-border-style: none;
   border-style: none;
 }
+.eventcatalog-visualizer .\!border-\[rgb\(var\(--ec-accent\)\)\] {
+  border-color: rgb(var(--ec-accent)) !important;
+}
 .eventcatalog-visualizer .\!border-\[rgb\(var\(--ec-page-border\)\)\] {
   border-color: rgb(var(--ec-page-border)) !important;
 }
 .eventcatalog-visualizer .\!border-gray-500 {
   border-color: var(--color-gray-500) !important;
 }
+.eventcatalog-visualizer .border-\[rgb\(var\(--ec-badge-color-gray-text\)\/0\.25\)\] {
+  border-color: rgb(var(--ec-badge-color-gray-text)/0.25);
+}
+.eventcatalog-visualizer .border-\[rgb\(var\(--ec-badge-color-green-text\)\/0\.3\)\] {
+  border-color: rgb(var(--ec-badge-color-green-text)/0.3);
+}
+.eventcatalog-visualizer .border-\[rgb\(var\(--ec-badge-color-red-text\)\/0\.3\)\] {
+  border-color: rgb(var(--ec-badge-color-red-text)/0.3);
+}
+.eventcatalog-visualizer .border-\[rgb\(var\(--ec-badge-color-yellow-text\)\/0\.3\)\] {
+  border-color: rgb(var(--ec-badge-color-yellow-text)/0.3);
+}
 .eventcatalog-visualizer .border-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\)\] {
   border-color: rgb(var(--ec-catalog-accent,79 70 229));
 }
@@ -1290,6 +1539,33 @@
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-accent-subtle\)\)\] {
   background-color: rgb(var(--ec-accent-subtle));
 }
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-badge-color-gray-background\)\)\] {
+  background-color: rgb(var(--ec-badge-color-gray-background));
+}
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-badge-color-gray-text\)\)\] {
+  background-color: rgb(var(--ec-badge-color-gray-text));
+}
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-badge-color-green-background\)\)\] {
+  background-color: rgb(var(--ec-badge-color-green-background));
+}
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-badge-color-green-text\)\)\] {
+  background-color: rgb(var(--ec-badge-color-green-text));
+}
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-badge-color-red-background\)\)\] {
+  background-color: rgb(var(--ec-badge-color-red-background));
+}
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-badge-color-red-text\)\)\] {
+  background-color: rgb(var(--ec-badge-color-red-text));
+}
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-badge-color-yellow-background\)\)\] {
+  background-color: rgb(var(--ec-badge-color-yellow-background));
+}
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-badge-color-yellow-text\)\)\] {
+  background-color: rgb(var(--ec-badge-color-yellow-text));
+}
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-button-bg\)\)\] {
+  background-color: rgb(var(--ec-button-bg));
+}
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-card-bg\)\)\] {
   background-color: rgb(var(--ec-card-bg));
 }
@@ -1311,6 +1587,9 @@
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-code-bg\)\)\] {
   background-color: rgb(var(--ec-code-bg));
 }
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-content-hover\)\)\] {
+  background-color: rgb(var(--ec-content-hover));
+}
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-content-hover\)\/0\.18\)\] {
   background-color: rgb(var(--ec-content-hover)/0.18);
 }
@@ -1335,6 +1614,9 @@
 .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-\[var\(--ec-actor-node-bg\,rgb\(var\(--ec-card-bg\)\)\)\] {
   background-color: var(--ec-actor-node-bg,rgb(var(--ec-card-bg)));
 }
@@ -1359,6 +1641,12 @@
     background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
   }
 }
+.eventcatalog-visualizer .bg-black\/40 {
+  background-color: color-mix(in srgb, #000 40%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+  }
+}
 .eventcatalog-visualizer .bg-blue-200 {
   background-color: var(--color-blue-200);
 }
@@ -1392,6 +1680,12 @@
 .eventcatalog-visualizer .bg-emerald-500 {
   background-color: var(--color-emerald-500);
 }
+.eventcatalog-visualizer .bg-emerald-500\/10 {
+  background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
+  }
+}
 .eventcatalog-visualizer .bg-gray-200 {
   background-color: var(--color-gray-200);
 }
@@ -1554,6 +1848,12 @@
 .eventcatalog-visualizer .bg-white {
   background-color: var(--color-white);
 }
+.eventcatalog-visualizer .bg-white\/20 {
+  background-color: color-mix(in srgb, #fff 20%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+  }
+}
 .eventcatalog-visualizer .bg-yellow-500 {
   background-color: var(--color-yellow-500);
 }
@@ -1879,6 +2179,9 @@
 .eventcatalog-visualizer .p-0 {
   padding: calc(var(--spacing) * 0);
 }
+.eventcatalog-visualizer .p-0\.5 {
+  padding: calc(var(--spacing) * 0.5);
+}
 .eventcatalog-visualizer .p-1 {
   padding: calc(var(--spacing) * 1);
 }
@@ -1924,6 +2227,9 @@
 .eventcatalog-visualizer .px-4 {
   padding-inline: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .px-5 {
+  padding-inline: calc(var(--spacing) * 5);
+}
 .eventcatalog-visualizer .py-0 {
   padding-block: calc(var(--spacing) * 0);
 }
@@ -1948,6 +2254,9 @@
 .eventcatalog-visualizer .py-4 {
   padding-block: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .py-6 {
+  padding-block: calc(var(--spacing) * 6);
+}
 .eventcatalog-visualizer .py-\[1px\] {
   padding-block: 1px;
 }
@@ -1966,12 +2275,21 @@
 .eventcatalog-visualizer .pt-2 {
   padding-top: calc(var(--spacing) * 2);
 }
+.eventcatalog-visualizer .pt-3 {
+  padding-top: calc(var(--spacing) * 3);
+}
 .eventcatalog-visualizer .pt-3\.5 {
   padding-top: calc(var(--spacing) * 3.5);
 }
 .eventcatalog-visualizer .pt-5 {
   padding-top: calc(var(--spacing) * 5);
 }
+.eventcatalog-visualizer .pt-40 {
+  padding-top: calc(var(--spacing) * 40);
+}
+.eventcatalog-visualizer .pr-2 {
+  padding-right: calc(var(--spacing) * 2);
+}
 .eventcatalog-visualizer .pr-2\.5 {
   padding-right: calc(var(--spacing) * 2.5);
 }
@@ -1999,15 +2317,27 @@
 .eventcatalog-visualizer .pb-3 {
   padding-bottom: calc(var(--spacing) * 3);
 }
+.eventcatalog-visualizer .pb-16 {
+  padding-bottom: calc(var(--spacing) * 16);
+}
+.eventcatalog-visualizer .pl-1 {
+  padding-left: calc(var(--spacing) * 1);
+}
 .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;
 }
@@ -2017,9 +2347,15 @@
 .eventcatalog-visualizer .text-right {
   text-align: right;
 }
+.eventcatalog-visualizer .font-\[Excalifont\,Inter\,sans-serif\] {
+  font-family: Excalifont,Inter,sans-serif;
+}
 .eventcatalog-visualizer .font-mono {
   font-family: var(--font-mono);
 }
+.eventcatalog-visualizer .font-sans {
+  font-family: var(--font-sans);
+}
 .eventcatalog-visualizer .text-base {
   font-size: var(--text-base);
   line-height: var(--tw-leading, var(--text-base--line-height));
@@ -2060,10 +2396,23 @@
 .eventcatalog-visualizer .text-\[14px\] {
   font-size: 14px;
 }
+.eventcatalog-visualizer .text-\[15px\] {
+  font-size: 15px;
+}
+.eventcatalog-visualizer .text-\[22px\] {
+  font-size: 22px;
+}
+.eventcatalog-visualizer .text-\[34px\] {
+  font-size: 34px;
+}
 .eventcatalog-visualizer .leading-3 {
   --tw-leading: calc(var(--spacing) * 3);
   line-height: calc(var(--spacing) * 3);
 }
+.eventcatalog-visualizer .leading-4 {
+  --tw-leading: calc(var(--spacing) * 4);
+  line-height: calc(var(--spacing) * 4);
+}
 .eventcatalog-visualizer .leading-none {
   --tw-leading: 1;
   line-height: 1;
@@ -2104,6 +2453,10 @@
   --tw-font-weight: var(--font-weight-semibold);
   font-weight: var(--font-weight-semibold);
 }
+.eventcatalog-visualizer .tracking-tight {
+  --tw-tracking: var(--tracking-tight);
+  letter-spacing: var(--tracking-tight);
+}
 .eventcatalog-visualizer .tracking-wide {
   --tw-tracking: var(--tracking-wide);
   letter-spacing: var(--tracking-wide);
@@ -2128,9 +2481,36 @@
 .eventcatalog-visualizer .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
+.eventcatalog-visualizer .text-\[color-mix\(in_srgb\,rgb\(var\(--ec-page-text\)\)_22\%\,transparent\)\] {
+  color: rgb(var(--ec-page-text));
+  @supports (color: color-mix(in lab, red, red)) {
+    color: color-mix(in srgb,rgb(var(--ec-page-text)) 22%,transparent);
+  }
+}
+.eventcatalog-visualizer .text-\[color-mix\(in_srgb\,rgb\(var\(--ec-page-text\)\)_38\%\,transparent\)\] {
+  color: rgb(var(--ec-page-text));
+  @supports (color: color-mix(in lab, red, red)) {
+    color: color-mix(in srgb,rgb(var(--ec-page-text)) 38%,transparent);
+  }
+}
 .eventcatalog-visualizer .text-\[rgb\(var\(--ec-accent\)\)\] {
   color: rgb(var(--ec-accent));
 }
+.eventcatalog-visualizer .text-\[rgb\(var\(--ec-badge-color-gray-text\)\)\] {
+  color: rgb(var(--ec-badge-color-gray-text));
+}
+.eventcatalog-visualizer .text-\[rgb\(var\(--ec-badge-color-green-text\)\)\] {
+  color: rgb(var(--ec-badge-color-green-text));
+}
+.eventcatalog-visualizer .text-\[rgb\(var\(--ec-badge-color-red-text\)\)\] {
+  color: rgb(var(--ec-badge-color-red-text));
+}
+.eventcatalog-visualizer .text-\[rgb\(var\(--ec-badge-color-yellow-text\)\)\] {
+  color: rgb(var(--ec-badge-color-yellow-text));
+}
+.eventcatalog-visualizer .text-\[rgb\(var\(--ec-button-text\)\)\] {
+  color: rgb(var(--ec-button-text));
+}
 .eventcatalog-visualizer .text-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\)\] {
   color: rgb(var(--ec-catalog-accent,79 70 229));
 }
@@ -2149,6 +2529,9 @@
 .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);
 }
@@ -2212,6 +2595,9 @@
 .eventcatalog-visualizer .text-emerald-100 {
   color: var(--color-emerald-100);
 }
+.eventcatalog-visualizer .text-emerald-600 {
+  color: var(--color-emerald-600);
+}
 .eventcatalog-visualizer .text-gray-100 {
   color: var(--color-gray-100);
 }
@@ -2624,9 +3010,18 @@
 .eventcatalog-visualizer .opacity-40 {
   opacity: 40%;
 }
+.eventcatalog-visualizer .opacity-50 {
+  opacity: 50%;
+}
+.eventcatalog-visualizer .opacity-60 {
+  opacity: 60%;
+}
 .eventcatalog-visualizer .opacity-70 {
   opacity: 70%;
 }
+.eventcatalog-visualizer .opacity-80 {
+  opacity: 80%;
+}
 .eventcatalog-visualizer .opacity-90 {
   opacity: 90%;
 }
@@ -2637,6 +3032,18 @@
   --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
+.eventcatalog-visualizer .shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.eventcatalog-visualizer .shadow-\[0_1px_2px_rgb\(0_0_0\/0\.05\)\] {
+  --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgb(0 0 0/0.05));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.eventcatalog-visualizer .shadow-\[0_8px_24px_rgb\(0_0_0\/0\.08\)\,0_1px_3px_rgb\(0_0_0\/0\.05\)\] {
+  --tw-shadow: 0 8px 24px var(--tw-shadow-color, rgb(0 0 0/0.08)), 0 1px 3px var(--tw-shadow-color, rgb(0 0 0/0.05));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
 .eventcatalog-visualizer .shadow-lg {
   --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2671,9 +3078,15 @@
     --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yellow-300) 50%, transparent) var(--tw-shadow-alpha), transparent);
   }
 }
+.eventcatalog-visualizer .ring-\[rgb\(var\(--ec-accent\)\)\] {
+  --tw-ring-color: rgb(var(--ec-accent));
+}
 .eventcatalog-visualizer .ring-\[rgb\(var\(--ec-accent\)\/0\.3\)\] {
   --tw-ring-color: rgb(var(--ec-accent)/0.3);
 }
+.eventcatalog-visualizer .ring-\[rgb\(var\(--ec-card-bg\)\)\] {
+  --tw-ring-color: rgb(var(--ec-card-bg));
+}
 .eventcatalog-visualizer .ring-amber-400\/60 {
   --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 60%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -2819,6 +3232,10 @@
 .eventcatalog-visualizer .outline-\[rgb\(var\(--ec-accent\)\)\] {
   outline-color: rgb(var(--ec-accent));
 }
+.eventcatalog-visualizer .grayscale {
+  --tw-grayscale: grayscale(100%);
+  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+}
 .eventcatalog-visualizer .invert {
   --tw-invert: invert(100%);
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -2836,6 +3253,16 @@
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
   transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
+.eventcatalog-visualizer .transition-\[box-shadow\,transform\] {
+  transition-property: box-shadow,transform;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+.eventcatalog-visualizer .transition-\[transform\,box-shadow\,border-color\] {
+  transition-property: transform,box-shadow,border-color;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
 .eventcatalog-visualizer .transition-\[width\] {
   transition-property: width;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2885,6 +3312,10 @@
   --tw-outline-style: none;
   outline-style: none;
 }
+.eventcatalog-visualizer .select-none {
+  -webkit-user-select: none;
+  user-select: none;
+}
 .eventcatalog-visualizer .group-focus-within\:block {
   .eventcatalog-visualizer &:is(:where(.group):focus-within *) {
     display: block;
@@ -2904,6 +3335,13 @@
     }
   }
 }
+.eventcatalog-visualizer .group-hover\:opacity-80 {
+  .eventcatalog-visualizer &:is(:where(.group):hover *) {
+    @media (hover: hover) {
+      opacity: 80%;
+    }
+  }
+}
 .eventcatalog-visualizer .group-hover\:opacity-100 {
   .eventcatalog-visualizer &:is(:where(.group):hover *) {
     @media (hover: hover) {
@@ -2926,6 +3364,14 @@
     text-decoration-line: none;
   }
 }
+.eventcatalog-visualizer .hover\:-translate-y-px {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      --tw-translate-y: -1px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+}
 .eventcatalog-visualizer .hover\:scale-105 {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -2936,6 +3382,30 @@
     }
   }
 }
+.eventcatalog-visualizer .hover\:border-\[color-mix\(in_srgb\,rgb\(var\(--ec-accent\)\)_45\%\,transparent\)\]\! {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      border-color: rgb(var(--ec-accent)) !important;
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in srgb,rgb(var(--ec-accent)) 45%,transparent) !important;
+      }
+    }
+  }
+}
+.eventcatalog-visualizer .hover\:border-\[rgb\(var\(--ec-accent\)\)\] {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      border-color: rgb(var(--ec-accent));
+    }
+  }
+}
+.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) {
@@ -2943,6 +3413,16 @@
     }
   }
 }
+.eventcatalog-visualizer .hover\:bg-\[color-mix\(in_srgb\,rgb\(var\(--ec-accent\)\)_8\%\,transparent\)\] {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      background-color: rgb(var(--ec-accent));
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in srgb,rgb(var(--ec-accent)) 8%,transparent);
+      }
+    }
+  }
+}
 .eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-accent-hover\)\)\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -2964,6 +3444,20 @@
     }
   }
 }
+.eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-badge-color-red-background\)\)\] {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      background-color: rgb(var(--ec-badge-color-red-background));
+    }
+  }
+}
+.eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-badge-color-red-text\)\/0\.85\)\] {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      background-color: rgb(var(--ec-badge-color-red-text)/0.85);
+    }
+  }
+}
 .eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\/0\.06\)\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -2985,6 +3479,13 @@
     }
   }
 }
+.eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-content-hover\)\)\]\! {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      background-color: rgb(var(--ec-content-hover)) !important;
+    }
+  }
+}
 .eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-page-border\)\)\/0\.5\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -3037,6 +3538,13 @@
     }
   }
 }
+.eventcatalog-visualizer .hover\:text-\[rgb\(var\(--ec-icon-hover\)\)\] {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      color: rgb(var(--ec-icon-hover));
+    }
+  }
+}
 .eventcatalog-visualizer .hover\:text-\[rgb\(var\(--ec-page-text\)\)\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -3044,6 +3552,13 @@
     }
   }
 }
+.eventcatalog-visualizer .hover\:text-\[rgb\(var\(--ec-page-text\)\)\]\! {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      color: rgb(var(--ec-page-text)) !important;
+    }
+  }
+}
 .eventcatalog-visualizer .hover\:text-gray-900 {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -3072,6 +3587,14 @@
     }
   }
 }
+.eventcatalog-visualizer .hover\:shadow-\[0_4px_12px_rgb\(0_0_0\/0\.08\)\] {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgb(0 0 0/0.08));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+}
 .eventcatalog-visualizer .hover\:shadow-lg {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -3080,6 +3603,11 @@
     }
   }
 }
+.eventcatalog-visualizer .focus\:border-\[rgb\(var\(--ec-accent\)\)\] {
+  .eventcatalog-visualizer &:focus {
+    border-color: rgb(var(--ec-accent));
+  }
+}
 .eventcatalog-visualizer .focus\:border-transparent {
   .eventcatalog-visualizer &:focus {
     border-color: transparent;
@@ -3108,6 +3636,16 @@
     outline-style: none;
   }
 }
+.eventcatalog-visualizer .focus-visible\:border-\[rgb\(var\(--ec-accent\)\)\] {
+  .eventcatalog-visualizer &:focus-visible {
+    border-color: rgb(var(--ec-accent));
+  }
+}
+.eventcatalog-visualizer .focus-visible\:text-\[rgb\(var\(--ec-accent\)\)\] {
+  .eventcatalog-visualizer &:focus-visible {
+    color: rgb(var(--ec-accent));
+  }
+}
 .eventcatalog-visualizer .focus-visible\:ring-2 {
   .eventcatalog-visualizer &:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -3124,6 +3662,12 @@
     --tw-ring-color: rgb(var(--ec-catalog-accent,79 70 229));
   }
 }
+.eventcatalog-visualizer .active\:translate-y-0 {
+  .eventcatalog-visualizer &:active {
+    --tw-translate-y: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+}
 .eventcatalog-visualizer .active\:cursor-grabbing {
   .eventcatalog-visualizer &:active {
     cursor: grabbing;
@@ -3134,6 +3678,11 @@
     cursor: not-allowed;
   }
 }
+.eventcatalog-visualizer .disabled\:opacity-40 {
+  .eventcatalog-visualizer &:disabled {
+    opacity: 40%;
+  }
+}
 .eventcatalog-visualizer .disabled\:opacity-50 {
   .eventcatalog-visualizer &:disabled {
     opacity: 50%;
@@ -3180,11 +3729,21 @@
     font-weight: var(--font-weight-semibold);
   }
 }
+.eventcatalog-visualizer .md\:block\! {
+  @media (width >= 48rem) {
+    display: block !important;
+  }
+}
 .eventcatalog-visualizer .md\:flex {
   @media (width >= 48rem) {
     display: flex;
   }
 }
+.eventcatalog-visualizer .md\:grid-cols-2\! {
+  @media (width >= 48rem) {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+}
 .eventcatalog-visualizer .lg\:flex {
   @media (width >= 64rem) {
     display: flex;
@@ -3245,16 +3804,31 @@
     color: var(--color-yellow-400);
   }
 }
+.eventcatalog-visualizer .\[\&_svg\]\:h-\[18px\] {
+  .eventcatalog-visualizer & svg {
+    height: 18px;
+  }
+}
 .eventcatalog-visualizer .\[\&_svg\]\:h-full {
   .eventcatalog-visualizer & svg {
     height: 100%;
   }
 }
+.eventcatalog-visualizer .\[\&_svg\]\:w-\[18px\] {
+  .eventcatalog-visualizer & svg {
+    width: 18px;
+  }
+}
 .eventcatalog-visualizer .\[\&_svg\]\:w-full {
   .eventcatalog-visualizer & svg {
     width: 100%;
   }
 }
+.eventcatalog-visualizer .\[\&_svg\]\:stroke-\[1\.75\] {
+  .eventcatalog-visualizer & svg {
+    stroke-width: 1.75;
+  }
+}
 .eventcatalog-visualizer .\[\&\>svg\]\:h-2 {
   .eventcatalog-visualizer &>svg {
     height: calc(var(--spacing) * 2);
@@ -3904,9 +4478,12 @@
   inset: -2px;
   border-radius: 50%;
   box-shadow: 0 0 0 2px rgba(var(--ec-glow), 0.5);
-  animation: ec-handle-glow 2s ease-in-out infinite;
   pointer-events: none;
 }
+.eventcatalog-visualizer .react-flow__node:hover .ec-handle-glow::after,
+.eventcatalog-visualizer .react-flow__node.selected .ec-handle-glow::after {
+  animation: ec-handle-glow 2s ease-in-out infinite;
+}
 @keyframes ec-handle-glow {
   0%,
   100% {
@@ -4161,6 +4738,13 @@
 .eventcatalog-visualizer .ec-interaction-active .ec-animated-msg {
   visibility: hidden;
 }
+.eventcatalog-visualizer .react-flow__edge.animated .ec-animated-msg path {
+  animation: none;
+  stroke-dasharray: none;
+}
+.eventcatalog-visualizer .ec-interaction-active .react-flow__edge.animated path {
+  animation-play-state: paused;
+}
 .eventcatalog-visualizer .react-flow__minimap {
   background-color: rgb(var(--ec-card-bg));
   border: 1px solid rgb(var(--ec-page-border));
@@ -4215,6 +4799,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-space-x-reverse {
   syntax: "*";
   inherits: false;
@@ -4494,6 +5083,7 @@
     --tw-rotate-z: initial;
     --tw-skew-x: initial;
     --tw-skew-y: initial;
+    --tw-space-y-reverse: 0;
     --tw-space-x-reverse: 0;
     --tw-divide-y-reverse: 0;
     --tw-border-style: solid;