@likec4/diagram 1.4.0 → 1.6.0

package/dist/style.css

@@ -598,13 +598,20 @@ svg.react-flow__connectionline {
   fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
 }
 .likec4-diagram-root {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
   -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-background-pattern-color: var(--mantine-color-dark-3);
   --likec4-compound-font-family: var(--likec4-font-family);
   --likec4-compound-title-color: var(--likec4-element-loContrast);
   --likec4-element-font-family: var(--likec4-font-family);
@@ -617,7 +624,7 @@ svg.react-flow__connectionline {
   --likec4-relation-labelColor: #cbd5e1;
 }
 :where([data-mantine-color-scheme='light']) .likec4-diagram-root {
-  --likec4-background-pattern-color: var(--mantine-color-dark-3);
+  --likec4-background-pattern-color: var(--mantine-color-gray-6);
 }
 :where([data-likec4-color='primary']) {
   --likec4-element-fill: #3b82f6;
@@ -1145,8 +1152,8 @@ svg.react-flow__connectionline {
   --likec4-element-fill: #A35829;
   --likec4-element-stroke: #7E451D;
   --likec4-element-hiContrast: #FFE0C2;
-  --likec4-element-loContrast: #FFA057;
-  --likec4-compound-title-color: #FFA057;
+  --likec4-element-loContrast: #f9b27c;
+  --likec4-compound-title-color: #f9b27c;
   --likec4-relation-lineColor: #b45309;
   --likec4-relation-labelBg: #78350f;
   --likec4-relation-labelColor: #FFE0C2;
@@ -1256,35 +1263,28 @@ svg.react-flow__connectionline {
 :where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='6']) {
   --likec4-element-fill: #34369f;
   --likec4-element-stroke: #373287;
-}._2h8g8h0 {
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-}
-.react-flow._2h8g8h1 {
+}.react-flow._2h8g8h0 {
   --xy-background-color: var(--likec4-background-color);
   --xy-background-pattern-color: var(--likec4-background-pattern-color);
 }
-.react-flow._2h8g8h1._2h8g8h3 {
+.react-flow._2h8g8h0._2h8g8h2 {
   --likec4-background-color: transparent !important;
   --xy-background-color: transparent !important;
   background-color: transparent !important;
 }
-:where(._2h8g8h4, ._2h8g8h3) .react-flow__attribution {
+:where(._2h8g8h3, ._2h8g8h2) .react-flow__attribution {
   display: none;
 }
 @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
-  ._2h8g8h1 {
+  ._2h8g8h0 {
     --likec4-safari-animation-hook: ;
   }
-}@keyframes bexn7q6 {
+}@keyframes bexn7q7 {
   from {
-    stroke-dashoffset: 36;
+    stroke-dashoffset: 46;
   }
   to {
-    stroke-dashoffset: 1;
+    stroke-dashoffset: 10;
   }
 }
 .bexn7q1 {
@@ -1292,44 +1292,43 @@ svg.react-flow__connectionline {
   --xy-edge-stroke: var(--likec4-relation-lineColor);
   --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.2px;
+  --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 40%);
+  --xy-edge-stroke-width: 3;
 }
 :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%);
+  --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 50%);
 }
 :where(.react-flow__edge.selected) .bexn7q1 {
   --xy-edge-stroke: var(--xy-edge-stroke-selected);
-  --xy-edge-stroke-width: 3px;
+  --xy-edge-stroke-width: 3;
 }
 .bexn7q1:is([data-edge-hovered='true'],[data-edge-active='true']) {
   --xy-edge-stroke: var(--xy-edge-stroke-selected);
-  --xy-edge-stroke-width: 3px;
+  --xy-edge-stroke-width: 3;
 }
 :where(.react-flow__edge.selected) .bexn7q1[data-edge-hovered='true'] {
-  --xy-edge-stroke-width: 3.6px;
+  --xy-edge-stroke-width: 4;
 }
 .react-flow__edges > svg {
-  mix-blend-mode: screen;
+  mix-blend-mode: plus-lighter;
 }
 .react-flow__edges > svg:has(.bexn7q2) {
-  opacity: 0.8;
+  opacity: 0.6;
   transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
   transition-delay: 200ms;
   filter: grayscale(0.85) var(--likec4-safari-animation-hook, blur(1px));
   will-change: opacity, filter;
 }
 .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;
 }
 :where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-hovered='true']) .bexn7q3 {
-  stroke-width: calc(var(--xy-edge-stroke-width) + 8px);
+  stroke-width: calc(var(--xy-edge-stroke-width) + 8);
   stroke-opacity: 0.15;
 }
 .bexn7q4 {
@@ -1341,7 +1340,7 @@ svg.react-flow__connectionline {
   stroke: var(--xy-edge-stroke);
   fill-opacity: 0.75;
   stroke-width: 1;
-  cursor: grab;
+  cursor: default;
   pointer-events: auto;
   visibility: hidden;
 }
@@ -1357,56 +1356,64 @@ svg.react-flow__connectionline {
   fill-opacity: 1;
   stroke-width: 5;
 }
-.bexn7q7 {
+.bexn7q6 {
+  cursor: grab;
+}
+.bexn7q6 * {
+  cursor: grab;
+}
+.bexn7q8 {
   animation-duration: 800ms;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
-  animation-name: bexn7q6;
-  animation-play-state: paused;
+  animation-fill-mode: both;
+  stroke-dashoffset: 10;
 }
-:where([data-edge-hovered='true']) .bexn7q7 {
-  animation-play-state: running;
-  animation-delay: 350ms;
+:where([data-edge-hovered='true']) .bexn7q8 {
+  animation-name: bexn7q7;
+  animation-delay: 450ms;
   transition: stroke 130ms ease-out,stroke-width 130ms ease-out;
 }
-:where(.react-flow__edge.selected, [data-edge-active='true']) .bexn7q7 {
-  animation-play-state: running;
+:where(.react-flow__edge.selected, [data-edge-active='true']) .bexn7q8 {
+  animation-name: bexn7q7;
   animation-delay: 0ms;
   transition: stroke 130ms ease-out,stroke-width 130ms ease-out;
 }
-:where([data-edge-dir='back']) .bexn7q7 {
+:where([data-edge-dir='back']) .bexn7q8 {
   animation-direction: reverse;
 }
-.bexn7q2 .bexn7q7 {
+.bexn7q2 .bexn7q8 {
   animation-play-state: paused;
 }
-.bexn7qb {
-  --bexn7qa: translate(var(--bexn7q8, -50%), var(--bexn7q9, -50%));
+.bexn7qc {
+  --bexn7qb: translate(var(--bexn7q9, -50%), var(--bexn7qa, -50%));
   top: 0;
   left: 0;
+  padding: 2px 4px 4px 4px;
   font-family: var(--likec4-font-family);
   position: absolute;
   pointer-events: all;
   cursor: pointer;
+  width: fit-content;
   transform-origin: 50% 50%;
-  mix-blend-mode: screen;
+  mix-blend-mode: plus-lighter;
   color: var(--xy-edge-label-color);
   background-color: var(--xy-edge-label-background-color);
   border-radius: 3px;
-  transform: var(--bexn7qa);
+  transform: var(--bexn7qb);
 }
-.bexn7qb[data-edge-hovered="true"] {
-  transition: all 140ms ease-out;
-  transform: var(--bexn7qa) scale(1.1);
+.bexn7qc[data-edge-hovered="true"] {
+  transition: all 140ms ease-in-out;
+  transform: var(--bexn7qb) scale(1.12);
 }
-.bexn7qb:is(.bexn7q2) {
-  opacity: 0.6;
+.bexn7qc:is(.bexn7q2) {
+  opacity: 0.3;
   transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
   transition-delay: 200ms;
   filter: grayscale(0.85) var(--likec4-safari-animation-hook, blur(1px));
   will-change: opacity, filter;
 }
-.bexn7qc {
+.bexn7qd {
   position: absolute;
   top: -2px;
   left: -2px;
@@ -1422,16 +1429,16 @@ svg.react-flow__connectionline {
   transform: translateX(-100%);
   font-variant-numeric: tabular-nums;
 }
-:where([data-edge-hovered="true"],[data-edge-active="true"]) .bexn7qc {
+:where([data-edge-hovered="true"],[data-edge-active="true"]) .bexn7qd {
   font-weight: 600;
   background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 5%);
 }
-.bexn7qd {
-  padding: 2px 6px 4px 6px;
+.bexn7qe {
   text-align: left;
-  font-size: calc(0.78125rem * var(--mantine-scale));
-  line-height: 1.2;
-}@keyframes lbtzdo9 {
+  white-space-collapse: preserve-breaks;
+  font-size: calc(0.875rem * var(--mantine-scale));
+  line-height: 1.185;
+}@keyframes lbtzdoa {
   from {
     opacity: 0.6;
   }
@@ -1446,87 +1453,95 @@ svg.react-flow__connectionline {
   padding: 0;
   margin: 0;
 }
-.react-flow__node-compound:has(.lbtzdo1) {
+.lbtzdo1 {
+  top: 50%;
+  left: 50%;
+  visibility: hidden;
+}
+.react-flow__node-compound:has(.lbtzdo2) {
   opacity: 0.25;
   transition: opacity 600ms ease-in-out, filter 600ms ease-in-out;
   transition-delay: 200ms;
   filter: grayscale(0.85) var(--likec4-safari-animation-hook, blur(1px));
   will-change: opacity, filter;
 }
-.lbtzdo4 {
+.lbtzdo5 {
   width: 100%;
   height: 100%;
   position: relative;
   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;
+  padding: 0;
+  margin: 0;
   transition: all 200ms ease-out;
+  background-clip: padding-box;
+  overflow: hidden;
+  cursor: default;
 }
-.lbtzdo4:before {
+.lbtzdo5:before {
   content: " ";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  border-radius: 6px;
   pointer-events: none;
   transition: background 175ms ease-out, opacity 175ms ease-out;
   background: var(--likec4-element-fill);
-  background-clip: padding-box;
 }
-:where(.react-flow__node.selected) .lbtzdo4 {
+:where(.react-flow__node.selected) .lbtzdo5 {
   box-shadow: none;
 }
-:where(.react-flow__node:focus-visible) .lbtzdo4 {
+:where(.react-flow__node:focus-visible) .lbtzdo5 {
   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));
 }
-.lbtzdo6 {
-  --lbtzdo5: 0;
+.lbtzdo7 {
+  --lbtzdo6: 0;
   --ai-bg: color-mix(in srgb , var(--likec4-element-fill),  transparent 99%);
   border-style: dashed;
   border-width: 3px;
-  padding: 6px;
   box-shadow: none;
-  border-color: color-mix(in srgb , var(--likec4-element-stroke), transparent var(--lbtzdo3, 10%));
-  background-clip: padding-box;
+  border-color: color-mix(in srgb , var(--likec4-element-stroke), transparent var(--lbtzdo4, 10%));
 }
-.lbtzdo6:before {
-  transition-delay: 200ms;
-  opacity: calc(var(--lbtzdo2, 1) + var(--lbtzdo5));
+.lbtzdo7:before {
+  border-radius: unset;
+  transition-delay: 100ms;
+  opacity: calc(var(--lbtzdo3, 1) + var(--lbtzdo6));
 }
-:where([data-hovered]) .lbtzdo6 {
-  --lbtzdo5: .07;
+:where([data-hovered]) .lbtzdo7 {
+  --lbtzdo6: .08;
 }
-.lbtzdo7 {
+.lbtzdo8 {
   font-family: var(--likec4-compound-font-family);
-  font-optical-sizing: auto;
-  font-style: normal;
   text-align: left;
-  display: inline-block;
   font-weight: 600;
-  font-size: 14px;
+  font-size: calc(0.9375rem * var(--mantine-scale));
   text-transform: uppercase;
   letter-spacing: 0.2px;
   line-height: 1;
-  opacity: 0.75;
   color: var(--_compound-title-color,var(--likec4-compound-title-color));
-  padding-left: 12px;
+  padding-left: 14px;
+  padding-top: 13px;
+  padding-bottom: 6px;
+  mix-blend-mode: screen;
 }
-.lbtzdo8 {
-  padding-left: 26px;
+:where(.react-flow__node.draggable) .lbtzdo8 {
+  cursor: grab;
+}
+:where(.likec4-compound-transparent) .lbtzdo8 {
+  padding-top: 10px;
+}
+.lbtzdo9 {
+  padding-left: 32px;
 }
 :where([data-mantine-color-scheme='light'] .likec4-compound-transparent) {
   --_compound-title-color: var(--likec4-element-stroke);
 }
-:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) .lbtzdo7 {
-  opacity: 1;
-}
-.lbtzdoc {
-  --lbtzdoa: var(--likec4-element-loContrast);
-  --lbtzdob: 6;
+.lbtzdod {
+  --lbtzdob: var(--likec4-element-loContrast);
+  --lbtzdoc: 6;
   position: absolute;
   top: 0;
   left: 0;
@@ -1536,98 +1551,105 @@ svg.react-flow__connectionline {
   overflow: visible;
   visibility: hidden;
 }
-:where(.react-flow__node.selected:not(:focus-visible)) .lbtzdoc {
+:where(.react-flow__node.selected:not(:focus-visible)) .lbtzdod {
   visibility: visible;
 }
-:where(.react-flow__node:focus-within:not(.selected)) .lbtzdoc {
-  --lbtzdoa: color-mix(in srgb, var(--likec4-element-stroke) 30%, var(--likec4-element-loContrast));
-  --lbtzdob: 8;
+:where(.react-flow__node:focus-within:not(.selected)) .lbtzdod {
+  --lbtzdob: color-mix(in srgb, var(--likec4-element-stroke) 30%, var(--likec4-element-loContrast));
+  --lbtzdoc: 8;
 }
-:where([data-mantine-color-scheme='light']) .lbtzdoc {
-  --lbtzdoa: color-mix(in srgb, var(--likec4-element-stroke) 80%, #000);
+:where([data-mantine-color-scheme='light']) .lbtzdod {
+  --lbtzdob: color-mix(in srgb, var(--likec4-element-stroke) 80%, #000);
 }
-.lbtzdoc rect {
-  stroke: var(--lbtzdoa);
+.lbtzdod rect {
+  stroke: var(--lbtzdob);
   transform-origin: center center;
-  stroke-width: var(--lbtzdob);
+  stroke-width: var(--lbtzdoc);
   animation-duration: 800ms;
-  animation-name: lbtzdo9;
+  animation-name: lbtzdoa;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   fill: none;
 }
 .lbtzdo0 {
-  --lbtzdod: var(--likec4-element-loContrast);
+  --lbtzdoe: var(--likec4-element-loContrast);
 }
 :where([data-mantine-color-scheme='light'] .likec4-compound-transparent) {
-  --lbtzdod: var(--likec4-element-stroke);
+  --lbtzdoe: var(--likec4-element-stroke);
 }
-.lbtzdoe {
+.lbtzdof {
   --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));
   position: absolute;
   pointer-events: all;
   left: 3px;
-  top: 7px;
+  top: 6px;
   cursor: pointer;
-  color: var(--_compound-title-color,var(--lbtzdod));
-  transform-origin: 90% 70%;
+  color: var(--_compound-title-color,var(--lbtzdoe));
+  transform-origin: 90% 50%;
   opacity: 0.75;
   transition: all 150ms ease-out;
   transition-delay: 0ms;
   background-color: var(--ai-bg);
 }
-.lbtzdoe:hover {
+.lbtzdof:hover {
   box-shadow: var(--mantine-shadow-lg);
   transform: scale(1.42);
   opacity: 1;
   transition-delay: 0;
 }
-.lbtzdoe:active {
+.lbtzdof:active {
   transform: scale(1.1);
   opacity: 1;
   transition-delay: 0;
 }
-:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) .lbtzdoe {
-  --ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill),  transparent 50%);
+:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) .lbtzdof {
+  --ai-bg-hover: color-mix(in srgb , var(--likec4-element-fill),  transparent 60%);
   --ai-hover: color-mix(in srgb , var(--likec4-element-fill),  transparent 20%);
   opacity: 0.85;
 }
-:where(.react-flow__node:not(.dragging) .lbtzdo0:hover) .lbtzdoe:not(:hover) {
+:where(.react-flow__node:not(.dragging) .lbtzdo0:hover) .lbtzdof:not(:hover) {
   --ai-bg: var(--ai-bg-hover);
   box-shadow: var(--mantine-shadow-lg);
   transform: scale(1.223);
   opacity: 1;
   transition-delay: 250ms;
 }
-.lbtzdoe svg.icon {
-  width: 70%;
-  height: 70%;
+.lbtzdof svg.icon {
+  width: 75%;
+  height: 75%;
   stroke-width: 1.5;
 }@keyframes _1b6tkn5 {
   from {
-    opacity: 0.6;
+    stroke-opacity: 0.8;
   }
   to {
-    opacity: 0.4;
+    stroke-opacity: 0.5;
   }
 }
-._1b6tkn2 {
+._1b6tkn1 {
   --_1b6tkn0: color-mix(in srgb, var(--likec4-element-stroke) 90%, var(--likec4-element-fill));
   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0;
+  flex: 1;
   display: flex;
-  align-items: stretch;
+  align-items: center;
+  justify-content: center;
 }
-:where(.react-flow__node.selected) ._1b6tkn2 {
+:where(.react-flow__node.selected) ._1b6tkn1 {
   will-change: transform;
 }
-._1b6tkn2[data-hovered="true"] {
+._1b6tkn1[data-hovered="true"] {
   will-change: transform;
 }
+._1b6tkn2 {
+  top: 50%;
+  left: 50%;
+  visibility: hidden;
+}
 ._1b6tkn3 {
   will-change: transform;
 }
@@ -1638,151 +1660,217 @@ svg.react-flow__connectionline {
   filter: grayscale(0.85) var(--likec4-safari-animation-hook, blur(2px));
   will-change: opacity, filter;
 }
-._1b6tkn6 {
-  stroke: var(--likec4-element-loContrast);
+._1b6tkn7 {
+  --_1b6tkn6: var(--likec4-element-loContrast);
+  stroke: var(--_1b6tkn6);
+  fill: none;
   transform-origin: center center;
   stroke-width: 6;
-  animation-duration: 800ms;
+  animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
-  opacity: 0.6;
+  stroke-opacity: 0.8;
   visibility: hidden;
 }
-:where(.react-flow__node.selected) ._1b6tkn6 {
+:where(.react-flow__node.selected) ._1b6tkn7 {
   visibility: visible;
   animation-name: var(--likec4-safari-animation-hook, _1b6tkn5);
 }
-:where(.react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tkn6 {
+:where(.react-flow__node:focus-visible, ._1b6tkn1:focus-visible) ._1b6tkn7 {
   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"]) ._1b6tkn6 {
+:where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tkn7 {
   stroke-width: 10;
 }
-._1b6tkn4 ._1b6tkn6 {
+:where([data-mantine-color-scheme='light']) ._1b6tkn7 {
+  --_1b6tkn6: color-mix(in srgb, var(--likec4-element-fill) 50%, #3c3c3c);
+}
+._1b6tkn4 ._1b6tkn7 {
   visibility: hidden;
   display: none;
 }
-._1b6tkn7 {
+._1b6tkn8 {
   fill: var(--likec4-element-fill);
 }
-._1b6tkn8 {
+._1b6tkn9 {
   fill: var(--likec4-element-stroke);
 }
-._1b6tkn9 {
+._1b6tkna {
   fill: var(--_1b6tkn0);
 }
-._1b6tkna {
+._1b6tkne {
   flex: 0 0 auto;
   font-family: var(--likec4-element-font-family);
   font-optical-sizing: auto;
   font-style: normal;
-  text-align: center;
+  text-align: var(--_1b6tknc);
   font-weight: 500;
-  font-size: calc(1.1875rem * var(--mantine-scale));
-  line-height: 1.2;
+  font-size: 19px;
+  line-height: 1.15;
   text-wrap: balance;
   color: var(--likec4-element-hiContrast);
 }
-._1b6tknb {
+._1b6tknf {
   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.25;
-  text-align: center;
+  font-size: 14px;
+  line-height: 1.2;
+  text-align: var(--_1b6tknc);
   text-wrap: pretty;
   color: var(--likec4-element-loContrast);
   white-space-collapse: preserve-breaks;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-._1b6tknc {
+:where(._1b6tknb) ._1b6tknf {
+  text-wrap: wrap;
+}
+._1b6tkng {
   flex: 0 0 auto;
   font-family: var(--likec4-element-font-family);
   font-optical-sizing: auto;
   font-style: normal;
   font-weight: 400;
-  font-size: calc(0.75rem * var(--mantine-scale));
+  font-size: 12px;
   line-height: 1.125;
-  text-align: center;
+  text-align: var(--_1b6tknc);
   text-wrap: balance;
   opacity: 0.92;
   color: var(--likec4-element-loContrast);
 }
-._1b6tkn2:hover ._1b6tknc {
+._1b6tkn1:hover ._1b6tkng {
   opacity: 1;
 }
-._1b6tknd {
-  --_1b6tkn1: calc(1.5rem * var(--mantine-scale));
+._1b6tknh {
+  --_1b6tknd: 48px;
   flex: 1;
-  padding: var(--_1b6tkn1);
+  height: fit-content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  padding: calc(1.5rem * var(--mantine-scale));
+  overflow: hidden;
+  gap: calc(0.625rem * var(--mantine-scale));
+}
+:where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) ._1b6tknh {
+  padding-left: 40px;
+  padding-right: 20px;
+}
+:where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tknh {
+  padding-top: 30px;
+}
+:where([data-likec4-shape="browser"]) ._1b6tknh {
+  padding-top: 32px;
+  padding-bottom: 28px;
+}
+._1b6tknh:is(._1b6tknb) {
+  padding-right: 20px;
+}
+._1b6tkn1:not(:is([data-likec4-shape="queue"],[data-likec4-shape="mobile"])) ._1b6tknh:is(._1b6tknb) {
+  padding-left: 20px;
+}
+._1b6tknh:has(._1b6tknf, ._1b6tkng) {
+  --_1b6tknd: 60px;
+  align-items: flex-start;
+  gap: calc(1rem * var(--mantine-scale));
+}
+._1b6tkni {
+  --_1b6tknc: center;
+  height: fit-content;
+  width: max-content;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: center;
+  flex-wrap: nowrap;
   overflow: hidden;
   gap: calc(0.5rem * var(--mantine-scale));
 }
-._1b6tknd:has(._1b6tknb):has(._1b6tknc) {
+._1b6tkni:has(._1b6tknf):has(._1b6tkng) {
   gap: calc(0.375rem * var(--mantine-scale));
 }
-:where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) ._1b6tknd {
-  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"]) ._1b6tknd {
-  padding-top: calc(2.125rem * var(--mantine-scale));
-}
-:where([data-likec4-shape="browser"]) ._1b6tknd {
-  padding-top: calc(2rem * var(--mantine-scale));
-  padding-bottom: calc(1.75rem * var(--mantine-scale));
+:where(._1b6tknb) ._1b6tkni {
+  --_1b6tknc: left;
+  min-width: calc(100% - 160px);
+  align-items: flex-start;
 }
-._1b6tknf {
-  --_1b6tkne: 30px;
-  flex: 0 1 var(--_1b6tkne);
-  max-height: var(--_1b6tkne);
-  margin-top: -8px;
-  position: relative;
-  user-select: none;
-  pointer-events: none;
-  overflow: visible;
+._1b6tknj {
+  flex: 0 0 var(--_1b6tknd);
+  height: var(--_1b6tknd);
+  width: var(--_1b6tknd);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   mix-blend-mode: hard-light;
 }
-._1b6tknf img {
-  position: absolute;
-  left: 0;
-  bottom: 0;
+._1b6tknj svg, ._1b6tknj img {
   width: 100%;
   height: auto;
+  max-height: 100%;
+  pointer-events: none;
+  filter: 
+drop-shadow(0 0 3px rgb(0 0 0 / 12%))
+drop-shadow(0 1px 8px rgb(0 0 0 / 8%))
+drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
+;
+}
+._1b6tknj img {
   object-fit: contain;
-  max-height: calc(var(--_1b6tkne) + 16px);
 }
-._1b6tkni {
-  --_1b6tkng: 
+._1b6tknl {
+  top: 0;
+  left: 0;
+  position: absolute;
+  pointer-events: none;
+  transform-origin: 50% 50%;
+  fill: var(--likec4-element-fill);
+  stroke: none;
+  z-index: -1;
+  transition: opacity 500ms ease-out;
+  transform: translate(8px,10px);
+  opacity: 0.5;
+}
+:where(.react-flow__node.selected, .react-flow__node:focus-visible, ._1b6tkn1:focus-visible) ._1b6tknl {
+  visibility: hidden;
+}
+:where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) ._1b6tknl {
+  transform: translate(8px,8px);
+}
+:where([data-likec4-shape="queue"]) ._1b6tknl {
+  transform: translate(-10px,8px);
+}
+:where([data-hovered="true"]) ._1b6tknl {
+  transition: opacity 300ms ease-in;
+  opacity: 0.2;
+}
+._1b6tknm {
+  --_1b6tknk: 
   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))
 ;
-  top: 0px;
-  left: 0px;
+  top: 0;
+  left: 0;
   position: absolute;
   pointer-events: none;
   fill: var(--likec4-element-fill);
   stroke: var(--likec4-element-stroke);
   overflow: visible;
-  filter: var(--_1b6tknh, var(--_1b6tkng));
+  filter: var(--_1b6tknk);
   transition: filter 300ms ease-out;
   transition-delay: 0ms;
   z-index: -1;
 }
-:where(.react-flow__node.selected, .react-flow__node:focus-visible, ._1b6tkn2:focus-visible) ._1b6tkni {
-  filter: none;
+:where(.react-flow__node.selected, .react-flow__node:focus-visible, ._1b6tkn1:focus-visible) ._1b6tknm {
+  --_1b6tknk: none;
 }
-._1b6tknj {
+._1b6tknn {
   --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));
@@ -1800,28 +1888,28 @@ svg.react-flow__connectionline {
   transition-delay: 0ms;
   background-color: var(--ai-bg);
 }
-._1b6tknj:hover {
+._1b6tknn:hover {
   box-shadow: var(--mantine-shadow-lg);
   transform: translate(-50%, 0) scale(1.35);
   opacity: 1;
   transition-delay: 0;
 }
-._1b6tknj:active {
+._1b6tknn:active {
   transform: translate(-50%, 0) scale(1.02);
   opacity: 1;
   transition-delay: 0;
 }
-:where([data-likec4-shape='browser']) ._1b6tknj {
+:where([data-likec4-shape='browser']) ._1b6tknn {
   bottom: 3px;
 }
-:where(.react-flow__node:not(.dragging) ._1b6tkn2:hover) ._1b6tknj:not(:hover) {
+:where(.react-flow__node:not(.dragging) ._1b6tkn1:hover) ._1b6tknn: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;
 }
-._1b6tknj svg.icon {
+._1b6tknn svg.icon {
   width: 65%;
   height: 65%;
   stroke-width: 1.5;
@@ -1877,17 +1965,12 @@ svg.react-flow__connectionline {
 ._4ysv0o2 {
   text-align: left;
 }._19mimxc0 {
-  top: var(--likec4-navigation-panel-top, 1rem);
+  top: var(--likec4-navigation-panel-top, 0.8rem);
   left: var(--likec4-navigation-panel-left, 1rem);
   margin: 0;
 }
 ._19mimxc0 .mantine-ActionIcon-root {
-  --ai-size: var(--ai-size-md);
-}
-@media (min-width: 62em) {
-  ._19mimxc0 .mantine-ActionIcon-root {
-    --ai-size: var(--ai-size-lg);
-  }
+  --ai-size: var(--ai-size-lg);
 }.hbkbtj0 {
   bottom: 0;
   left: 0;
@@ -1896,7 +1979,7 @@ svg.react-flow__connectionline {
 }
 .hbkbtj1 {
   cursor: default;
-  min-width: 150px;
+  min-width: 200px;
   max-width: calc(100vw - 16px);
   background-color: color-mix(in srgb, var(--mantine-color-body), transparent 20%);
   -webkit-backdrop-filter: var(--likec4-safari-animation-hook, blur(8px));
@@ -1912,9 +1995,16 @@ svg.react-flow__connectionline {
 :where([data-mantine-color-scheme="dark"]) .hbkbtj3 {
   color: var(--mantine-color-gray-5);
 }
+@media (min-width: 48em) {
+  .hbkbtj1 {
+    min-width: 300px;
+    max-width: 90vw;
+  }
+}
 @media (min-width: 62em) {
   .hbkbtj1 {
-    max-width: 45vw;
+    min-width: 400px;
+    max-width: 70vw;
   }
 }._2jkb2y0 {
   position: absolute;