@likec4/diagram 1.1.0 → 1.2.0

package/dist/style.css

@@ -597,10 +597,15 @@ svg.react-flow__connectionline {
 .react-flow__edge-text {
   fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
 }
+.likec4-diagram-root {
+  -webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
+  -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
+}
 .likec4-diagram-root {
   --likec4-font-family: var(--likec4-default-font-family,'ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"');
   --likec4-background-color: var(--mantine-color-body);
   --likec4-background-pattern-color: var(--mantine-color-dimmed);
+  --likec4-filter-dimmed: brightness(.6) grayscale(.8) opacity(.5) blur(1px);
   --likec4-compound-font-family: var(--likec4-font-family);
   --likec4-compound-title-color: var(--likec4-element-loContrast);
   --likec4-element-font-family: var(--likec4-font-family);
@@ -1253,6 +1258,8 @@ svg.react-flow__connectionline {
   --likec4-element-fill: #34369f;
   --likec4-element-stroke: #373287;
 }._2h8g8h0 {
+  overflow: hidden;
+  position: relative;
   width: 100%;
   height: 100%;
   padding: 0;
@@ -1262,7 +1269,7 @@ svg.react-flow__connectionline {
   --xy-background-pattern-color: var(--likec4-background-pattern-color);
 }
 .react-flow._2h8g8h1 .react-flow__viewport {
-  will-change: transform;
+  backface-visibility: hidden;
 }
 .react-flow._2h8g8h1._2h8g8h3 {
   --likec4-background-color: transparent !important;
@@ -1271,53 +1278,94 @@ svg.react-flow__connectionline {
 }
 :where(._2h8g8h4, ._2h8g8h3) .react-flow__attribution {
   display: none;
-}._1lmzt1h0 {
-  top: var(--likec4-options-panel-top, 1rem);
-  right: var(--likec4-options-panel-right, 1rem);
-  margin: 0;
-  box-shadow: var(--mantine-shadow-xl);
-}.bexn7q0 {
+}@keyframes bexn7q6 {
+  from {
+    stroke-dashoffset: 36;
+  }
+  to {
+    stroke-dashoffset: 1;
+  }
+}
+.bexn7q1 {
+  --bexn7q0: black;
   --xy-edge-stroke: var(--likec4-relation-lineColor);
-  --xy-edge-stroke-selected: color-mix(in srgb, var(--likec4-relation-lineColor), white 30%);
+  --xy-edge-stroke-selected: color-mix(in srgb, var(--likec4-relation-lineColor), var(--bexn7q0) 35%);
   --xy-edge-label-color: color-mix(in srgb, var(--likec4-relation-labelColor), rgba(255 255 255 / 0.85) 20%);
   --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 35%);
-  --xy-edge-stroke-width: 2.5px;
+  --xy-edge-stroke-width: 2.2px;
+}
+svg:has(.bexn7q2) {
+  filter: var(--likec4-filter-dimmed);
+  transition: filter 800ms ease-out;
 }
-[data-mantine-color-scheme="dark"] .bexn7q0 {
+:where([data-mantine-color-scheme="dark"]) .bexn7q1 {
+  --bexn7q0: white;
   --xy-edge-label-color: var(--likec4-relation-labelColor);
   --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 55%);
 }
-.bexn7q0[data-edge-hovered='true'] {
-  --xy-edge-stroke: color-mix(in srgb, var(--likec4-relation-lineColor), white 30%);
+:where(.react-flow__edge.selected) .bexn7q1 {
+  --xy-edge-stroke: var(--xy-edge-stroke-selected);
   --xy-edge-stroke-width: 3px;
 }
-.react-flow__edge.selected .bexn7q0 {
-  --xy-edge-stroke-width: 2.5;
+.bexn7q1:is([data-edge-hovered='true'],[data-edge-active='true']) {
+  --xy-edge-stroke: var(--xy-edge-stroke-selected);
+  --xy-edge-stroke-width: 3px;
+}
+:where(.react-flow__edge.selected) .bexn7q1[data-edge-hovered='true'] {
+  --xy-edge-stroke-width: 3.6px;
 }
 .react-flow__edges > svg {
   mix-blend-mode: screen;
 }
-:where([data-mantine-color-scheme="dark"]) .react-flow__edges > svg {
-  mix-blend-mode: lighten;
+.bexn7q3 {
+  stroke-width: var(--xy-edge-stroke-width);
+  stroke-opacity: 0.08;
+  transition-property: stroke-width, stroke-opacity;
+  transition-duration: 155ms;
+  transition-timing-function: ease-out;
 }
-.bexn7q1 {
-  stroke-width: calc(var(--xy-edge-stroke-width) + 8);
-  stroke-opacity: 0.1;
+:where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-hovered='true']) .bexn7q3 {
+  stroke-width: calc(var(--xy-edge-stroke-width) + 8px);
+  stroke-opacity: 0.15;
 }
-.bexn7q2 {
+.bexn7q4 {
   fill: var(--xy-edge-stroke);
   stroke: var(--xy-edge-stroke);
+  pointer-events: none;
 }
-.react-flow__edge.selected .bexn7q2 {
-  --xy-edge-stroke: var(--xy-edge-stroke-selected);
+.bexn7q5 {
+  fill: var(--xy-edge-stroke);
+  stroke: var(--xy-edge-stroke);
+  fill-opacity: 0.75;
+  stroke-width: 1;
+  cursor: grab;
+  pointer-events: visible;
 }
-.bexn7q0[data-edge-hovered='true'] .bexn7q3 {
-  transition: all 130ms ease-out;
+:where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-hovered='true']) .bexn7q5 {
+  transition: all 150ms ease-out;
+  fill-opacity: 1;
+  stroke-width: 3;
 }
 .bexn7q7 {
-  --bexn7q6: translate(var(--bexn7q4), var(--bexn7q5));
-  --bexn7q4: 50%;
-  --bexn7q5: 50%;
+  animation-duration: 800ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+:where([data-edge-hovered='true']) .bexn7q7 {
+  animation-name: bexn7q6;
+  animation-delay: 350ms;
+  transition: all 130ms ease-out;
+}
+:where(.react-flow__edge.selected, [data-edge-active='true']) .bexn7q7 {
+  animation-name: bexn7q6;
+  animation-delay: 0ms;
+  transition: all 130ms ease-out;
+}
+:where([data-edge-dir='back']) .bexn7q7 {
+  animation-direction: reverse;
+}
+.bexn7qb {
+  --bexn7qa: translate(var(--bexn7q8, 50%), var(--bexn7q9, 50%));
   top: 0;
   left: 0;
   font-family: var(--likec4-font-family);
@@ -1325,25 +1373,46 @@ svg.react-flow__connectionline {
   pointer-events: all;
   cursor: pointer;
   transform-origin: 50% 50%;
-  text-align: left;
   mix-blend-mode: screen;
-  padding: 2px 6px 4px 6px;
-  width: max-content;
+  color: var(--xy-edge-label-color);
   background-color: var(--xy-edge-label-background-color);
   border-radius: 3px;
-  transform: var(--bexn7q6);
-  will-change: transform;
+  transform: var(--bexn7qa);
 }
-.bexn7q7[data-edge-hovered="true"] {
+.bexn7qb[data-edge-hovered="true"] {
   transition: all 140ms ease-out;
-  transform: var(--bexn7q6) scale(1.1);
+  transform: var(--bexn7qa) scale(1.1);
 }
-.bexn7q8 {
-  color: var(--xy-edge-label-color);
+.bexn7qb:is(.bexn7q2) {
+  transition: filter 800ms ease-out;
+  filter: var(--likec4-filter-dimmed);
+}
+.bexn7qc {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  font-weight: 500;
+  font-size: calc(1rem * var(--mantine-scale));
+  line-height: 0.9;
+  padding: 4px 6px;
+  border-radius: 99999px;
+  text-align: center;
+  min-width: 22px;
+  background-color: var(--xy-edge-label-background-color);
+  transition: all 120ms ease-out;
+  transform: translateX(-100%);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-edge-hovered="true"],[data-edge-active="true"]) .bexn7qc {
+  font-weight: 600;
+  background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 5%);
+}
+.bexn7qd {
+  padding: 2px 6px 4px 6px;
+  text-align: left;
   font-size: calc(0.78125rem * var(--mantine-scale));
-  line-height: 1.12;
-  transition: color 120ms ease-out;
-}@keyframes lbtzdo7 {
+  line-height: 1.2;
+}@keyframes lbtzdo8 {
   from {
     opacity: 0.6;
   }
@@ -1358,46 +1427,48 @@ svg.react-flow__connectionline {
   padding: 0;
   margin: 0;
 }
-.lbtzdo2 {
+.lbtzdo1 {
+  filter: var(--likec4-filter-dimmed);
+  transition: filter 800ms ease-out;
+}
+.lbtzdo3 {
   width: 100%;
   height: 100%;
   position: relative;
-  border-radius: calc(0.375rem * var(--mantine-scale));
+  border-radius: 6px;
   box-shadow: 0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4);
   padding: 8px;
   background: var(--likec4-element-fill);
   transition: all 200ms ease-out;
 }
-:where(.react-flow__node.selected) .lbtzdo2 {
+:where(.react-flow__node.selected) .lbtzdo3 {
   box-shadow: none;
 }
-:where(.react-flow__node:focus-visible) .lbtzdo2 {
+:where(.react-flow__node:focus-visible) .lbtzdo3 {
   transition-duration: 0ms;
   outline: 3px solid var(--mantine-primary-color-outline, var(--mantine-primary-color-filled, var(--likec4-element-stroke)));
   outline-offset: calc(0.09375rem * var(--mantine-scale));
 }
-.lbtzdo5 {
-  --lbtzdo3: calc(var(--lbtzdo1, 80%) - var(--lbtzdo4));
-  --lbtzdo4: 0%;
+.lbtzdo6 {
+  --lbtzdo4: calc(var(--lbtzdo2, 80%) - var(--lbtzdo5));
+  --lbtzdo5: 0%;
   --ai-bg: color-mix(in srgb , var(--likec4-element-fill),  transparent 99%);
-  border-radius: 8px;
   border-style: dashed;
   border-width: 3px;
   padding: 6px;
-  border-color: color-mix(in srgb , var(--likec4-element-stroke),  transparent min(var(--lbtzdo3), 30%));
-  background: color-mix(in srgb , var(--likec4-element-fill),  transparent var(--lbtzdo3));
+  border-color: color-mix(in srgb , var(--likec4-element-stroke),  transparent min(var(--lbtzdo4), 30%));
+  background: color-mix(in srgb , var(--likec4-element-fill),  transparent var(--lbtzdo4));
   background-clip: padding-box;
 }
-:where(.lbtzdo0[data-hovered]) .lbtzdo5 {
-  --lbtzdo4: 15%;
-  transition-delay: 175ms;
-}
-:where(.react-flow__node.selected) .lbtzdo5 {
-  --lbtzdo4: 25%;
+:where(.react-flow__node.selected) .lbtzdo6 {
+  --lbtzdo5: 5%;
   transition-delay: 50ms;
-  border-color: transparent;
 }
-.lbtzdo6 {
+:where([data-hovered]) .lbtzdo6 {
+  --lbtzdo5: 15%;
+  transition-delay: 175ms;
+}
+.lbtzdo7 {
   font-family: var(--likec4-compound-font-family);
   font-optical-sizing: auto;
   font-style: normal;
@@ -1412,18 +1483,18 @@ svg.react-flow__connectionline {
   color: var(--_compound-title-color,var(--likec4-compound-title-color));
   padding-left: 12px;
 }
-:where([data-likec4-navigable='true']) .lbtzdo6 {
+:where([data-likec4-navigable='true']) .lbtzdo7 {
   padding-left: 26px;
 }
-:where([data-mantine-color-scheme='light']) .lbtzdo6 {
-  opacity: 1;
-}
 :where([data-mantine-color-scheme='light'] .likec4-compound-transparent) {
   --_compound-title-color: var(--likec4-element-stroke);
 }
-.lbtzdoa {
-  --lbtzdo8: var(--likec4-element-loContrast);
-  --lbtzdo9: 6;
+:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) .lbtzdo7 {
+  opacity: 1;
+}
+.lbtzdob {
+  --lbtzdo9: var(--likec4-element-loContrast);
+  --lbtzdoa: 6;
   position: absolute;
   top: 0;
   left: 0;
@@ -1433,33 +1504,33 @@ svg.react-flow__connectionline {
   overflow: visible;
   visibility: hidden;
 }
-:where(.react-flow__node.selected:not(:focus-visible)) .lbtzdoa {
+:where(.react-flow__node.selected:not(:focus-visible)) .lbtzdob {
   visibility: visible;
 }
-:where(.react-flow__node:focus-within:not(.selected)) .lbtzdoa {
-  --lbtzdo8: color-mix(in srgb, var(--likec4-element-stroke) 30%, var(--likec4-element-loContrast));
-  --lbtzdo9: 8;
+:where(.react-flow__node:focus-within:not(.selected)) .lbtzdob {
+  --lbtzdo9: color-mix(in srgb, var(--likec4-element-stroke) 30%, var(--likec4-element-loContrast));
+  --lbtzdoa: 8;
 }
-:where([data-mantine-color-scheme='light']) .lbtzdoa {
-  --lbtzdo8: color-mix(in srgb, var(--likec4-element-stroke) 80%, #000);
+:where([data-mantine-color-scheme='light']) .lbtzdob {
+  --lbtzdo9: color-mix(in srgb, var(--likec4-element-stroke) 80%, #000);
 }
-.lbtzdoa rect {
-  stroke: var(--lbtzdo8);
+.lbtzdob rect {
+  stroke: var(--lbtzdo9);
   transform-origin: center center;
-  stroke-width: var(--lbtzdo9);
+  stroke-width: var(--lbtzdoa);
   animation-duration: 800ms;
-  animation-name: lbtzdo7;
+  animation-name: lbtzdo8;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   fill: none;
 }
 .lbtzdo0 {
-  --lbtzdob: var(--likec4-element-loContrast);
+  --lbtzdoc: var(--likec4-element-loContrast);
 }
 :where([data-mantine-color-scheme='light'] .likec4-compound-transparent) {
-  --lbtzdob: var(--likec4-element-stroke);
+  --lbtzdoc: var(--likec4-element-stroke);
 }
-.lbtzdoc {
+.lbtzdod {
   --ai-bg: color-mix(in srgb , var(--likec4-element-fill),  transparent 99%);
   --ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));
   --ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));
@@ -1468,41 +1539,41 @@ svg.react-flow__connectionline {
   left: 3px;
   top: 7px;
   cursor: pointer;
-  color: var(--_compound-title-color,var(--lbtzdob));
+  color: var(--_compound-title-color,var(--lbtzdoc));
   transform-origin: 90% 70%;
   opacity: 0.75;
   transition: all 150ms ease-out;
   transition-delay: 0ms;
   background-color: var(--ai-bg);
 }
-.lbtzdoc:hover {
+.lbtzdod:hover {
   box-shadow: var(--mantine-shadow-lg);
   transform: scale(1.466);
   opacity: 1;
   transition-delay: 0;
 }
-.lbtzdoc:active {
+.lbtzdod:active {
   transform: scale(1.1);
   opacity: 1;
   transition-delay: 0;
 }
-:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) .lbtzdoc {
+:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) .lbtzdod {
   --ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill),  transparent 50%);
   --ai-hover: color-mix(in srgb , var(--likec4-element-fill),  transparent 20%);
   opacity: 0.85;
 }
-:where(.react-flow__node:not(.dragging) .lbtzdo0:hover) .lbtzdoc:not(:hover) {
+:where(.react-flow__node:not(.dragging) .lbtzdo0:hover) .lbtzdod:not(:hover) {
   --ai-bg: var(--ai-bg-hover);
   box-shadow: var(--mantine-shadow-lg);
   transform: scale(1.223);
   opacity: 1;
   transition-delay: 250ms;
 }
-.lbtzdoc svg.icon {
+.lbtzdod svg.icon {
   width: 70%;
   height: 70%;
   stroke-width: 1.5;
-}@keyframes _1b6tkn3 {
+}@keyframes _1b6tkn4 {
   from {
     opacity: 0.6;
   }
@@ -1517,39 +1588,44 @@ svg.react-flow__connectionline {
   height: 100%;
   padding: 0;
   margin: 0;
+  backface-visibility: hidden;
+}
+.react-flow__node:has(._1b6tkn3) {
+  filter: var(--likec4-filter-dimmed);
+  transition: filter 800ms ease-out;
 }
-._1b6tkn4 {
+._1b6tkn5 {
   stroke: var(--likec4-element-loContrast);
   transform-origin: center center;
   stroke-width: 6;
   animation-duration: 800ms;
-  animation-name: _1b6tkn3;
+  animation-name: _1b6tkn4;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   visibility: hidden;
 }
-:where(.react-flow__node.selected) ._1b6tkn4 {
+:where(.react-flow__node.selected) ._1b6tkn5 {
   visibility: visible;
 }
-:where(.react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tkn4 {
+:where(.react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tkn5 {
   animation-name: none;
   stroke-width: 10;
   stroke: var(--mantine-primary-color-outline, var(--mantine-primary-color-filled, var(--likec4-element-stroke)));
   visibility: visible;
 }
-:where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tkn4 {
+:where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tkn5 {
   stroke-width: 10;
 }
-._1b6tkn5 {
+._1b6tkn6 {
   fill: var(--likec4-element-fill);
 }
-._1b6tkn6 {
+._1b6tkn7 {
   fill: var(--likec4-element-stroke);
 }
-._1b6tkn7 {
+._1b6tkn8 {
   fill: var(--_1b6tkn0);
 }
-._1b6tkn8 {
+._1b6tkn9 {
   flex: 0 0 auto;
   font-family: var(--likec4-element-font-family);
   font-optical-sizing: auto;
@@ -1561,14 +1637,14 @@ svg.react-flow__connectionline {
   text-wrap: balance;
   color: var(--likec4-element-hiContrast);
 }
-._1b6tkn9 {
+._1b6tkna {
   flex: 0 1 auto;
   font-family: var(--likec4-element-font-family);
   font-optical-sizing: auto;
   font-style: normal;
   font-weight: 400;
   font-size: calc(0.875rem * var(--mantine-scale));
-  line-height: 1.125;
+  line-height: 1.25;
   text-align: center;
   text-wrap: pretty;
   color: var(--likec4-element-loContrast);
@@ -1576,7 +1652,7 @@ svg.react-flow__connectionline {
   text-overflow: ellipsis;
   overflow: hidden;
 }
-._1b6tkna {
+._1b6tknb {
   flex: 0 0 auto;
   font-family: var(--likec4-element-font-family);
   font-optical-sizing: auto;
@@ -1589,10 +1665,10 @@ svg.react-flow__connectionline {
   opacity: 0.92;
   color: var(--likec4-element-loContrast);
 }
-._1b6tkn2:hover ._1b6tkna {
+._1b6tkn2:hover ._1b6tknb {
   opacity: 1;
 }
-._1b6tknb {
+._1b6tknc {
   --_1b6tkn1: calc(1.5rem * var(--mantine-scale));
   position: relative;
   width: 100%;
@@ -1605,24 +1681,24 @@ svg.react-flow__connectionline {
   overflow: hidden;
   gap: calc(0.5rem * var(--mantine-scale));
 }
-._1b6tknb:has(._1b6tkn9):has(._1b6tkna) {
+._1b6tknc:has(._1b6tkna):has(._1b6tknb) {
   gap: calc(0.375rem * var(--mantine-scale));
 }
-:where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) ._1b6tknb {
+:where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) ._1b6tknc {
   padding-left: calc(2.5rem * var(--mantine-scale));
   padding-right: calc(1.25rem * var(--mantine-scale));
 }
-:where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tknb {
+:where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tknc {
   padding-top: calc(2.125rem * var(--mantine-scale));
 }
-:where([data-likec4-shape="browser"]) ._1b6tknb {
+:where([data-likec4-shape="browser"]) ._1b6tknc {
   padding-top: calc(2rem * var(--mantine-scale));
   padding-bottom: calc(1.75rem * var(--mantine-scale));
 }
-._1b6tknd {
-  --_1b6tknc: 30px;
-  flex: 0 1 var(--_1b6tknc);
-  max-height: var(--_1b6tknc);
+._1b6tkne {
+  --_1b6tknd: 30px;
+  flex: 0 1 var(--_1b6tknd);
+  max-height: var(--_1b6tknd);
   margin-top: -8px;
   position: relative;
   user-select: none;
@@ -1630,17 +1706,17 @@ svg.react-flow__connectionline {
   overflow: visible;
   mix-blend-mode: hard-light;
 }
-._1b6tknd img {
+._1b6tkne img {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: auto;
   object-fit: contain;
-  max-height: calc(var(--_1b6tknc) + 16px);
+  max-height: calc(var(--_1b6tknd) + 16px);
 }
-._1b6tkng {
-  --_1b6tkne: 
+._1b6tknh {
+  --_1b6tknf: 
   drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
   drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-element-stroke) 40%, transparent))
   drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
@@ -1652,14 +1728,14 @@ svg.react-flow__connectionline {
   fill: var(--likec4-element-fill);
   stroke: var(--likec4-element-stroke);
   overflow: visible;
-  filter: var(--_1b6tknf, var(--_1b6tkne));
+  filter: var(--_1b6tkng, var(--_1b6tknf));
   transition: filter 300ms ease-out;
   transition-delay: 0ms;
 }
-:where(.react-flow__node.selected, .react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tkng {
+:where(.react-flow__node.selected, .react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tknh {
   filter: none;
 }
-._1b6tknh {
+._1b6tkni {
   --ai-bg: color-mix(in srgb , var(--likec4-element-fill),  transparent 99%);
   --ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill) 65%, var(--likec4-element-stroke));
   --ai-hover: color-mix(in srgb , var(--likec4-element-fill) 50%, var(--likec4-element-stroke));
@@ -1677,28 +1753,28 @@ svg.react-flow__connectionline {
   transition-delay: 0ms;
   background-color: var(--ai-bg);
 }
-._1b6tknh:hover {
+._1b6tkni:hover {
   box-shadow: var(--mantine-shadow-lg);
   transform: translate(-50%, 0) scale(1.35);
   opacity: 1;
   transition-delay: 0;
 }
-._1b6tknh:active {
+._1b6tkni:active {
   transform: translate(-50%, 0) scale(1.02);
   opacity: 1;
   transition-delay: 0;
 }
-:where([data-likec4-shape='browser']) ._1b6tknh {
+:where([data-likec4-shape='browser']) ._1b6tkni {
   bottom: 3px;
 }
-:where(.react-flow__node:not(.dragging) ._1b6tkn2:hover) ._1b6tknh:not(:hover) {
+:where(.react-flow__node:not(.dragging) ._1b6tkn2:hover) ._1b6tkni:not(:hover) {
   --ai-bg: var(--ai-bg-hover);
   box-shadow: var(--mantine-shadow-lg);
   transform: translate(-50%, 0) scale(1.185);
   opacity: 1;
   transition-delay: 250ms;
 }
-._1b6tknh svg.icon {
+._1b6tkni svg.icon {
   width: 65%;
   height: 65%;
   stroke-width: 1.5;
@@ -1753,4 +1829,66 @@ svg.react-flow__connectionline {
 }
 ._4ysv0o2 {
   text-align: left;
+}._2jkb2y0 {
+  position: absolute;
+  bottom: 0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0;
+  margin: 0;
+}
+._2jkb2y1 {
+  backdrop-filter: blur(8px);
+  transition: all 175ms ease-in;
+}
+._2jkb2y1:hover {
+  transition-timing-function: ease-out;
+  transform: scale(1.1);
+}
+._2jkb2y1:active {
+  transition-duration: 100ms;
+  transform: scale(0.98) translateY(3px);
+}
+._2jkb2y3 {
+  --_2jkb2y2: 35%;
+  --button-bg: color-mix(in srgb, var(--mantine-primary-color-filled), transparent var(--_2jkb2y2));
+  --button-hover: color-mix(in srgb, var(--mantine-primary-color-filled-hover), transparent var(--_2jkb2y2));
+  transition: all 175ms ease-in;
+  background-color: var(--button-bg);
+}
+[data-mantine-color-scheme="light"] ._2jkb2y3 {
+  --_2jkb2y2: 15%;
+}
+._2jkb2y3 .tabler-icon {
+  width: 80%;
+}._1lmzt1h0 {
+  top: var(--likec4-options-panel-top, 1rem);
+  right: var(--likec4-options-panel-right, 1rem);
+  margin: 0;
+  box-shadow: var(--mantine-shadow-xl);
+}.hbkbtj0 {
+  bottom: 0;
+  left: 0;
+  padding: 8px;
+  margin: 0;
+}
+.hbkbtj1 {
+  cursor: default;
+  min-width: 100px;
+  max-width: calc(100vw - 16px);
+  background-color: color-mix(in srgb, var(--mantine-color-body), transparent 20%);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+.hbkbtj3 {
+  white-space-collapse: preserve-breaks;
+  color: var(--mantine-color-gray-7);
+}
+:where([data-mantine-color-scheme="dark"]) .hbkbtj3 {
+  color: var(--mantine-color-gray-5);
+}
+@media (min-width: 62em) {
+  .hbkbtj1 {
+    max-width: 45vw;
+  }
 }

package/dist/theme.css.d.ts

@@ -2,6 +2,7 @@ export declare const vars: {
     default: {
         font: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
+    filterDimmed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     likec4: {
         font: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         background: {

package/dist/ui/DiagramTitlePanel.css.d.ts

@@ -0,0 +1,4 @@
+export declare const container: string;
+export declare const paper: string;
+export declare const title: string;
+export declare const description: string;

package/dist/ui/DiagramTitlePanel.d.ts

@@ -0,0 +1 @@
+export default function DiagramTitlePanel(): import("react/jsx-runtime").JSX.Element;

package/dist/ui/DynamicViewWalkthrough.css.d.ts

@@ -0,0 +1,3 @@
+export declare const container: string;
+export declare const buttons: string;
+export declare const btn: string;

package/dist/ui/DynamicViewWalkthrough.d.ts

@@ -0,0 +1 @@
+export declare function DynamicViewWalkthrough(): import("react/jsx-runtime").JSX.Element;