@eventcatalog/visualiser 5.1.1 → 5.2.0

package/dist/styles.css

@@ -748,6 +748,9 @@
 .eventcatalog-visualizer .max-w-\[9rem\] {
   max-width: 9rem;
 }
+.eventcatalog-visualizer .max-w-\[55\%\] {
+  max-width: 55%;
+}
 .eventcatalog-visualizer .max-w-\[120px\] {
   max-width: 120px;
 }
@@ -763,9 +766,6 @@
 .eventcatalog-visualizer .max-w-\[240px\] {
   max-width: 240px;
 }
-.eventcatalog-visualizer .max-w-\[280px\] {
-  max-width: 280px;
-}
 .eventcatalog-visualizer .max-w-\[320px\] {
   max-width: 320px;
 }
@@ -802,6 +802,9 @@
 .eventcatalog-visualizer .min-w-56 {
   min-width: calc(var(--spacing) * 56);
 }
+.eventcatalog-visualizer .min-w-\[35\%\] {
+  min-width: 35%;
+}
 .eventcatalog-visualizer .min-w-\[150px\] {
   min-width: 150px;
 }
@@ -890,6 +893,9 @@
 .eventcatalog-visualizer .resize-none {
   resize: none;
 }
+.eventcatalog-visualizer .list-none {
+  list-style-type: none;
+}
 .eventcatalog-visualizer .appearance-none {
   appearance: none;
 }
@@ -981,6 +987,13 @@
     margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
   }
 }
+.eventcatalog-visualizer .space-y-px {
+  .eventcatalog-visualizer :where(& > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(1px * var(--tw-space-y-reverse));
+    margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse)));
+  }
+}
 .eventcatalog-visualizer .gap-x-2 {
   column-gap: calc(var(--spacing) * 2);
 }
@@ -1262,6 +1275,9 @@
     border-color: color-mix(in oklab, var(--color-blue-900) 10%, transparent);
   }
 }
+.eventcatalog-visualizer .border-current {
+  border-color: currentcolor;
+}
 .eventcatalog-visualizer .border-cyan-400 {
   border-color: var(--color-cyan-400);
 }
@@ -1535,6 +1551,9 @@
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-accent\)\)\] {
   background-color: rgb(var(--ec-accent));
 }
+.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-accent\)\/0\.1\)\] {
+  background-color: rgb(var(--ec-accent)/0.1);
+}
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-accent-subtle\)\)\] {
   background-color: rgb(var(--ec-accent-subtle));
 }
@@ -1571,9 +1590,6 @@
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-card-bg\)\)\] {
   background-color: rgb(var(--ec-card-bg));
 }
-.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);
 }
@@ -1598,9 +1614,6 @@
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-page-bg\)\)\] {
   background-color: rgb(var(--ec-page-bg));
 }
-.eventcatalog-visualizer .bg-\[rgb\(var\(--ec-page-bg\)\/0\.5\)\] {
-  background-color: rgb(var(--ec-page-bg)/0.5);
-}
 .eventcatalog-visualizer .bg-\[rgb\(var\(--ec-page-border\)\)\] {
   background-color: rgb(var(--ec-page-border));
 }
@@ -1667,6 +1680,9 @@
 .eventcatalog-visualizer .bg-blue-600 {
   background-color: var(--color-blue-600);
 }
+.eventcatalog-visualizer .bg-current {
+  background-color: currentcolor;
+}
 .eventcatalog-visualizer .bg-cyan-500 {
   background-color: var(--color-cyan-500);
 }
@@ -2298,6 +2314,9 @@
 .eventcatalog-visualizer .pb-0\.5 {
   padding-bottom: calc(var(--spacing) * 0.5);
 }
+.eventcatalog-visualizer .pb-1 {
+  padding-bottom: calc(var(--spacing) * 1);
+}
 .eventcatalog-visualizer .pb-1\.5 {
   padding-bottom: calc(var(--spacing) * 1.5);
 }
@@ -2310,6 +2329,9 @@
 .eventcatalog-visualizer .pb-3 {
   padding-bottom: calc(var(--spacing) * 3);
 }
+.eventcatalog-visualizer .pb-3\.5 {
+  padding-bottom: calc(var(--spacing) * 3.5);
+}
 .eventcatalog-visualizer .pb-16 {
   padding-bottom: calc(var(--spacing) * 16);
 }
@@ -3342,6 +3364,11 @@
     text-decoration-line: none;
   }
 }
+.eventcatalog-visualizer .empty\:hidden {
+  .eventcatalog-visualizer &:empty {
+    display: none;
+  }
+}
 .eventcatalog-visualizer .hover\:-translate-y-px {
   .eventcatalog-visualizer &:hover {
     @media (hover: hover) {
@@ -4326,6 +4353,249 @@
 .eventcatalog-visualizer .react-flow__edge-text {
   fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
 }
+.eventcatalog-visualizer .ec-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: rgb(var(--ec-page-text-muted));
+  cursor: pointer;
+}
+.eventcatalog-visualizer .ec-icon-button:hover:not(:disabled) {
+  color: rgb(var(--ec-page-text));
+  background: rgb(var(--ec-page-border) / 0.4);
+}
+.eventcatalog-visualizer .ec-icon-button:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.eventcatalog-visualizer .ec-icon-button svg {
+  width: 15px;
+  height: 15px;
+}
+.eventcatalog-visualizer .ec-doc-card {
+  position: absolute;
+  z-index: 30;
+  max-height: calc(100% - 110px);
+  overflow-y: auto;
+  border: 1px solid rgb(var(--ec-page-border));
+  border-radius: 12px;
+  background: rgb(var(--ec-card-bg));
+  color: rgb(var(--ec-page-text));
+  box-shadow: 0 24px 48px rgb(0 0 0 / 0.16), 0 2px 6px rgb(0 0 0 / 0.06);
+  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
+}
+.eventcatalog-visualizer .ec-doc-card-arrow {
+  position: absolute;
+  z-index: 31;
+  width: 14px;
+  height: 14px;
+  background: rgb(var(--ec-card-bg));
+  transform: rotate(45deg);
+  border: 1px solid rgb(var(--ec-page-border));
+  pointer-events: none;
+}
+.eventcatalog-visualizer .ec-doc-card-arrow.is-right {
+  border-top-color: transparent;
+  border-right-color: transparent;
+}
+.eventcatalog-visualizer .ec-doc-card-arrow.is-left {
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+.eventcatalog-visualizer .ec-doc-card-header:last-child {
+  border-bottom: 0;
+}
+.eventcatalog-visualizer .ec-doc-card-header {
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid rgb(var(--ec-page-border));
+}
+.eventcatalog-visualizer .ec-doc-card-kicker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.eventcatalog-visualizer .ec-doc-card-breadcrumb {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: rgb(var(--ec-page-text-muted));
+  font-size: 12px;
+}
+.eventcatalog-visualizer .ec-doc-card-close {
+  margin-left: auto;
+  margin-right: -6px;
+}
+.eventcatalog-visualizer .ec-doc-card-title {
+  margin: 10px 0 0;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+.eventcatalog-visualizer .ec-doc-card-version {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: rgb(var(--ec-page-text-muted));
+  letter-spacing: 0;
+}
+.eventcatalog-visualizer .ec-doc-card-summary {
+  margin: 8px 0 0;
+  font-size: 13px;
+  font-weight: 300;
+  line-height: 1.55;
+  color: rgb(var(--ec-page-text-muted));
+}
+.eventcatalog-visualizer .ec-doc-card-header:has(+ .ec-doc-card-body:empty) {
+  border-bottom: 0;
+}
+.eventcatalog-visualizer .ec-doc-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 12px;
+}
+.eventcatalog-visualizer .ec-doc-card-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid rgb(var(--ec-page-border));
+  border-radius: 7px;
+  background: rgb(var(--ec-card-bg));
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+  color: rgb(var(--ec-page-text));
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 150ms, border-color 150ms, box-shadow 150ms, transform 150ms;
+}
+.eventcatalog-visualizer .ec-doc-card-action svg {
+  width: 14px;
+  height: 14px;
+  flex: none;
+  color: rgb(var(--ec-icon-color, var(--ec-page-text-muted)));
+  transition: transform 150ms;
+}
+.eventcatalog-visualizer .ec-doc-card-action.is-primary svg {
+  color: rgb(var(--ec-accent));
+}
+.eventcatalog-visualizer .ec-doc-card-action:hover {
+  border-color: rgb(var(--ec-accent));
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in srgb, rgb(var(--ec-accent)) 45%, transparent);
+  }
+  background: rgb(var(--ec-page-border) / 0.25);
+  box-shadow: 0 3px 10px rgb(0 0 0 / 0.08);
+  transform: translateY(-1px);
+}
+.eventcatalog-visualizer .ec-doc-card-action:active {
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+  transform: none;
+}
+.eventcatalog-visualizer .ec-doc-card-action:hover .ec-doc-card-action-arrow {
+  transform: translateX(2px);
+}
+.eventcatalog-visualizer .ec-doc-card-action:focus-visible, .eventcatalog-visualizer .ec-doc-card-item:focus-visible {
+  outline: 2px solid rgb(var(--ec-accent));
+  outline-offset: 1px;
+}
+.eventcatalog-visualizer .ec-doc-card-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 4px 6px 4px 4px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: rgb(var(--ec-page-text));
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 120ms, border-color 120ms;
+}
+.eventcatalog-visualizer .ec-doc-card-item:hover {
+  border-color: rgb(var(--ec-page-border));
+  background: rgb(var(--ec-page-border) / 0.3);
+}
+.eventcatalog-visualizer .ec-doc-card-item:active {
+  background: rgb(var(--ec-page-border) / 0.5);
+}
+.eventcatalog-visualizer .ec-doc-card-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex: none;
+  border-radius: 6px;
+  background: currentColor;
+  @supports (color: color-mix(in lab, red, red)) {
+    background: color-mix(in srgb, currentColor 12%, transparent);
+  }
+}
+.eventcatalog-visualizer .ec-doc-card-item-icon svg {
+  width: 14px;
+  height: 14px;
+}
+.eventcatalog-visualizer .ec-doc-card-item-chevron {
+  width: 14px;
+  height: 14px;
+  flex: none;
+  margin-left: -2px;
+  color: rgb(var(--ec-page-text-muted));
+  opacity: 0;
+  transform: translateX(-3px);
+  transition: opacity 120ms, transform 120ms;
+}
+.eventcatalog-visualizer .ec-doc-card-item:hover .ec-doc-card-item-chevron, .eventcatalog-visualizer .ec-doc-card-item:focus-visible .ec-doc-card-item-chevron {
+  opacity: 1;
+  transform: none;
+}
+.eventcatalog-visualizer .ec-doc-card:has(> .ec-doc-card-scroll) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.eventcatalog-visualizer .ec-doc-card:has(> .ec-doc-card-scroll) > .ec-doc-card-header {
+  flex: none;
+}
+.eventcatalog-visualizer .ec-doc-card-scroll {
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.eventcatalog-visualizer .ec-doc-card-summary.is-clamped {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+.eventcatalog-visualizer .ec-doc-card-more {
+  margin-top: 1px;
+  color: rgb(var(--ec-page-text-muted));
+  font-size: 12px;
+  font-weight: 500;
+}
+.eventcatalog-visualizer .ec-doc-card-more .ec-doc-card-item-icon {
+  background: transparent;
+}
+.eventcatalog-visualizer .ec-doc-card-more:hover {
+  color: rgb(var(--ec-page-text));
+}
 .eventcatalog-visualizer {
   --ec-catalog-accent: 79 70 229;
   --ec-page-bg: 255, 255, 255;
@@ -4657,6 +4927,10 @@
     stroke-dashoffset: -10;
   }
 }
+.eventcatalog-visualizer .react-flow__node.ec-node-clickable,
+.eventcatalog-visualizer .ec-node-clickable[data-ec-container-header] {
+  cursor: pointer;
+}
 .eventcatalog-visualizer .ec-edge-hover-node {
   outline: 3px solid #2563eb !important;
   outline-offset: 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/visualiser",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "description": "ReactFlow nodes and visualiser components for EventCatalog - framework agnostic",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -91,7 +91,7 @@
   "scripts": {
     "build": "rimraf dist && tsup && pnpm build:css",
     "build:bin": "rimraf dist && tsup && pnpm build:css",
-    "build:css": "postcss src/styles.css -o dist/styles.css && postcss src/styles-core.css -o dist/styles-core.css && cp src/studio/studio.css dist/studio.css && cp src/studio/studio-fonts.css dist/studio-fonts.css && mkdir -p dist/fonts && cp src/studio/fonts/* dist/fonts/",
+    "build:css": "postcss src/styles.css -o dist/styles.css && postcss src/styles-core.css -o dist/styles-core.css && cp src/studio/studio.css dist/studio.css && cp src/studio/node-card.css dist/node-card.css && cp src/studio/studio-fonts.css dist/studio-fonts.css && mkdir -p dist/fonts && cp src/studio/fonts/* dist/fonts/",
     "build:watch": "concurrently \"tsup --watch\" \"postcss src/styles.css -o dist/styles.css --watch\" \"postcss src/styles-core.css -o dist/styles-core.css --watch\"",
     "dev": "tsup --watch --onSuccess \"pnpm build:css\"",
     "clean": "rimraf dist",