@eventcatalog/visualiser 4.1.4 → 5.0.0-beta.0

package/dist/styles.css

@@ -30,7 +30,6 @@
   --color-yellow-700: oklch(55.4% 0.135 66.442);
   --color-yellow-900: oklch(42.1% 0.095 57.708);
   --color-yellow-950: oklch(28.6% 0.066 53.813);
-  --color-green-50: oklch(98.2% 0.018 155.826);
   --color-green-100: oklch(96.2% 0.044 156.743);
   --color-green-200: oklch(92.5% 0.084 155.995);
   --color-green-300: oklch(87.1% 0.15 154.449);
@@ -114,7 +113,6 @@
   --color-slate-600: oklch(44.6% 0.043 257.281);
   --color-slate-700: oklch(37.2% 0.044 257.287);
   --color-slate-950: oklch(12.9% 0.042 264.695);
-  --color-gray-50: oklch(98.5% 0.002 247.839);
   --color-gray-100: oklch(96.7% 0.003 264.542);
   --color-gray-200: oklch(92.8% 0.006 264.531);
   --color-gray-300: oklch(87.2% 0.01 258.338);
@@ -145,6 +143,7 @@
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
   --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
   --tracking-widest: 0.1em;
   --leading-tight: 1.25;
   --leading-snug: 1.375;
@@ -306,9 +305,6 @@
 .eventcatalog-visualizer .z-\[60\] {
   z-index: 60;
 }
-.eventcatalog-visualizer .z-\[100\] {
-  z-index: 100;
-}
 .eventcatalog-visualizer .z-\[9999\] {
   z-index: 9999;
 }
@@ -339,6 +335,9 @@
 .eventcatalog-visualizer .m-1 {
   margin: calc(var(--spacing) * 1);
 }
+.eventcatalog-visualizer .mx-1 {
+  margin-inline: calc(var(--spacing) * 1);
+}
 .eventcatalog-visualizer .mx-auto {
   margin-inline: auto;
 }
@@ -348,6 +347,9 @@
 .eventcatalog-visualizer .my-1 {
   margin-block: calc(var(--spacing) * 1);
 }
+.eventcatalog-visualizer .my-1\.5 {
+  margin-block: calc(var(--spacing) * 1.5);
+}
 .eventcatalog-visualizer .my-6 {
   margin-block: calc(var(--spacing) * 6);
 }
@@ -372,39 +374,27 @@
 .eventcatalog-visualizer .mt-4 {
   margin-top: calc(var(--spacing) * 4);
 }
-.eventcatalog-visualizer .mt-6 {
-  margin-top: calc(var(--spacing) * 6);
-}
 .eventcatalog-visualizer .mt-14 {
   margin-top: calc(var(--spacing) * 14);
 }
+.eventcatalog-visualizer .-mr-1 {
+  margin-right: calc(var(--spacing) * -1);
+}
 .eventcatalog-visualizer .mr-1 {
   margin-right: calc(var(--spacing) * 1);
 }
-.eventcatalog-visualizer .mb-0 {
-  margin-bottom: calc(var(--spacing) * 0);
-}
 .eventcatalog-visualizer .mb-1 {
   margin-bottom: calc(var(--spacing) * 1);
 }
 .eventcatalog-visualizer .mb-2 {
   margin-bottom: calc(var(--spacing) * 2);
 }
-.eventcatalog-visualizer .mb-3 {
-  margin-bottom: calc(var(--spacing) * 3);
-}
 .eventcatalog-visualizer .mb-4 {
   margin-bottom: calc(var(--spacing) * 4);
 }
-.eventcatalog-visualizer .mb-6 {
-  margin-bottom: calc(var(--spacing) * 6);
-}
 .eventcatalog-visualizer .mb-12 {
   margin-bottom: calc(var(--spacing) * 12);
 }
-.eventcatalog-visualizer .ml-1 {
-  margin-left: calc(var(--spacing) * 1);
-}
 .eventcatalog-visualizer .ml-2 {
   margin-left: calc(var(--spacing) * 2);
 }
@@ -417,6 +407,12 @@
 .eventcatalog-visualizer .ml-12 {
   margin-left: calc(var(--spacing) * 12);
 }
+.eventcatalog-visualizer .line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 .eventcatalog-visualizer .block {
   display: block;
 }
@@ -501,6 +497,12 @@
 .eventcatalog-visualizer .h-px {
   height: 1px;
 }
+.eventcatalog-visualizer .max-h-32 {
+  max-height: calc(var(--spacing) * 32);
+}
+.eventcatalog-visualizer .max-h-40 {
+  max-height: calc(var(--spacing) * 40);
+}
 .eventcatalog-visualizer .max-h-60 {
   max-height: calc(var(--spacing) * 60);
 }
@@ -567,6 +569,9 @@
 .eventcatalog-visualizer .w-12 {
   width: calc(var(--spacing) * 12);
 }
+.eventcatalog-visualizer .w-16 {
+  width: calc(var(--spacing) * 16);
+}
 .eventcatalog-visualizer .w-20 {
   width: calc(var(--spacing) * 20);
 }
@@ -576,20 +581,23 @@
 .eventcatalog-visualizer .w-44 {
   width: calc(var(--spacing) * 44);
 }
+.eventcatalog-visualizer .w-60 {
+  width: calc(var(--spacing) * 60);
+}
+.eventcatalog-visualizer .w-80 {
+  width: calc(var(--spacing) * 80);
+}
 .eventcatalog-visualizer .w-96 {
   width: calc(var(--spacing) * 96);
 }
 .eventcatalog-visualizer .w-\[26px\] {
   width: 26px;
 }
-.eventcatalog-visualizer .w-\[90vw\] {
-  width: 90vw;
-}
 .eventcatalog-visualizer .w-\[200px\] {
   width: 200px;
 }
-.eventcatalog-visualizer .w-\[350px\] {
-  width: 350px;
+.eventcatalog-visualizer .w-\[360px\] {
+  width: 360px;
 }
 .eventcatalog-visualizer .w-full {
   width: 100%;
@@ -597,6 +605,9 @@
 .eventcatalog-visualizer .w-max {
   width: max-content;
 }
+.eventcatalog-visualizer .w-px {
+  width: 1px;
+}
 .eventcatalog-visualizer .max-w-40 {
   max-width: calc(var(--spacing) * 40);
 }
@@ -615,6 +626,12 @@
 .eventcatalog-visualizer .max-w-\[120px\] {
   max-width: 120px;
 }
+.eventcatalog-visualizer .max-w-\[210px\] {
+  max-width: 210px;
+}
+.eventcatalog-visualizer .max-w-\[240px\] {
+  max-width: 240px;
+}
 .eventcatalog-visualizer .max-w-\[280px\] {
   max-width: 280px;
 }
@@ -663,9 +680,15 @@
 .eventcatalog-visualizer .flex-shrink-0 {
   flex-shrink: 0;
 }
+.eventcatalog-visualizer .shrink {
+  flex-shrink: 1;
+}
 .eventcatalog-visualizer .shrink-0 {
   flex-shrink: 0;
 }
+.eventcatalog-visualizer .grow {
+  flex-grow: 1;
+}
 .eventcatalog-visualizer .-translate-x-1\/2 {
   --tw-translate-x: calc(calc(1/2 * 100%) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -698,6 +721,9 @@
 .eventcatalog-visualizer .cursor-grab {
   cursor: grab;
 }
+.eventcatalog-visualizer .cursor-not-allowed {
+  cursor: not-allowed;
+}
 .eventcatalog-visualizer .cursor-pointer {
   cursor: pointer;
 }
@@ -731,6 +757,9 @@
 .eventcatalog-visualizer .items-start {
   align-items: flex-start;
 }
+.eventcatalog-visualizer .items-stretch {
+  align-items: stretch;
+}
 .eventcatalog-visualizer .justify-between {
   justify-content: space-between;
 }
@@ -755,19 +784,15 @@
 .eventcatalog-visualizer .gap-2 {
   gap: calc(var(--spacing) * 2);
 }
+.eventcatalog-visualizer .gap-2\.5 {
+  gap: calc(var(--spacing) * 2.5);
+}
 .eventcatalog-visualizer .gap-3 {
   gap: calc(var(--spacing) * 3);
 }
 .eventcatalog-visualizer .gap-4 {
   gap: calc(var(--spacing) * 4);
 }
-.eventcatalog-visualizer .space-y-4 {
-  .eventcatalog-visualizer :where(& > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
-    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
-  }
-}
 .eventcatalog-visualizer .gap-x-2 {
   column-gap: calc(var(--spacing) * 2);
 }
@@ -867,10 +892,18 @@
   border-top-left-radius: var(--radius-lg);
   border-top-right-radius: var(--radius-lg);
 }
+.eventcatalog-visualizer .rounded-l-md {
+  border-top-left-radius: var(--radius-md);
+  border-bottom-left-radius: var(--radius-md);
+}
 .eventcatalog-visualizer .rounded-l-sm {
   border-top-left-radius: var(--radius-sm);
   border-bottom-left-radius: var(--radius-sm);
 }
+.eventcatalog-visualizer .rounded-r-md {
+  border-top-right-radius: var(--radius-md);
+  border-bottom-right-radius: var(--radius-md);
+}
 .eventcatalog-visualizer .rounded-br-lg {
   border-bottom-right-radius: var(--radius-lg);
 }
@@ -914,6 +947,10 @@
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 16px;
 }
+.eventcatalog-visualizer .border-l {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 1px;
+}
 .eventcatalog-visualizer .border-l-\[16px\] {
   border-left-style: var(--tw-border-style);
   border-left-width: 16px;
@@ -935,8 +972,8 @@
 .eventcatalog-visualizer .\!border-gray-500 {
   border-color: var(--color-gray-500) !important;
 }
-.eventcatalog-visualizer .border-\[rgb\(var\(--ec-accent\)\/0\.3\)\] {
-  border-color: rgb(var(--ec-accent)/0.3);
+.eventcatalog-visualizer .border-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\)\] {
+  border-color: rgb(var(--ec-catalog-accent,79 70 229));
 }
 .eventcatalog-visualizer .border-\[rgb\(var\(--ec-input-border\)\)\] {
   border-color: rgb(var(--ec-input-border));
@@ -944,6 +981,9 @@
 .eventcatalog-visualizer .border-\[rgb\(var\(--ec-page-border\)\)\] {
   border-color: rgb(var(--ec-page-border));
 }
+.eventcatalog-visualizer .border-\[rgb\(var\(--ec-page-border\)\/0\.6\)\] {
+  border-color: rgb(var(--ec-page-border)/0.6);
+}
 .eventcatalog-visualizer .border-amber-400 {
   border-color: var(--color-amber-400);
 }
@@ -1004,9 +1044,6 @@
 .eventcatalog-visualizer .border-gray-200 {
   border-color: var(--color-gray-200);
 }
-.eventcatalog-visualizer .border-gray-300 {
-  border-color: var(--color-gray-300);
-}
 .eventcatalog-visualizer .border-gray-400 {
   border-color: var(--color-gray-400);
 }
@@ -1025,9 +1062,6 @@
     border-color: color-mix(in oklab, var(--color-gray-500) 25%, transparent);
   }
 }
-.eventcatalog-visualizer .border-green-200 {
-  border-color: var(--color-green-200);
-}
 .eventcatalog-visualizer .border-green-400 {
   border-color: var(--color-green-400);
 }
@@ -1286,6 +1320,12 @@
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-card-bg\,var\(--ec-page-bg\)\)\)\] {
   background-color: rgb(var(--ec-card-bg,var(--ec-page-bg)));
 }
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\/0\.08\)\] {
+  background-color: rgb(var(--ec-catalog-accent,79 70 229)/0.08);
+}
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\/0\.15\)\] {
+  background-color: rgb(var(--ec-catalog-accent,79 70 229)/0.15);
+}
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-code-bg\)\)\] {
   background-color: rgb(var(--ec-code-bg));
 }
@@ -1307,6 +1347,9 @@
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-page-border\)\)\] {
   background-color: rgb(var(--ec-page-border));
 }
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-page-border\)\/0\.5\)\] {
+  background-color: rgb(var(--ec-page-border)/0.5);
+}
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-page-text\)\)\] {
   background-color: rgb(var(--ec-page-text));
 }
@@ -1334,12 +1377,6 @@
     background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
   }
 }
-.eventcatalog-visualizer .bg-black\/50 {
-  background-color: color-mix(in srgb, #000 50%, transparent);
-  @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
-  }
-}
 .eventcatalog-visualizer .bg-blue-200 {
   background-color: var(--color-blue-200);
 }
@@ -1373,9 +1410,6 @@
 .eventcatalog-visualizer .bg-emerald-500 {
   background-color: var(--color-emerald-500);
 }
-.eventcatalog-visualizer .bg-gray-50 {
-  background-color: var(--color-gray-50);
-}
 .eventcatalog-visualizer .bg-gray-200 {
   background-color: var(--color-gray-200);
 }
@@ -1406,9 +1440,6 @@
     background-color: color-mix(in oklab, var(--color-gray-900) 10%, transparent);
   }
 }
-.eventcatalog-visualizer .bg-green-50 {
-  background-color: var(--color-green-50);
-}
 .eventcatalog-visualizer .bg-green-200 {
   background-color: var(--color-green-200);
 }
@@ -1848,6 +1879,9 @@
 .eventcatalog-visualizer .fill-\[rgb\(var\(--ec-page-bg\)\)\] {
   fill: rgb(var(--ec-page-bg));
 }
+.eventcatalog-visualizer .fill-current {
+  fill: currentcolor;
+}
 .eventcatalog-visualizer .stroke-\[rgb\(var\(--ec-page-border\)\)\] {
   stroke: rgb(var(--ec-page-border));
 }
@@ -1866,6 +1900,9 @@
 .eventcatalog-visualizer .p-1 {
   padding: calc(var(--spacing) * 1);
 }
+.eventcatalog-visualizer .p-1\.5 {
+  padding: calc(var(--spacing) * 1.5);
+}
 .eventcatalog-visualizer .p-2 {
   padding: calc(var(--spacing) * 2);
 }
@@ -1881,6 +1918,9 @@
 .eventcatalog-visualizer .p-6 {
   padding: calc(var(--spacing) * 6);
 }
+.eventcatalog-visualizer .px-0\.5 {
+  padding-inline: calc(var(--spacing) * 0.5);
+}
 .eventcatalog-visualizer .px-1 {
   padding-inline: calc(var(--spacing) * 1);
 }
@@ -1902,9 +1942,6 @@
 .eventcatalog-visualizer .px-4 {
   padding-inline: calc(var(--spacing) * 4);
 }
-.eventcatalog-visualizer .px-6 {
-  padding-inline: calc(var(--spacing) * 6);
-}
 .eventcatalog-visualizer .py-0 {
   padding-block: calc(var(--spacing) * 0);
 }
@@ -1932,18 +1969,30 @@
 .eventcatalog-visualizer .py-\[1px\] {
   padding-block: 1px;
 }
+.eventcatalog-visualizer .py-px {
+  padding-block: 1px;
+}
 .eventcatalog-visualizer .pt-0\.5 {
   padding-top: calc(var(--spacing) * 0.5);
 }
+.eventcatalog-visualizer .pt-1 {
+  padding-top: calc(var(--spacing) * 1);
+}
 .eventcatalog-visualizer .pt-1\.5 {
   padding-top: calc(var(--spacing) * 1.5);
 }
+.eventcatalog-visualizer .pt-2 {
+  padding-top: calc(var(--spacing) * 2);
+}
 .eventcatalog-visualizer .pt-3\.5 {
   padding-top: calc(var(--spacing) * 3.5);
 }
 .eventcatalog-visualizer .pt-5 {
   padding-top: calc(var(--spacing) * 5);
 }
+.eventcatalog-visualizer .pr-2\.5 {
+  padding-right: calc(var(--spacing) * 2.5);
+}
 .eventcatalog-visualizer .pr-4 {
   padding-right: calc(var(--spacing) * 4);
 }
@@ -1959,12 +2008,24 @@
 .eventcatalog-visualizer .pb-1 {
   padding-bottom: calc(var(--spacing) * 1);
 }
+.eventcatalog-visualizer .pb-1\.5 {
+  padding-bottom: calc(var(--spacing) * 1.5);
+}
+.eventcatalog-visualizer .pb-2 {
+  padding-bottom: calc(var(--spacing) * 2);
+}
 .eventcatalog-visualizer .pb-2\.5 {
   padding-bottom: calc(var(--spacing) * 2.5);
 }
 .eventcatalog-visualizer .pb-3 {
   padding-bottom: calc(var(--spacing) * 3);
 }
+.eventcatalog-visualizer .pl-2 {
+  padding-left: calc(var(--spacing) * 2);
+}
+.eventcatalog-visualizer .pl-3 {
+  padding-left: calc(var(--spacing) * 3);
+}
 .eventcatalog-visualizer .pl-7 {
   padding-left: calc(var(--spacing) * 7);
 }
@@ -2068,6 +2129,10 @@
   --tw-tracking: var(--tracking-wide);
   letter-spacing: var(--tracking-wide);
 }
+.eventcatalog-visualizer .tracking-wider {
+  --tw-tracking: var(--tracking-wider);
+  letter-spacing: var(--tracking-wider);
+}
 .eventcatalog-visualizer .tracking-widest {
   --tw-tracking: var(--tracking-widest);
   letter-spacing: var(--tracking-widest);
@@ -2087,6 +2152,9 @@
 .eventcatalog-visualizer .text-\[rgb\(var\(--ec-accent\)\)\] {
   color: rgb(var(--ec-accent));
 }
+.eventcatalog-visualizer .text-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\)\] {
+  color: rgb(var(--ec-catalog-accent,79 70 229));
+}
 .eventcatalog-visualizer .text-\[rgb\(var\(--ec-icon-color\)\)\] {
   color: rgb(var(--ec-icon-color));
 }
@@ -2525,6 +2593,10 @@
 .eventcatalog-visualizer .italic {
   font-style: italic;
 }
+.eventcatalog-visualizer .tabular-nums {
+  --tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+}
 .eventcatalog-visualizer .line-through {
   text-decoration-line: line-through;
 }
@@ -2573,6 +2645,9 @@
 .eventcatalog-visualizer .opacity-40 {
   opacity: 40%;
 }
+.eventcatalog-visualizer .opacity-70 {
+  opacity: 70%;
+}
 .eventcatalog-visualizer .opacity-90 {
   opacity: 90%;
 }
@@ -2607,12 +2682,19 @@
   --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
   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 .ring-4 {
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  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-yellow-300\/50 {
   --tw-shadow-color: color-mix(in srgb, oklch(90.5% 0.182 98.111) 50%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
     --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\)\/0\.3\)\] {
+  --tw-ring-color: rgb(var(--ec-accent)/0.3);
+}
 .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)) {
@@ -2775,6 +2857,11 @@
   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));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
 .eventcatalog-visualizer .transition-all {
   transition-property: all;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2790,6 +2877,11 @@
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
   transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
+.eventcatalog-visualizer .transition-transform {
+  transition-property: transform, translate, scale, rotate;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
 .eventcatalog-visualizer .duration-150 {
   --tw-duration: 150ms;
   transition-duration: 150ms;
@@ -2798,6 +2890,10 @@
   --tw-duration: 200ms;
   transition-duration: 200ms;
 }
+.eventcatalog-visualizer .duration-300 {
+  --tw-duration: 300ms;
+  transition-duration: 300ms;
+}
 .eventcatalog-visualizer .ease-in-out {
   --tw-ease: var(--ease-in-out);
   transition-timing-function: var(--ease-in-out);
@@ -2889,6 +2985,27 @@
     }
   }
 }
+.eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\/0\.06\)\] {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      background-color: rgb(var(--ec-catalog-accent,79 70 229)/0.06);
+    }
+  }
+}
+.eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\/0\.08\)\] {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      background-color: rgb(var(--ec-catalog-accent,79 70 229)/0.08);
+    }
+  }
+}
+.eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\/0\.22\)\] {
+  .eventcatalog-visualizer &:hover {
+    @media (hover: hover) {
+      background-color: rgb(var(--ec-catalog-accent,79 70 229)/0.22);
+    }
+  }
+}
 .eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-page-border\)\)\/0\.5\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -2903,17 +3020,17 @@
     }
   }
 }
-.eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-page-border\)\/0\.5\)\] {
+.eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-page-border\)\/0\.4\)\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
-      background-color: rgb(var(--ec-page-border)/0.5);
+      background-color: rgb(var(--ec-page-border)/0.4);
     }
   }
 }
-.eventcatalog-visualizer .hover\:bg-gray-50 {
+.eventcatalog-visualizer .hover\:bg-\[rgb\(var\(--ec-page-border\)\/0\.5\)\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
-      background-color: var(--color-gray-50);
+      background-color: rgb(var(--ec-page-border)/0.5);
     }
   }
 }
@@ -2927,13 +3044,6 @@
     }
   }
 }
-.eventcatalog-visualizer .hover\:bg-green-700 {
-  .eventcatalog-visualizer &:hover {
-    @media (hover: hover) {
-      background-color: var(--color-green-700);
-    }
-  }
-}
 .eventcatalog-visualizer .hover\:bg-orange-100 {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -2948,13 +3058,6 @@
     }
   }
 }
-.eventcatalog-visualizer .hover\:text-\[rgb\(var\(--ec-accent-hover\)\)\] {
-  .eventcatalog-visualizer &:hover {
-    @media (hover: hover) {
-      color: rgb(var(--ec-accent-hover));
-    }
-  }
-}
 .eventcatalog-visualizer .hover\:text-\[rgb\(var\(--ec-page-text\)\)\] {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -2998,11 +3101,6 @@
     }
   }
 }
-.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;
@@ -3019,11 +3117,6 @@
     --tw-ring-color: rgb(var(--ec-accent));
   }
 }
-.eventcatalog-visualizer .focus\:ring-green-500 {
-  .eventcatalog-visualizer &:focus {
-    --tw-ring-color: var(--color-green-500);
-  }
-}
 .eventcatalog-visualizer .focus\:ring-offset-2 {
   .eventcatalog-visualizer &:focus {
     --tw-ring-offset-width: 2px;
@@ -3036,6 +3129,22 @@
     outline-style: none;
   }
 }
+.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);
+    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 .focus-visible\:ring-\[rgb\(var\(--ec-accent\)\)\] {
+  .eventcatalog-visualizer &:focus-visible {
+    --tw-ring-color: rgb(var(--ec-accent));
+  }
+}
+.eventcatalog-visualizer .focus-visible\:ring-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\)\] {
+  .eventcatalog-visualizer &:focus-visible {
+    --tw-ring-color: rgb(var(--ec-catalog-accent,79 70 229));
+  }
+}
 .eventcatalog-visualizer .active\:cursor-grabbing {
   .eventcatalog-visualizer &:active {
     cursor: grabbing;
@@ -3051,6 +3160,47 @@
     opacity: 50%;
   }
 }
+.eventcatalog-visualizer .data-\[disabled\]\:cursor-not-allowed {
+  .eventcatalog-visualizer &[data-disabled] {
+    cursor: not-allowed;
+  }
+}
+.eventcatalog-visualizer .data-\[disabled\]\:opacity-40 {
+  .eventcatalog-visualizer &[data-disabled] {
+    opacity: 40%;
+  }
+}
+.eventcatalog-visualizer .data-\[disabled\]\:opacity-50 {
+  .eventcatalog-visualizer &[data-disabled] {
+    opacity: 50%;
+  }
+}
+.eventcatalog-visualizer .data-\[highlighted\]\:border-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\/0\.5\)\] {
+  .eventcatalog-visualizer &[data-highlighted] {
+    border-color: rgb(var(--ec-catalog-accent,79 70 229)/0.5);
+  }
+}
+.eventcatalog-visualizer .data-\[highlighted\]\:bg-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\/0\.05\)\] {
+  .eventcatalog-visualizer &[data-highlighted] {
+    background-color: rgb(var(--ec-catalog-accent,79 70 229)/0.05);
+  }
+}
+.eventcatalog-visualizer .data-\[highlighted\]\:text-\[rgb\(var\(--ec-page-text\)\)\] {
+  .eventcatalog-visualizer &[data-highlighted] {
+    color: rgb(var(--ec-page-text));
+  }
+}
+.eventcatalog-visualizer .data-\[state\=checked\]\:bg-\[rgb\(var\(--ec-catalog-accent\,79_70_229\)\/0\.14\)\] {
+  .eventcatalog-visualizer &[data-state="checked"] {
+    background-color: rgb(var(--ec-catalog-accent,79 70 229)/0.14);
+  }
+}
+.eventcatalog-visualizer .data-\[state\=checked\]\:font-semibold {
+  .eventcatalog-visualizer &[data-state="checked"] {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+}
 .eventcatalog-visualizer .md\:flex {
   @media (width >= 48rem) {
     display: flex;
@@ -3662,6 +3812,7 @@
   fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
 }
 .eventcatalog-visualizer {
+  --ec-catalog-accent: 79 70 229;
   --ec-page-bg: 255, 255, 255;
   --ec-card-bg: 255, 255, 255;
   --ec-page-text: 17, 24, 39;
@@ -3727,9 +3878,8 @@
   --ec-custom-node-bg: #f8fbff;
   --ec-message-group-node-bg: #f9f5ff;
   --ec-deprecated-stripe: rgba(239, 68, 68, 0.3);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -3768,21 +3918,64 @@
   --ec-icon-color: 139, 148, 158;
   --ec-icon-hover: 240, 246, 252;
 }
-@keyframes ec-handle-pulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.5);
+.eventcatalog-visualizer .ec-handle-glow::after {
+  content: "";
+  position: absolute;
+  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;
+}
+@keyframes ec-handle-glow {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
   }
   50% {
-    box-shadow: 0 0 0 5px rgba(251, 146, 60, 0);
+    transform: scale(1.7);
+    opacity: 0;
   }
 }
-@keyframes ec-service-handle-pulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.5);
+.eventcatalog-visualizer .ec-interaction-active .ec-handle-glow::after {
+  animation-play-state: paused;
+}
+.eventcatalog-visualizer .react-flow__node.ec-walkthrough-current {
+  z-index: 1000 !important;
+}
+.eventcatalog-visualizer .react-flow__node.ec-walkthrough-current::before,
+.eventcatalog-visualizer .react-flow__node.ec-walkthrough-current::after {
+  content: "";
+  position: absolute;
+  inset: -10px;
+  border-radius: 16px;
+  border: 3px solid rgb(var(--ec-accent));
+  pointer-events: none;
+}
+.eventcatalog-visualizer .react-flow__node.ec-walkthrough-current::before {
+  box-shadow: 0 0 0 6px rgb(var(--ec-accent)),
+    0 0 40px 8px rgb(var(--ec-accent));
+  @supports (color: color-mix(in lab, red, red)) {
+    box-shadow: 0 0 0 6px color-mix(in srgb, rgb(var(--ec-accent)) 18%, transparent),
+    0 0 40px 8px color-mix(in srgb, rgb(var(--ec-accent)) 45%, transparent);
   }
-  50% {
-    box-shadow: 0 0 0 5px rgba(236, 72, 153, 0);
+}
+.eventcatalog-visualizer .react-flow__node.ec-walkthrough-current::after {
+  animation: ec-walkthrough-pulse 1.6s ease-out infinite;
+}
+@keyframes ec-walkthrough-pulse {
+  from {
+    transform: scale(1);
+    opacity: 0.8;
   }
+  to {
+    transform: scale(1.12);
+    opacity: 0;
+  }
+}
+.eventcatalog-visualizer .ec-interaction-active .react-flow__node.ec-walkthrough-current::after {
+  animation-play-state: paused;
 }
 @keyframes ec-svc-msg-in {
   0% {
@@ -3816,62 +4009,6 @@
     opacity: 0;
   }
 }
-@keyframes ec-command-handle-pulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0);
-  }
-}
-@keyframes ec-query-handle-pulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0);
-  }
-}
-@keyframes ec-data-handle-pulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0);
-  }
-}
-@keyframes ec-channel-handle-pulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(107, 114, 128, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 0 5px rgba(107, 114, 128, 0);
-  }
-}
-@keyframes ec-actor-handle-pulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 0 5px rgba(234, 179, 8, 0);
-  }
-}
-@keyframes ec-external-handle-pulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 0 5px rgba(168, 85, 247, 0);
-  }
-}
-@keyframes ec-dp-handle-pulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5);
-  }
-  50% {
-    box-shadow: 0 0 0 5px rgba(99, 102, 241, 0);
-  }
-}
 .eventcatalog-visualizer .react-flow {
   background-color: #f1f5f9 !important;
 }
@@ -3884,6 +4021,49 @@
 .eventcatalog-visualizer .ec-animating-layout .react-flow__node {
   transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
+.eventcatalog-visualizer .react-flow__node.ec-enter,
+.eventcatalog-visualizer .react-flow__edge.ec-enter {
+  animation: ec-fade-in 0.5s ease-out;
+}
+.eventcatalog-visualizer .react-flow__node.ec-exit,
+.eventcatalog-visualizer .react-flow__edge.ec-exit {
+  animation: ec-fade-out 0.4s ease-in forwards;
+}
+.eventcatalog-visualizer .react-flow.ec-laying-out .react-flow__viewport {
+  opacity: 0;
+}
+.eventcatalog-visualizer .react-flow__node.ec-morph-exit {
+  animation: ec-fade-out 0.5s ease-in forwards;
+}
+.eventcatalog-visualizer .react-flow.ec-highlight-cross-domain
+  .react-flow__edge:not(:has(.ec-cross-domain)),
+.eventcatalog-visualizer .react-flow.ec-highlight-cross-domain .ec-edge-label:not(.ec-cross-domain) {
+  opacity: 0.15;
+}
+.eventcatalog-visualizer .react-flow.ec-highlight-cross-domain .react-flow__edge-path.ec-cross-domain {
+  stroke: rgb(var(--ec-catalog-accent, 79 70 229)) !important;
+  stroke-width: 3px !important;
+}
+.eventcatalog-visualizer .react-flow.ec-highlight-cross-domain .ec-edge-label.ec-cross-domain {
+  border-color: rgb(var(--ec-catalog-accent, 79 70 229)) !important;
+  color: rgb(var(--ec-catalog-accent, 79 70 229)) !important;
+}
+@keyframes ec-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes ec-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .eventcatalog-visualizer .react-flow__edge-path {
   stroke: var(--ec-edge-stroke, #6b7280) !important;
   stroke-width: 1.5 !important;
@@ -3932,7 +4112,8 @@
   animation: ec-node-pulse 1s ease-in-out infinite !important;
 }
 @keyframes ec-node-pulse {
-  0%, 100% {
+  0%,
+  100% {
     outline-color: rgba(37, 99, 235, 0.8);
   }
   50% {
@@ -3944,7 +4125,8 @@
   animation-name: ec-node-pulse-dark !important;
 }
 @keyframes ec-node-pulse-dark {
-  0%, 100% {
+  0%,
+  100% {
     outline-color: rgba(0, 217, 255, 0.8);
   }
   50% {
@@ -3989,7 +4171,8 @@
   cursor: pointer;
   color: #94a3b8;
   flex-shrink: 0;
-  transition: background 0.15s, color 0.15s;
+  transition: background 0.15s,
+    color 0.15s;
 }
 .eventcatalog-visualizer .ec-notes-close-btn:hover {
   background: rgba(0, 0, 0, 0.08);
@@ -4052,11 +4235,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-space-y-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @property --tw-space-x-reverse {
   syntax: "*";
   inherits: false;
@@ -4126,6 +4304,26 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -4316,7 +4514,6 @@
     --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;
@@ -4332,6 +4529,11 @@
     --tw-leading: initial;
     --tw-font-weight: initial;
     --tw-tracking: initial;
+    --tw-ordinal: initial;
+    --tw-slashed-zero: initial;
+    --tw-numeric-figure: initial;
+    --tw-numeric-spacing: initial;
+    --tw-numeric-fraction: initial;
     --tw-shadow: 0 0 #0000;
     --tw-shadow-color: initial;
     --tw-shadow-alpha: 100%;